Featured collections

​

What this section controls

• Multiple collection cards with custom images and headings
• Two layout options for heading and button positioning
• Normal or compact card styling
• Individual color schemes per collection
• Section-level button for viewing all collections

​

How the Featured collections section works

​

Getting started

​

Section settings

• Layout & Content
• Collection Cards
• Styling

​

Layout

Controls the positioning of the section heading and button.

Layout 1

Heading aligned to the start (left), button aligned to the end (right).When to use:

• Standard collection sections
• When button is secondary to heading
• Horizontal balance in content layout

Layout 2

Heading and button both centered, with button displayed at the section bottom.When to use:

• Centered page designs
• Promotional collection showcases
• Creating visual symmetry

​

Heading

Main section heading text supporting rich text formatting (bold, italic, links).Default: “Heading for Featured Collections”

​

Heading size

Controls the visual size of the heading.Available options: XS, S, M, L, XL (default)

​

Button settings

Button label

Text displayed on the section button. Default is “Explore all”.

Leave empty to hide the button if not needed.

Button link

Destination URL when the button is clicked. Default is “/collections” (all collections page).

Button style

Visual styling of the button.Available options:

• Filled - Solid background (default, highest emphasis)
• Outlined - Border with transparent background
• Text link - Minimal styling, text only

​

Card style

Controls the visual density and presentation of collection cards.

Normal

Standard card presentation with full spacing and padding.When to use:

• When emphasizing collection images
• For larger, more prominent displays
• When you have high-quality collection imagery

Compact

Reduced spacing and tighter layout (default).When to use:

• Displaying many collections in limited space
• Cleaner, more minimal designs
• When collection names are more important than images

​

Section width

Controls the maximum width of the section container.

Page width

Content limited to theme’s page width (default).When to use: Standard sections that align with other page content.

Full width

Content extends to full browser width.When to use: Edge-to-edge designs, maximizing collection visibility.

​

Color scheme

Select the background and text color scheme for the entire section.

​

Spacing

Control vertical spacing around the section:

• Spacing top - Margin above the section (None, S, M, L, XL)
• Spacing bottom - Margin below the section (None, S, M, L, XL)

Both default to M (medium spacing).

​

Section border

Add decorative borders to the section.Available options:

• None - No borders (default)
• Top - Border on top edge only
• Bottom - Border on bottom edge only
• Both - Borders on top and bottom edges

​

Block settings

• Collection
• Content
• Styling

​

Collection selection

Select a Shopify collection to display.

Collection behavior

The selected collection determines:

• Default collection image (if custom image not set)
• Collection link destination
• Default heading (if custom heading not provided)
• Product count and availability

Collections update automatically when products are added or removed.

​

Custom image

Upload a custom image to override the collection’s default image.

When to use custom images

Use custom images when:

• Collection default image doesn’t match your design
• Creating seasonal or promotional variants
• Maintaining visual consistency across all cards
• Collection has no default image set

Image recommendations:

• High resolution (at least 800px width)
• Consistent aspect ratios across all collection cards
• Clear focal points that work at different sizes
• Optimized file sizes for web performance

​

Heading (Title)

Custom heading text for this collection card.

Heading behavior

If no custom heading is provided, the collection name will be used automatically.When to customize:

• Create marketing-friendly names (“Shop Summer Styles” vs. “summer-2024”)
• Add promotional context or urgency
• Maintain consistent heading style
• Include specific calls-to-action

When to leave empty:

• Collection name is already clear and customer-friendly
• Reducing manual maintenance
• Letting collection metadata control display

​

Heading size

Controls the visual size of the collection heading.Available options: XS, S, M, L (default), XLTypically use L or M for consistency across all collection cards.

Use the same heading size across all collection slides for visual harmony.

​

Color scheme

Select an individual color scheme for this specific collection card.

Individual color schemes

Each collection card can have its own color scheme, independent from the section’s overall color scheme.When to use different colors:

• Seasonal collection differentiation
• Brand-specific collections (multi-brand stores)
• Creating visual hierarchy or emphasis
• Thematic categorization (e.g., warm colors for summer, cool for winter)

When to use uniform colors:

• Maintaining clean, consistent design
• Professional, minimalist aesthetics
• When collection images provide enough visual variety

​

Best practices

​

Common use cases

​

Related sections