DCO Hybrid Product Carousel

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 lifestyle area 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

Lifestyle Image
Desktop - 1800x1400, JPG, WEBP or MP4
Mobile - 640x400, JPG, WEBP or MP4
Note the lifestyle image is treated as a background, so the edges may be cropped on some screens and devices. We recommend using the overlay for adding any 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 lifestyle area. Add a background image, overlay, and logo. You can set the position of the logo to any side or corner of the lifestyle 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 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.

product mapping

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 lifestyle image 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.