Banner Templates and Guidelines

Required Assets

1. Logo: Supply as vector or no background file format (PNG, AI, SVG, GIF, EPS). Max asset height is 85px. Not required if not used.
2. Title and Description: Provide as separate text elements — Title: up to 55 characters; Description: up to 85 characters.
3. Banner Creative: Used purely as a visual backdrop, following the PSD template layout.
   Should not include any logo, title, description, or CTA — these are added separately during build.

Notes for Asset Preparation:

Examples of Banner Creative Treatments:

1. Placing key visuals inside the bleed area ^[1]

   The "Wide-Screen Bleed Zone" should only be used for background continuation, not for main subjects or important visual details. Anything placed here may be cropped or hidden on smaller screens.

2. Embedding logo, title, or text directly into the background ^[2]

   Do not include any text, logo, or CTA as part of the background image. These elements are added separately during build to maintain consistent positioning, scaling, and legibility across devices.

3. Using full-bleed imagery with no space for text ^[3]

   Avoid backgrounds that are too visually busy or lack negative space for copy placement. Ensure the central area remains clean and provides sufficient contrast for text readability.

4. Using the product or model too close to the central safe area ^[3]

   Keep main visuals away from the central text zone. Overlapping or crowding this area reduces clarity, draws attention away from the message, and makes the layout look visually heavy.

5. Using too many SKUs or products within a single banner

   Limit the number of SKUs or products displayed in one banner to a maximum of five. Including more than this creates visual clutter, weakens visual hierarchy, and makes it harder for users to quickly understand the message or focus on key products. Fewer, well-spaced products improve scanability, maintain visual balance, and result in a cleaner, more effective user experience across all screen sizes.

Rule	Description
Primary position	Always placed at the very top of the Home page or CLP, above all other content.
Viewport clarity	Ideally no other banners should be visible in the same viewport — this ensures maximum prominence and avoids visual fatigue.
Optional pairing	Can be displayed alone, or paired with the Hot Offers Strip immediately underneath when promotion density needs to increase.
Multiple banners	Can exist as a single static banner or a carousel, depending on campaign needs.

1. Logo: Supply as vector or no background file format (PNG, AI, SVG, GIF, EPS). Not required if not used.
2. Title: Provide as separate text elements up to 55 characters.
3. Banner Creative: Used purely as a visual backdrop, following the PSD template layout.
   Should not include any logo, title, description, or CTA — these are added separately during build.

Notes for Asset Preparation:

Examples of Banner Creative Treatments:

1. Placing key visuals inside the bleed area ^[1]

   The "Wide-Screen Bleed Zone" should only be used for background continuation, not for main subjects or important visual details. Anything placed here may be cropped or hidden on smaller screens.

2. Embedding logo, title, or text directly into the background ^[2]

   Do not include any text, logo, or CTA as part of the background image. These elements are added separately during build to maintain consistent positioning, scaling, and legibility across devices.

3. Using full-bleed imagery with no space for text ^[3]

   Avoid backgrounds that are too visually busy or lack negative space for copy placement. Ensure the central area remains clean and provides sufficient contrast for text readability.

4. Using the product or model too close to the central safe area ^[3]

   Keep main visuals away from the central text zone. Overlapping or crowding this area reduces clarity, draws attention away from the message, and makes the layout look visually heavy.

Rule	Description
Placement	Always positioned at the top of the page template, directly beneath the navigation elements.
Mobile-first optimisation	Designed to preserve vertical real estate on mobile, keeping product listings visible high on the page.
PLP Usage	Recommended as the only banner type for PLPs — to avoid clutter and maintain visibility of products.
Carousel	Use only if the brand has multiple campaign moments of equal priority.
Brand consistency	Must follow approved brand guidelines and safe areas for imagery/text.

Required Assets

1. Logo: Supply as vector or no background file format (PNG, AI, SVG, GIF, EPS). Not required if not used.
2. Title and Description: Provide as separate text elements — Title: up to 55 characters; Description: up to 85 characters.
3. Banner Creative: Used purely as a visual backdrop, following the PSD template layout.
   Should not include any logo, title, description, or CTA — these are added separately during build.

