The Dynamic Hybrid Product Carousel is a responsive high impact template for Topscroll and Midscroll(both desktop & mobile), that allows for the easy creation of a hybrid product carousel banner. This format features a feed-powered product carousel, alongside a brand section with a customisable background, logo and overlay, which can be used for adding additional brand or messaging elements.
Examples
Adventure Travel (Desktop Topscroll)
Adventure Travel (Mobile Topscroll)
Assets
Brand Section Background
Desktop - 1800x1400, JPG, WEBP, MP4
Mobile - 640x400, JPG, WEBP, MP4
Note the background edges may be cropped on some screens and devices. We recommend using the overlay for adding key brand elements or messaging on top of the background.
Overlay
Dimensions flexible, max size of 1700x800 (PNG or WEBP with transparent background)
Logo
SVG, JPG, PNG or WEBP. Dimensions flexible.
Product Feed
See our guide for information on setting up a dynamic product feed.
Format description and guidance
First add a default click URL - this will be the landing page when a user clicks anywhere other than on a specific product.
Next configure the brand section. Add a background image, overlay, and logo. You can set the position of the logo to any side or corner of the brand area.
The following parameters allow you to configure the carousel. The CTA text will appear on the buttons below each product, so set this to something suitable. Then choose how many products per slide you would like to display - generally for desktop, 2-3 products per slide works well, and for mobile 1-2 is optimal. Next choose the maximum number of products for the banner to display - this is the total number of products that will be loaded from the feed.
For best results we recommend between 5 and 10 products maximum, depending on the file weight of each of your product images within your feed - each image loaded is counted towards the total file weight of the creative, so care must be taken to ensure that the banner can't load more than 3.5MB of assets in total.
Finally you can choose how the scaling mode for the product images - by default they use the "cover" mode, which will stretch the asset to fill all the available space, but can result in cropping around the edges. Change this to "contain" to ensure that product images are never cropped (however note that this will result in some empty white space around the images, which may not look as nice).
Next we need to configure the mapping for your feed, to determine what will be displayed by the template. First select the source for your product image. Then select the product click URL - this should be a product specific landing page from your feed.
The template includes 3 individual text fields, each of which can be populated by a different part of your feed. The product text appears first, and uses a bold font weight. Below that is the product details , which uses a regular font weight. Product details field is limited to 4 lines of text (approx 80 chars) max, and will clip longer text. The product price is the final text element, it is also bold and uses a slightly larger font size than the others.
The final options allow for the colours of the template to be customised. Background colour sets the colour of the area behind the products. Carousel interface colour sets the colour of the carousel navigation buttons. Product background colour sets the background colour of the individual product elements. Product text colour sets the colour of all the text on the product elements. Finally the CTA button and text colours can also be customised.
Max total file weight
The maximum file weight for all assets (Including brand section and all product images from the feed) is 3.5 MB. Exceeding this can result in your creative being blocked by browsers.
For best performance, all assets should be compressed and optimised to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.
Click tags and tracking
The template supports one default click URL & impression tracker.
Audio
None.
Template Details
Automatically synced on 2026-02-11T14:27:19.606Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Desktop Topscroll, Mobile Topscroll, Desktop Midscroll, Mobile Midscroll
Banner templates: Dynamic Hybrid Product Carousel with Streaming Video
Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.
Dynamic Hybrid Product Carousel with Streaming Video
Responsive carousel for Topscroll & Midscroll with feed-driven products and static brand elements. · Version 1.1.0
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Click URL | Fallback click destination for items without their own URL. |
Brand Section
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Background (Image) | Image asset used as the background. Add only an image or a video, not both. | ||
| Background (Video) | Streaming video asset used as the background. Add only an image or a video, not both. | ||
| Max Video Stream Weight | Upper file weight limit applied to the brand video stream. | 1.5mb | choices: 3.5mb, 2.5mb, 1.5mb, 1.0mb | |
| Overlay | Optional overlay on top of brand background. | ||
| Logo | Brand logo asset. | ||
| Logo Position | Logo alignment within brand section. | bot-center | choices: top-left, top-center, top-right, bot-left, bot-center, bot-right | |
| Logo Height | Responsive height of the logo (supports units). | 12vh |
Feed Mapping
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Product Click URL | Select the column from your feed that contains the product destination URL. | ||
| Product Image | Select the column from your feed that contains the product image asset. | {"Type":"Asset"} | |
| Product Text | Select the column from your feed that contains the product name or title. | ||
| Product Details | Select the column from your feed that contains the product description (or similar) text. | ||
| Product Price | Select the column from your feed that contains the product price (or similar). |
Carousel Settings
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| CTA Text | Call to action label displayed with products. | SHOP NOW | |
| Products per Slide | Number of products shown in each carousel slide. | 3 | choices: 1, 2, 3, 4 | |
| Maximum Products | Upper limit of products fetched from the feed. | 9 | |
| Shuffle Feed | Randomise product order before rendering. | Enabled | choices: Enabled, Disabled | |
| Navigation Arrows | Toggle left/right carousel arrows. | Enabled | choices: Enabled, Disabled | |
| Navigation Dots | Toggle pagination dots below carousel. | Enabled | choices: Enabled, Disabled | |
| Image Scaling Mode | Scaling Mode for product images (Cover may crop, Contain may leave space). | cover | choices: cover, contain | |
| Creative Layout | Reversed swaps brand section and carousel positions. | Default | choices: Default, Reversed | |
| Display Mode | Placement behaviour (Topscroll or Midscroll). | Topscroll | choices: Topscroll, Midscroll |
Colours & Fonts
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Background Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #00000011 | |
| Carousel Interface Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #000000 | |
| Product Background Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff | |
| Product Text Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #333333 | |
| CTA Button Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #666 | |
| CTA Text Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #eee | |
| CTA Button Hover Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #fff | |
| CTA Text Hover Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #000 | |
| Google Font Family | Sets the google font family value used in the creative. Supports plain text or CSS units where required. | Open Sans |