The Dynamic Fluid Product Carousel is a responsive high impact template for Topscroll and Midscroll (both desktop & mobile), that allows for the easy creation of a product carousel banner. This format features a feed-powered product carousel.
Examples
Admire Fashion (Desktop Topscroll)
Admire Fashion (Mobile Topscroll)
Assets
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 on the logo.
Next add a logo image. The logo will always be positioned at the top center of the creative.
The CTA text will appear on the button for 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.
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 2 individual text fields, each of which can be populated by a different part of your feed. The product text appears first, and uses a regular font weight. Below that is the product price, which uses a bold and slightly larger font size.
The final options allow for the colours and appearance of the template to be customised. Header background colour sets the colour of the area behind the logo. If using a semi-transparent colour, content behind the header will be slightly blurred to give a glass-like effect. The amount of blur can be changed, or disabled entirely if preferred.
Carousel interface colour sets the colour of the carousel navigation buttons. Product background colour sets the background colour of the product text. Product text colour sets the colour of all the text on the product.
Max total file weight
The maximum file weight for all assets (Including 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.611Z. 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 Fluid Product Carousel
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 Fluid Product Carousel
Responsive carousel for Topscroll & Midscroll populated by feed products. · Version 1.1.1
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Click URL | Fallback click destination when a product lacks its own URL. | ||
| Logo | Brand logo asset. | ||
| CTA Text | Call to action label displayed with products. | SHOP NOW |
Feed Mapping
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Product Click URL | Select the column from your feed that contains the product click URL / landing page. | ||
| Product Image | Select the column from your feed that contains the product image. | {"Type":"Asset"} | |
| Product Text | Select the column from your feed that contains the product title or name. | ||
| Product Price | Select the column from your feed that contains the product price, or similar. |
Config
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Products per Slide | Number of products rendered per carousel slide. | 3 | choices: 1, 2, 3, 4 | |
| Maximum Products | Upper limit of products fetched from feed. | 9 | |
| Shuffle Products | Randomise product order before rendering. | Enabled | choices: Enabled, Disabled | |
| Header Background Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff33 | |
| Header Background Blur | Select the header background blur option from the list to control how the template behaves. | Light | choices: Light, Heavy, Disabled | |
| Carousel Interface Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #000000 | |
| Background Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff | |
| Product Image Scaling Mode | Scaling Mode for product images. Cover may crop. Contain may leave space filled by Background Colour. | cover | choices: cover, contain | |
| Product Text Background Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #0000004d | |
| Product Text Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff | |
| Display Mode | Select the display mode option from the list to control how the template behaves. | Topscroll | choices: Topscroll, Midscroll |