Notes for Asset Preparation:

1. Using too many SKUs or products within a single banner

   Limit the number of SKUs or products displayed in one banner to a maximum of five. Including more than this creates visual clutter, weakens visual hierarchy, and makes it harder for users to quickly understand the message or focus on key products. Fewer, well-spaced products improve scanability, maintain visual balance, and result in a cleaner, more effective user experience across all screen sizes.

Rule	Description
Hierarchy	Always secondary in the visual hierarchy — never the first banner on the page.
Placement	Positioned below a takeover or Goldspot banner when those are in use.
Viewport clarity	Only one banner type may be visible per viewport — avoid visual clutter and message conflict.
Homepage use	Recommended for homepage only when additional campaigns are active or during seasonal trading peaks.
Other pages	Can be used on high-value landing pages if aligned to business campaigns and space allows.

• Top of page: Takeover campaign.
• Below the fold: L-size banner providing supporting campaign content.
• No overlap in viewport: User sees one promotional unit at a time.

• Creates clarity.
• Maintains hierarchy.
• Supports layered messaging strategy.

1. Title:

   Separate text element up to 54 characters.

2. Description:

   Separate text element up to 60 characters.

3. Banner Creative:

   Lifestyle photo or Product creative, following the PSD template layout.
   Should not include any title, description, or CTA — these are added separately during build.

Rule	Description
Placement	Used below hero-level components. It must not sit above Goldspot / Page Hero / Takeover banners.
Sections commonly used	Top Offers, New Launches, Top Health Deals, Staff Picks, Editorial modules.
Carousel / tabbed variant	Can be displayed as a carousel or tabbed carousel, depending on content density.
Content type	Can display offer cards, category links, or promotional messaging and other relevant content.

1. Using too many SKUs or products within a single banner

   Limit the number of SKUs or products displayed in one banner to a maximum of five. Including more than this creates visual clutter, weakens visual hierarchy, and makes it harder for users to quickly understand the message or focus on key products. Fewer, well-spaced products improve scanability, maintain visual balance, and result in a cleaner, more effective user experience across all screen sizes.

• Promote short-term or tactical campaigns.
• Visually break sections of the page into meaningful clusters.
• Guide users to category-level content.
• Provide editorial or human-led content (e.g., staff picks / reviews).

1. Title:

   Separate text element up to 54 characters.

2. Description:

   Separate text element up to 60 characters.

3. Banner Creative:

   Lifestyle photo or Product creative, following the PSD template layout.
   Should not include any title, description, or CTA — these are added separately during build.

1. Using too many SKUs or products within a single banner

   Limit the number of SKUs or products displayed in one banner to a maximum of five. Including more than this creates visual clutter, weakens visual hierarchy, and makes it harder for users to quickly understand the message or focus on key products. Fewer, well-spaced products improve scanability, maintain visual balance, and result in a cleaner, more effective user experience across all screen sizes.

Rule	Description
Placement	Most commonly used within CLPs and below key content blocks (e.g., below product listers or within offer sections).
Do not stack above hero sections	Must not appear above Goldspot, Takeover, or Page Hero banners.
Carousel-friendly	Can be displayed as a carousel or grid, depending on layout flexibility.

It is ideal for showcasing:

• Promotions / price events
• SKU-specific offer highlights
• Category-level nudges
• Supporting messaging below hero and M-size content

1. Title:

   Separate text element up to 60 characters.

2. Description:

   Separate text element up to 180 characters.

3. Banner Creative:

   Used purely as a visual backdrop, following the PSD template layout.
   Should not include any logo, title, description, or CTA — these are added separately during build.

Notes for Asset Preparation:

Rule	Description
Hierarchy	Must not appear in the same viewport as Goldspot, Page Hero, or Takeover banners.
Homepage use	Ideal when using Goldspot as the hero banner — placed further down the page.
Recommended NOT to be use with Takeovers	Both are high-impact modules — using both causes visual fatigue and scroll overload.
CLP & PDP usage	Can be used mid-page to highlight a brand offering or campaign with shoppability.
Internal navigation	May include an M-size banner carousel for contextual linking to deeper pages.

