This is desktop banner template for Topscroll & Midscroll. It allows for up to 4 products to be displayed, each with up to 2 images, along with dynamic text elements that can be used for adding a CTA, price and description. Hovering over any of the images with the mouse cursor will display that image enlarged in a lightbox, allowing for users to take a closer look. The template also features customisable colours, logo, font & headline.
Initial state, all products are displayed side by side. | Hovering over image thumbnails launches a lightbox, allowing the full image to be viewed in more detail. |
Examples
Adventure Travel (topscroll)
Adore Skincare (midscroll)
Assets
Logo
PNG, WEBP, SVG, max 250kb.
Dimensions: Recommended size 300x100px or similar. Due to limited vertical space, we recommend using horizontal variants of logos where available.
Product Images
JPG, PNG, WEBP, max 250kb.
Up to 8 (template supports up to 4 products, with up to 2 images for each)
Dimensions: Recommended size 1280x720 or similar. By default images use the 'cover' scaling mode, so may appear cropped around the edges, but they can be set to 'contain' if necessary for your intended use.
Text Elements
Headline - Appears at the top of the banner, alongside the logo. Max 40 characters.
CTA - Appears as a button below each product. Max 20 characters.
Product Title - Appears in the coloured box above each product. Max 30 characters.
Product Plain Text (optional) - Plain text below product images, ideal for product descriptions, uses sans-serif font. Max 100 characters.
Product Decorative Text (optional) - Larger editable text below each product, uses custom Google font. Max 100 characters.
Format description and guidance
Add your default click URL. This is the landing page that clicking on the top brand bar or background will take you too. It will also be used as a default URL for products if they are not given their own landing pages.
Add your logo, headline & CTA text. Then you can customise the colours of the template. Additionally you may customise the font used by the headline, titles, decorative text & CTA by adding the name of any valid Google Font family.
Then for each product, add a title and upload 1 or 2 images. If you do not add a product title, that product will not be used. You may add a unique click URL for each product, otherwise the default click URL will be used. The optional text elements are versatile, and can be used in many ways, such as to adding descriptions & price information to each product.
The advanced settings contain additional options for customising the appearance of the template. You may:
- Flip the layout of the top header bar
- Modify the layout of the product images - column (stacked) or row (side by side)
- Change the scaling mode of each product image.
Max total file weight
The combined file weight of all assets must not exceed 3.5 MB.
Audio
No
Template Details
Automatically synced on 2026-02-11T14:27:19.642Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.
Canvases: Desktop Topscroll, Mobile Topscroll, Desktop Midscroll
Banner templates: Product Lightbox
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.
Product Lightbox
A product focused template with interactive lightbox on hover. · Version 1.0.0
General
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Default Click URL | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | Required | |
| Logo | Upload the logo asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | Required | |
| Headline | Sets the headline value used in the creative. Supports plain text or CSS units where required. | ||
| CTA | Sets the cta value used in the creative. Supports plain text or CSS units where required. | Shop Now |
Colours
| 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. | #ffffff | |
| Product Panel Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff | |
| Headline Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #000000 | |
| Text Colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #000000 | |
| Title & CTA background colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffcc00 | |
| Title & CTA text colour | Hex colour (#RRGGBB or #RRGGBBAA) applied to this element. Use it to match brand palettes and overlay blends. | #ffffff | |
| Google Font Family | Enter the name of a Google Font Family to customise the font used by the banner. | Work Sans |
Product 1
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Title | Sets the title value used in the creative. Supports plain text or CSS units where required. | ||
| Click URL | If left blank, will use the default click URL instead. | ||
| Image 1 | Upload the image 1 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Image 2 | Upload the image 2 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Plain Text | Plain text uses a sans-serif font. | ||
| Decorative Text | Decorative text uses the custom Google Font. |
Product 2
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Title | Sets the title value used in the creative. Supports plain text or CSS units where required. | ||
| Click URL | If left blank, will use the default click URL instead. | ||
| Image 1 | Upload the image 1 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Image 2 | Upload the image 2 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Plain Text | Plain text uses a sans-serif font. | ||
| Decorative Text | Decorative text uses the custom Google Font. |
Product 3
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Title | Sets the title value used in the creative. Supports plain text or CSS units where required. | ||
| Click URL | If left blank, will use the default click URL instead. | ||
| Image 1 | Upload the image 1 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Image 2 | Upload the image 2 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Plain Text | Plain text uses a sans-serif font. | ||
| Decorative Text | Decorative text uses the custom Google Font. |
Product 4
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Title | Sets the title value used in the creative. Supports plain text or CSS units where required. | ||
| Click URL | If left blank, will use the default click URL instead. | ||
| Image 1 | Upload the image 1 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Image 2 | Upload the image 2 asset (JPG, PNG, or WEBP). Follow safe-zone guidance and stay within the platform file-size limits. | ||
| Plain Text | Plain text uses a sans-serif font. | ||
| Decorative Text | Decorative text uses the custom Google Font. |
Advanced Settings
| Parameter | Purpose | Default / Choices | Notes |
|---|---|---|---|
| Header Order | Change the layout of the header bar. | Logo on Right | choices: Logo on Left, Logo on Right | |
| Image Layout | When multiple images are used for each product, this allows you to change their layout. | column | choices: column, row | |
| Image 1 Scale Mode | Sets image scaling behaviour for every 'Image 1'. | cover | choices: cover, contain | |
| Image 2 Scale Mode | Sets image scaling behaviour for every 'Image 2'. | cover | choices: cover, contain | |
| Format Layout | Adds in additional safezones for Midscroll creative. | Topscroll | choices: Midscroll, Topscroll |