Offers and Series
Overview
Use Add Offers/Series to create image galleries and overview pages based on the offers and series managed in Backstage.
When you add an offer or series, the system pulls the content directly from your Backstage and displays it on your website. Offers and series are managed centrally in Backstage, so you only need to update the content once. Any changes appear wherever the offer or series is displayed on your website.
All media items link directly to your webshop.
Add Offers or Series
Offers help you showcase latest photos or videos from an event. When you add the latest images to an existing offer in Backstage, they always appear on top of the offer overview gallery. This makes offers a great marketing tool.
Series are especially useful for curated image collections focused on a specific topic or visual style.
- In the Main Administrative Menu, navigate to Content.
- In the Content Overview table, locate the page where you want to add offers or series and click Edit.
- Scroll to the bottom of the page editor. From the Add Section dropdown menu, select Add Offers/Series - Overview or Add Offers/Series - Single Offer or Series.
- (Optional) In the Headline field, enter a title or description text.
- Configure the filter and display options. For details, see Field Reference below.
Field Reference: Offers/Series Overview
Filter Options section
Type to retrieve
Select the type of content you want to display: Offers or Series.
Channel
Filter offers by a selected channel (Landscapes, People, Wildlife, etc.).
Important
Make sure the selected channel has no metadata restrictions defined in Backstage.
Subtype
Available for Series only.
Filter series by a selected subtype (Collections, Recipes, Videos, etc.).
Display Options
Output Style
Choose from the following layout options: CSS-Columns, CSS-GRID, Masonry-Layout, Justified Layout. Refer to Collections for details.
Spacing
Define the spacing between displayed items.
Tip
We don't recommend using wide margins when displaying more than three columns.
Maximum number of items
Specify the maximum amount of offers or series to display.
Tip
Performance Note: Displaying more than 50 to 70 items may increase page load times and impact performance.
Number of Columns
Set the number of columns used to display the content.
Background Colour Paragraph
Select a custom background color for the paragraph area.
Use Grayscale
Display images in grayscale and change them to full color on hover.
Use scroll effect
Apply a simple scrolling effect to images.
Tip
For the best visual experience, combine this option with a smaller number of columns and wide margins.
Use »Load more« button
Add the button that dynamically loads additional media items from the selected offer or series without leaving the current page.
Show Title
Display the title of each offer or series.
Show Description
Display a media item with caption if available.
Text on hover
Display the title or description only when users hover over a media item.
Show Date
Control whether the creation date of an offer or series is displayed.
Show Media Count
Control whether the total number of media items contained in an offer or series is displayed.
Show Full Width
Expand the content area to use the full available page width.
Open links in new window
Open the selected offers or series in a new browser tab.
One column layout on mobile
Display the gallery in a single-column layout on smartphones for improved readability, larger image previews, and easier scrolling.
Note
This setting does not affect the display on tablets or desktop computers.
Published
Make the selected offers or series publicly visible.
Field Reference: Single Offer/Series
Select from BACKSTAGE section
Add an offer or a series configured in Backstage to display it on the page. Start typing a name in the autocomplete search field and it will dynamically suggest matching results.
Note
Changes to an offer or series may not appear immediately because the content is cached to improve page performance. To force a refresh, re-select the offer or series and save the page again.
Display Options section
Output Style
Choose from the following layout options: CSS-Columns, CSS-Grid, CSS-Rows, Masonry-Layout, Justified Layout. Refer to Collections for details.
Spacing
Define the spacing between displayed items.
Tip
We don't recommend using wide margins when displaying more than three columns.
Maximum number of items
Specify the maximum amount of offers or series to display.
Tip
Displaying more than 50 to 70 items may increase page load times and impact performance.
Number of Columns
Set the number of columns used to display the content.
Background Colour Paragraph
Select a custom background color for the section.
Use gallery
If enabled, items within the selected collection can be opened in a gallery view.
Use scroll effect
Apply a simple scrolling effect to images. Use wide margins and smaller number of columns for best visual results.
Use grayscale
Display images in grayscale and change them to full color on hover.
Use »Load more« button
Add the button to show more media items available in the selected offer or series. The items load dynamically and are displayed within the current view.
Show Caption
Display a media item with caption if available.
Text on hover
Display the caption only when users hover over a media item.
Open links in new window
Open the selected offers or series in a new browser tab.
Show Full Width
Expand the content area to use the full available page width.
One column layout on mobile
Display the gallery in a single-column layout on smartphones for improved readability, larger image previews, and easier scrolling.
Note
This setting does not affect the display on tablets or desktop computers.
Published
Make activated offers or series publicly visible.
Quick Demo: Add an Offer Overview to a page and customize its layout and display settings.
Quick Demo: Add a Single Offer to a page and customize its layout and display settings.
For more examples of Offers and Series, visit our Demo Page.