Collection Banner

The collection banner is the header section that greets your visitors at the top of each collection page. It displays the collection title, an optional description, and can include a background image for visual impact. Scale Theme offers 4 banner variants, each with a distinct visual identity.

The 4 Variants

Hero

The most immersive variant. The background image fills the entire banner area, with a gradient overlay to ensure readability of the overlaid text.

The overlay is a vertical gradient: more opaque at the bottom (for the text) and lighter at the top (to preserve image visibility). The intensity is adjustable.

When to use: For flagship collections, landing pages, and seasonal collections where a strong image tells a story. This is the variant with the greatest visual impact.

Split

The screen is divided in two: text on one side, image on the other. On mobile, the image moves above the text.

The Split variant includes a clip-path effect on the image:

• On desktop: a vertical diagonal cut on the left side of the image
• On mobile: a diagonal cut at the bottom of the image

A subtle zoom effect activates on image hover.

When to use: When you have a longer collection description to display, or when you want a balance between text and visuals.

Minimal

The most stripped-down variant. No image, just the title with an animated accent line beneath it, followed by the description and product counter.

Unique characteristics of the Minimal variant:

• Animated line: A colored bar (accent color) appears under the title with a horizontal scale animation
• Inline meta: The description and product counter are displayed on the same line, separated by a dot
• Respectful animation: The animation is disabled if prefers-reduced-motion is active

When to use: For stores with a clean design, or when you don't have collection images. This is the default variant.

Overlapping

The title partially overlaps the image below, creating a dynamic and modern overlapping effect.

Unique characteristics of the Overlapping variant:

• XXL title: Adjustable font size from 2rem to 4rem (responsive via clamp), weight 800
• Overlap: The image moves up by -1.5rem (mobile) to -2.5rem (desktop) to create the effect
• Hover zoom: A slight zoom (1.03x) activates on image hover

When to use: For an editorial and modern look. The overlap creates a strong visual hierarchy between the collection name and its image.

Image Configuration

Image Sources

The banner image can come from 3 sources, in order of priority:

Desktop vs Mobile Image

You can set a different image for desktop and mobile. This is strongly recommended because:

• Desktop images are in landscape format (wide)
• Mobile screens are in portrait format (narrow)
• Automatic cropping can cut off important elements

Recommended Image Sizes

Text and Content

Title

The collection title is automatically pulled from Shopify. It is displayed as an <h1> tag with a visually-hidden "Collection:" prefix for accessibility.

Title styling varies by variant:

Description

The collection description (defined in Shopify Admin) is rendered as rich HTML (.rte tag) which supports bold, italic, links, and more.

The description is styled in secondary gray with a font size of 1.1rem and a line height of 1.6 for optimal readability.

Product Counter

Displays the total number of products in the collection. The number is highlighted with the accent color and bold weight.

Overlay (Hero Variant)

The overlay is a semi-transparent veil displayed over the background image in the Hero variant. It ensures text readability on any image.

The overlay is a vertical gradient, not a solid color:

• At the bottom: opacity at the configured value (for the text)
• At the top: opacity at 60% of the configured value (to see the image)

Text Alignment

The alignment affects the title, description, product counter, and accent line (Minimal variant).

Per-Collection Customization

The collection banner is a single section shared by all collections. However, you can customize the appearance for each collection individually:

Image Per Collection

1. In Shopify Admin > Products > Collections, add an image to each collection
2. In the banner settings, enable "Show collection image"
3. Each collection will display its own image

Global Custom Image vs Per-Collection

Description Per Collection

The description is always specific to each collection (defined in Shopify Admin). No additional configuration is needed. Simply make sure "Show description" is enabled in the section settings.

Animations

The collection banner supports Scale Theme's animation system. Animations vary by variant:

The Minimal variant has a special animation: the accent line below the title is animated via an IntersectionObserver. It appears with a progressive horizontal scale when it enters the viewport.

Decorations and Effects

Parallax (Hero Variant)

If the theme's parallax system is enabled, the Hero variant's background image can have a subtle parallax effect on scroll.

Media Decoration (Split and Overlapping Variants)

The Split and Overlapping variants support the theme's media decorations (decorative shapes around the image).

CSS Clip-Path (Split Variant)

The Split variant includes a clip-path effect on the collection image:

• Desktop: Vertical cut on the left side of the image, creating a diagonal edge
• Mobile: Diagonal cut at the bottom of the image, creating a smooth transition to the text

Image Hover Effect

The Split and Overlapping variants include a slight zoom (1.03x) on image hover. This effect is disabled if prefers-reduced-motion is active.

Global Settings

Blocks

The collection banner supports the following blocks:

Configuration Examples

Premium Fashion Collection

• Variant: Hero
• Image: Lifestyle photo of the collection
• Overlay: 45%
• Alignment: Center
• Description: Enabled
• Counter: No

Technical Catalog

• Variant: Minimal
• Image: None
• Alignment: Left
• Description: Enabled
• Counter: Enabled

Seasonal Collection

• Variant: Split
• Image: Seasonal product photo
• Alignment: Left
• Description: Enabled (promotional text)
• Counter: Enabled

Editorial Collection

• Variant: Overlapping
• Image: Artistic collection image
• Alignment: Left
• Description: Enabled (short)
• Counter: No

Best Practices

1. Choose the variant based on your content: Hero if you have great images, Minimal if you don't, Split for storytelling, Overlapping for an editorial look.
2. Prepare mobile images: For Hero and Split, always upload a dedicated portrait-format mobile image.
3. Keep descriptions short: 2 lines maximum in the banner. Long content pushes the product grid down.
4. Use the counter wisely: The counter is useful for large collections (100+ products) where it helps convey the breadth of the catalog. For small collections, it's unnecessary.
5. Test the overlay: Start at 50% and adjust. Every image reacts differently to the overlay.
6. Stay consistent across collections: Use the same variant for all your collections to create a cohesive experience. The content (image, description) will differ, but the framework stays the same.