It enables brands to:

• Present a campaign narrative.
• Feature brand-owned imagery.
• Provide a SKU carousel.
• Optionally display an M-Size Banner carousel for internal links (e.g., service pages, brand categories, staff picks).

The component can also include an M-size banner carousel beneath or alongside the campaign messaging. This internal linking carousel is ideal for:

• Health services (e.g., Pharmacy First, Online Doctor)
• Category-level links (e.g., Makeup, Skincare, Haircare)
• Featured services & staff experts
• Routines / how-to guides

This variation transforms the module into a shoppable + informative hybrid, enabling users to explore brand or service pathways.

Best example provided (Health Hub):

• Campaign storytelling (left)
• Visual brand ambassadors (right)
• M-size linked cards for navigation (below)
• Supports service awareness & product sales
• Strong UX for discovery and trust-building

1. Logo:

   Supply as vector or no background file format (PNG, AI, SVG, GIF, EPS). Not required if not used.

2. Title:

   Separate text element up to 55 characters.

3. Description:

   Separate text element up to 40 characters.

4. Banner Creative:

   Used purely as a visual backdrop, following the PSD template layout.
   Should not include any logo, title, description, or CTA — these are added separately during build.

5. Video/GIF background (optional):

   If a video background is used, the maximum file size is 40MB. As this banner sits above the fold, large files can negatively impact page performance and loading times. Wherever possible, aim to keep video files around 10MB or lower to ensure optimal user experience.

   Supported formats: MP4, AVI, WPG, MPED, FLV, GIF.

Notes for Asset Preparation:

Rule	Description
Placement	Homepage only – always positioned at the very top of the page.
Viewport clarity	No other L-size banner or L-size banner carousel should appear in the same viewport immediately after it.
Can be paired with	Hot Offers Strip (directly below) when needed.
Must NOT be combined with	Goldspot Hero Banner, Brand-Focus Banner, or other hero-level modules in the same viewport.
Mobile	Mobile view supports only still image and no gif animation in order to mitigate performance issues.

1. Title:

   Separate text elements up to 60 characters.

2. Description:

   Separate text elements up to 130 characters.

3. CTA text:

   Separate text elements up to 30 characters.

4. Banner Creative:

   Image followed by S-size banner PSD template.

It can be used across:

• Homepage
• Landing Pages
• CLPs
• PDPs (when contextually relevant)

Rule	Guidance
Placement	Mid-page / post-hero region. Not to be used as a primary hero element.
Hierarchy level	Tertiary — supports main content rather than leading it.
Viewport rules	Should not appear directly after Hero, Takeover, or Brand-Focus Banner.
Usage in CLPs	Can be used after the first content section to reinforce additional benefits or site features.
Usage in PDPs	Only when promotion or service directly supports the SKU context (e.g., mobile network offer on SIM PDP).

Separate text elements up to 45 characters.

Rule	Guidance
Page Types	Homepage & CLPs (first release) — future extension possible.
Positioning	Always placed directly beneath the hero element (Goldspot or Takeover).
Card limit	Supports up to 4 offer cards on desktop. Mobile stacks the cards vertically.
Hierarchy	Positioned above secondary commercial components (e.g., Superdrug’s Top Picks, M-size banners).
Do NOT place above	Goldspot Hero Banner, Takeover Banner, Brand-Focus Banner.

1. Title:

   Separate text elements up to 55 characters.

2. Description:

   Separate text elements up to 60 characters.

This component:

• Removes auto-rotation → reduces distraction & cognitive load.
• Provides clear value propositions via icon + headline.
• Creates a lightweight informational layer without taking up vertical space.
• Increases discoverability without competing with hero-level components.

Rule	Guidance
Where	Homepage only (now removed from global site templates).
Positioning	Placed below the fold of the homepage ideally after the M-size Banners.
Hierarchy	Tertiary / informational element.
Never positioned above	Takeover / Goldspot / Page Hero.