Skip to main content

What this section does

The Promotional Collections section (internally called featured-collections-links) creates a versatile multi-collection showcase with three distinct visual styles:
  • Links — Simple text-based collection links
  • Image tiles — Visual tiles using collection or custom images
  • Product tiles — Product-focused tiles overlaying featured product images
The section uses a split-screen layout with a promotional image and heading on one side, and collection links/tiles added via blocks on the other.
Promotional Collections Section

Getting started

1

Add the section

From the Theme Customizer, click Add section and select Promotional collections
2

Choose display style

Set the Types dropdown to Links, Lifestyle image tiles, or Product image tiles based on your desired visual impact
3

Add collection blocks

Add Collection link blocks (typically 4-6) for each collection you want to promote, configuring images and links as needed
4

Configure layout

Upload a main promotional image, set your heading/subheading, and adjust section height and spacing

Section settings

Dropdown (default: Links)Controls the visual style of collection presentation:
  • Links — Minimal text links with arrows, fast-loading and straightforward
  • Lifestyle image tiles — Visual tiles using collection featured images or custom block images
  • Product image tiles — Product-focused tiles overlaying images of 3 featured products
When to use each:
  • Links: Quick navigation without visual distraction
  • Image tiles: Balanced visuals for category exploration
  • Product tiles: Maximum product emphasis while promoting collections
Checkbox (default: unchecked)Reverses the layout to swap positions of main image and collection links:
  • Unchecked: Image on left, collection links on right
  • Checked: Collection links on left, image on right
Use when stacking multiple sections to create visual variety.
Text field (default: “Highlight multiple collection links”)Main heading that introduces the collection grouping (e.g., “Shop by Category”, “Explore Collections”).
Textarea (default: “Collections”)Supporting text below the heading that provides additional context.
Image picker — Upload or select a promotional image for the content side
  • Recommended size: 1440x1620px
  • Appears on one side of the split-screen layout
  • Should complement the collections being promoted
Image height - mobile — Range slider: 0-100% (default: 100%)
  • Controls the height of this image on mobile devices
  • 100% = image fills the full section height on mobile
Checkbox (default: checked)Adds a decorative border effect around the main section image.

Block types

Add Collection link blocks to promote individual collections. Each block creates one collection link or tile depending on the Types setting.
Collection picker — Select which Shopify collection this link representsThe collection provides:
  • Collection name (used as default link text)
  • Collection URL (used as default destination)
  • Collection featured image (used in Image tile and Product tile modes)
Dropdown (default: Main)Controls the text color for collection names/links:
  • Main — Primary text color from theme
  • Accent — Accent color from theme
This setting only applies to Lifestyle image tiles and Product image tiles modes. It has no effect when Types is set to Links.
Image picker (optional)Custom image for this collection tile.
  • Overwrites the collection’s featured image when provided
  • Only relevant for Lifestyle image tiles and Product image tiles modes
  • Has no effect in Links mode
Use custom images to:
  • Override collection images that don’t match your desired style
  • Ensure consistent image quality and dimensions across tiles
  • Create themed or seasonal variations
How to add collection blocks:
  1. In the Theme Customizer, click Add block
  2. Select Collection link
  3. Choose the collection and configure settings
  4. Repeat to add more collections (typically 4-6)
  5. Drag blocks to reorder collections

Best practices

Optimal collection count

Add 4-6 collection link blocks for balanced display. Too few looks sparse, too many overwhelms the layout and slows decision-making.

Choose the right type

Use Links for minimal distraction, Image tiles for balanced visual browsing, and Product tiles when products should be the hero.

Section height strategy

Keep default 55vw for most use cases. Use 40-50vw for compact sections, 60-80vw for dramatic, full-screen experiences.

Fullwidth for impact

Use Full width (default) for maximum visual drama. Only switch to Page width if matching other contained sections.

Product tile alignment

When using Product tiles, choose the 3 featured products carefully—they should represent or complement the collections being promoted.

Consistent tile images

For Image tiles mode, ensure all collection images (or custom block images) have consistent style, dimensions, and quality.

Create visual rhythm

Use the flip setting when stacking multiple sections to alternate layouts and create a flowing, magazine-style design.

Update seasonally

Refresh collection selections, images, and heading/subheading text seasonally to keep the section relevant and timely.

Common use cases

Category navigation hub — Create a visual directory of your main product categories (e.g., “Men”, “Women”, “Kids”, “Accessories”) Shop by style — Promote collections organized by aesthetic, occasion, or theme (e.g., “Casual”, “Formal”, “Outdoor”, “Travel”) Seasonal campaigns — Highlight seasonal collections with timely imagery (e.g., “Summer Essentials”, “Holiday Gifts”, “Back to School”) Brand collections — Showcase collections by brand or designer for multi-brand retailers Sale promotions — Feature sale or clearance collections alongside regular-priced categories

Layout behavior

Split-screen composition:
  • One side: Main promotional image with heading and subheading
  • Other side: Collection links/tiles (added via blocks)
  • Flip setting reverses which side is which
Desktop:
  • Links mode: Vertical list of text links with arrows
  • Image tiles: Grid of image tiles (2-3 columns based on count)
  • Product tiles: Grid of tiles overlaying product images
Mobile:
  • Stacks vertically: image at top, then collection links/tiles
  • Flip setting does not affect mobile layout
Tile behavior:
  • Image tiles: Each shows collection image (or custom block image) with text overlay
  • Product tiles: Each shows one of the 3 featured products with collection name overlay
  • Links: Simple text links, no images

Display type comparison

FeatureLinksImage TilesProduct Tiles
Visual impactMinimalMediumHigh
Page loadFastestMediumSlower
Best forQuick navigationCategory browsingProduct focus
Images usedNoneCollection/customFeatured products
Mobile friendlyExcellentGoodGood
Decision speedFastMediumSlower
  • Featured Collection — Promote a single collection with product grid and split-screen layout
  • Featured Products — Display curated products in slideshow or grid format
  • Hero — Full-width banner sections for dramatic promotional content