A fluid skin side panel that presents products in an interactive carousel, populated automatically from a product feed rather than from fixed uploaded assets. A customisable brand area sits above the carousel for logo or promotional artwork. When paired with the Skin Top with Sticky Streaming Video top banner, the format also supports sticky video playback, so the video can remain visible after the top banner scrolls away.
For more information please see our Guide to Skins, which covers:
- The key differences between our Seamless Skin & Fluid Skin formats
- The basics for designing assets for use within our skin templates
- Tips and best practice for using overlays
Recommended default creative dimensions
Brand area
- Brand Overlay:
Maximum size of 800x400px (PNG or WEBP with transparent background) - Brand Background Image (optional):
800x1440px (JPG or WEBP)
Feed products
- Product Image:
Square or portrait, minimum 600x600px (JPG, PNG or WEBP). Supplied by the feed, not uploaded to the creative.
The carousel draws its products from the attached feed, so product imagery and copy are only as consistent as the feed itself. Check a representative sample before launch – mixed aspect ratios are the most common cause of an uneven-looking carousel.
Format description and guidance
The panel is laid out as a brand area above a product carousel. Brand Area Height sets the split between the two as a percentage of the panel, and Carousel Background Type chooses whether the carousel sits on a colour, its own image, or an extension of the brand background so the panel reads as a single surface.
Carousel Style switches between Product Cards, where each product sits in a framed card, and Full Bleed, where the product image fills the card and the text is overlaid on top. Full Bleed needs product imagery with enough clear space for the text to stay legible.
Feed Mapping is where each column of the feed is assigned to the title, details, price, image and click URL. The product image is the one that matters: any feed row with no value in the mapped image column is skipped entirely. Title, details and price are optional and simply render without them.
If no row in the feed carries a value under the mapped image column, the panel falls back to built-in sample products rather than rendering empty. Placeholder products appearing in a preview are the signal that the Feed Mapping no longer matches the attached feed.
Sticky video and the panel content. When the creative is paired with the Skin Top with Sticky Streaming Video top banner, the video moves into the side panel once the top banner scrolls out of view. Because this panel lays its content out in a column rather than as a floating overlay, the setting is called Content Behaviour and it shortens the brand area and carousel rather than moving them:
- Overlap (default) – the player is drawn on top of the panel. Nothing moves, but the player can obscure the products on shorter screens.
- Resize While Sticky – the panel content shortens to the space the player leaves while it is on screen, and returns to full height when playback is handed back to the top banner.
- Always Reserve Space – that reduced content area is kept at all times, so nothing moves as the user scrolls.
Because the brand area is sized as a percentage of the panel, both reserving modes shorten the brand area and the carousel together rather than taking the space from one of them – so allow for a shorter brand lockup and fewer visible product details on smaller screens. Overlap is the default, so a creative only behaves differently once this is changed.
Max total file weight
3.5 MB.
Feed images are loaded at runtime and do not count towards the creative's file weight, but they should still be compressed – a slow feed image is a slow carousel. For best performance, all uploaded assets should be compressed and optimised to the lowest possible file weight. We recommend using tinypng.com to compress PNG overlays.
Click tags and tracking
Each product carries its own click URL from the feed. The Default Click URL is used as a fallback for any product whose feed row has no URL, and the Brand Area Click URL can send the brand area to a different destination from the products.
Audio
No
Template Details
Dynamic Fluid Skin Carousel
General
| Parameter | Purpose |
|---|---|
| Default Click URL | Fallback click destination when a product lacks its own URL. |
Brand Area
| Parameter | Purpose | Default |
|---|---|---|
| Brand Background Image | Full-bleed background image behind the brand overlay. Optional. | |
| Brand Overlay Image | Branding or promotional overlay displayed in the brand area above the carousel. | |
| Brand Area Height | Height of the brand area as a percentage of the side panel. | 20% |
| Brand Area Background Colour | Background colour of the brand area, visible when no background image is set. | #ffffff00 |
| Brand Overlay Scaling Mode | Scaling mode for the brand overlay image. Contain avoids cropping. Cover fills and may crop. | contain | choices: contain, cover |
| Brand Overlay Padding | Space around the brand overlay image. | 5% |
| Brand Area Click URL | Click destination for the brand area. Uses the default click URL when empty. |
Feed Mapping
| Parameter | Purpose | Default |
|---|---|---|
| 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 Details | Select the column from your feed that contains the product description or details. Optional. | |
| Product Price | Select the column from your feed that contains the product price, or similar. |
Carousel Config
| Parameter | Purpose | Default |
|---|---|---|
| Carousel Style | Product Cards shows each product in a framed card. Full Bleed uses the product image as a full background with the text overlaid on top. | Product Cards | choices: Product Cards, Full Bleed |
| Carousel Background Image | Full-bleed background image behind the product cards. Used when Carousel Background Type is Image. | |
| Carousel Background Colour | Background colour behind the product cards. Used when Carousel Background Type is Colour. | #00000011 |
| Carousel Background Type | Choose the carousel background: an image, a colour, or extend the brand background image across the full panel height. | Colour | choices: Image, Colour, Extend Brand Background |
| Products Per Slide | Number of products stacked vertically on each carousel slide. | 1 | choices: 1, 2 |
| Maximum Products | Upper limit of products fetched from feed. | 9 |
| Shuffle Products | Randomise product order before rendering. | Enabled | choices: Enabled, Disabled |
| Navigation Arrows | Show previous / next arrows on the carousel. | Enabled | choices: Enabled, Disabled |
| Navigation Dots | Show slide indicator dots on the carousel. | Enabled | choices: Enabled, Disabled |
| Carousel Interface Colour | Colour of the carousel navigation arrows and dots. | #000000 |
| 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 Image Background Colour | Colour behind the product image, visible when the scaling mode is contain. | #ffffff |
| Product Background Colour | Background colour of the product card. | #ffffff |
| Product Text Colour | Colour of the product title, details and price text. | #333333 |
CTA Button
| Parameter | Purpose | Default |
|---|---|---|
| CTA Text | Call to action label displayed with each product. | SHOP NOW |
| Border Radius | Corner rounding of the CTA button. Accepts any CSS size value. | 0.25em |
| CTA Button Colour | Background colour of the CTA button. | #666 |
| CTA Text Colour | Text colour of the CTA button. | #eee |
| CTA Button Hover Colour | Background colour of the CTA button on hover. | #fff |
| CTA Text Hover Colour | Text colour of the CTA button on hover. | #000 |
Text Config
| Parameter | Purpose | Default |
|---|---|---|
| Google Font Family | Google Font used for all product text. | Open Sans |
| Font Size | Font size of the product text area. Accepts any CSS size value. | 0.9em |
Sticky Video Player
| Parameter | Purpose | Default |
|---|---|---|
| Video Side | Enables sticky video handoff from top banner into side panel when scrolling. | Disabled | choices: Disabled, Enabled |
| Video Transition | Sets the transition animation used when the sticky video player appears. | Slide In | choices: Disabled, Slide In |
| Video Position | Vertical position of the sticky video within the side panel. | top | choices: top, middle, bottom |
| Max Height | Maximum height applied to the sticky video player. | Match Top Banner Height | choices: Match Top Banner Height, 180px, 200px, 250px, 300px, 350px, 400px |
| Content Behaviour | Controls how the brand area and product carousel react to the sticky video player. Overlap keeps the original behaviour, where the player is drawn on top of the panel and can obscure the products on some screens. Resize While Sticky shortens the panel content to the space left by the player while it is on screen, and restores it when the player hands playback back. Always Reserve Space keeps that reduced content area at all times, so nothing moves as the user scrolls. | Overlap | choices: Overlap, Resize While Sticky, Always Reserve Space |
| Vertical Offset | Additional vertical offset applied after positioning (supports px, %, vh). | 0 |