In Horizon, you can enable Side-by-side view for your leaflets to show more products and give a more catalog-like feel.
📖 This guide explains:
What is Side-by-side view?
Side-by-side view takes two pages and places them next to each other horizontally.
This allows visitors to see more content within the same viewport. It’s ideal for product-heavy or promotional leaflets.
Here’s a comparison of the look and feel of singe page view and Side-by-side:
💡 This layout mirrors the look and feeling of a classic digital catalog, while using a vertical scroll instead of flipping.
Please note that Side-by-side view always displays:
The first page as a single page
All following pages as two-page spreads (side-by-side) on desktop
Previewing Side-by-side for your leaflet
You can easily compare single page and Side-by-side views of your leaflet directly in the Horizon Preview.
In the preview, you’ll find a toggle that allows you to switch between:
Single page view
Side-by-side view
This makes it easy to see how your content looks in both formats before publishing.
How to enable Side-by-side view on a live leaflet
Side-by-side view is configured on the Alias used to embed your live leaflet.
To enable it:
Go to Aliases
Select the Alias used for embedding your leaflet
Enable Side-by-side view
Save your changes
Once enabled, the setting will apply to all leaflets using that Alias.
Learn more about Aliases:
After enabling Side-by-side view, we recommend you to check that your webpage is indeed showing the embedded leaflet in Side-by-side mode.
If your leaflet is still showing in single page view, even though you’ve enabled Side-by-side view, there may be a challenge with the amount of space on your webpage…
Required space on your webpage for a Side-by-side leaflet
If the container on your website is too narrow, the leaflet will automatically display in single-page mode instead.
To display spreads with Side-by-side properly, the embedded leaflet needs 1000 pixels or more of available width, but in special cases even more space may be required.
Reach out to us at support@ipaper.io if you need help or guidance.
Desktop and mobile behavior
Side-by-side view is designed for larger screens. Therefore, mobile devices will automatically show single-page view to ensure readability and usability.
Desktop: Displays two-page spreads (after the first page)
Mobile: Always displays a single page
Summary
Side-by-side view is a simple way to make the leaflet experience more catalog-like and show more products at once on desktop devices.
You can preview single page vs. Side-by-side view of your leaflet, and enable Side-by-side view on a live leaflet via the Alias.
As always, if you have any questions, we’re happy to help via chat or at support@ipaper.io.