Collage

The Collage section displays a flexible grid of promotional blocks that can include banners, products, or collections.

It allows you to build visually engaging layouts that combine imagery, text, and links in a customizable composition. This section is ideal for presenting marketing messages, featured categories, or curated product groups.

The Collage section can include the following sub-sections:

  • Banners — add images or videos with text and buttons.

  • Products — display selected products in a slider layout.

  • Collections — showcase product collections with optional titles and counts.

Location: Sections -> Templates -> Banners → Collage


Collage — Options Overview

Option / Setting

Description

Heading

Main section title displayed above the collage layout.

Subheading

Optional smaller text placed near the heading for additional context.

Description

Paragraph text explaining or describing the collage content.

Heading alignment

Aligns heading and description text: Left or Center.

Layout

Controls overall layout spacing and structure.

Top spacing

Adds top padding to the section: None, Small, Medium, Normal.

Width

Defines section width: Default, Boxed, or Wide (for screens ≥1440px).

Swap the main image

Reverses the layout order of the main image and content.

Image hover effect

Sets an animation for images when hovered: Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine.

Dividing line

Adds a line separator between collage blocks for clear visual division.

Show

Enables or disables the dividing line.

Background

Sets the type of section background: Hide, Color, Gradient, or Image.

Colors

Defines the color scheme for the collage section.

Base

Sets the main background or base color.

Accent

Accent color used for headings or emphasized details.

Lines

Defines the color of divider lines in the collage.

The Banner block displays individual promotional images or videos inside the collage. Each banner can include text, buttons, and background effects, making it perfect for advertising or linking to specific collections or pages.


Option / Setting

Description

Type

Selects the media type: Image or Video.

Image

Upload the main banner image.

Image ratio

Defines image proportions: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).

Image ratio mobile

Adjusts image ratio for mobile devices.

Image overlay opacity

Controls transparency of the color overlay on the image.

Image overlay fill

Selects the color of the overlay placed over the media.

Content

Area for adding text and call-to-action button.

Link

Assigns a clickable link for the banner.

Heading

Banner title text.

Description

Supporting paragraph text.

Button

Adds a button for call-to-action links.

Settings

General text and button display settings.

Heading size / tablet / mobile

Adjust heading size across different devices.

Underline on hover

Adds underline animation to text when hovered.

Text position

Sets the text block position: Top left, Top, Top right, Center left, Center, Center right, Bottom left, Bottom, Bottom right.

Text position mobile

Controls text placement on mobile view.

Text align

Aligns text within its container: Left or Center.

Description width / tablet / mobile

Sets maximum width for the description across devices.

Show text box

Displays a styled background box behind the text for better readability.

Colors

Controls colors for text and button states.

Heading / hover

Sets color for heading and hover effect.

Description / hover

Sets color for description text and hover state.

Button

Customizes button colors.

Show background

Enables colored background behind text or button.

Background / gradient / border / text

Adjusts background, gradient, border, and text colors.

Show background on hover

Toggles hover background display.

Background hover / gradient hover / border hover / text hover

Sets hover state colors.

Enable shadow

Adds shadow effect around the banner or text area.

Shadow / hover

Adjusts shadow intensity for normal and hover states.

Box background / hover

Defines background colors for text box area.

Media button

Styles the play or navigation button on video or slider banners.

Video button / slider buttons — Icon / Background / Hover / Icon hover

Customizes icon and background colors for media controls.

Image overlay color

Defines overlay color applied over image or video media.

Products — Subsection of Collage

The Products block displays selected items or a collection of products in a slider layout within the collage. This block supports hover effects, badges, pricing, and “Add to cart” functionality.


Products — Options Overview

Option / Setting

Description

Collection

Choose a collection whose products will be shown in the block.

Slider settings

Configure desktop and mobile navigation for the product slider.

Desktop navigation

Options: Disable, Dots, Arrows, Dots and arrows.

Mobile navigation

Options: Disable, Dots.

Enable autoplay

Automatically slides products after a set interval.

Change slides every

Determines interval between slides (not active in editor preview).

Products

Select specific products to display manually.

Image ratio

Defines product image proportions using same ratios as banners.

Image action

Choose image behavior: Only image, Show second image on hover, Gallery.

Text align

Aligns text content: Left or Center.

Underline on hover

Adds underline animation on product title hover.

Show badge "Sale" / "Sold Out" / "Feature"

Displays badges indicating product status.

Show "Countdown"

Shows countdown timer (uses metafield data).

Show vendor / type / price / small description

Toggles visibility of product metadata and short description.

Truncate product name

Shortens long product names automatically.

Button "Add to cart"

Choose how to display the Add to Cart button: Hide, Show, Text only, Icon only.

Enable review stars

Displays product rating stars below title or price.

Colors

Full control over product card color scheme.

Vendor, type / hover

Colors for vendor or type text and hover state.

Product name / hover

Colors for product title and hover state.

Regular / Sale / Old price

Defines colors for different price states.

Description

Sets color for short description text.

Badges (Sale / Featured / Sold Out)

Configure colors for each badge type and its text.

Countdown background / text

Colors for countdown timer elements.

Interface buttons (Wishlist / Compare / Quickview / Slider)

Colors and hover states for action icons.

External interface buttons

Styles for buttons displayed outside the image area.

Variants buttons

Controls border, background, and text colors of product variant selectors.

Hover and sold out states

Customize hover colors and out-of-stock appearance.

Input fields

Set background, border, and text colors for quantity inputs.

Add to cart button

Customize colors, borders, and icons for Add to Cart button.

Enable shadow / Shadow / Shadow hover

Adds depth effect to buttons.

Media button (slider arrows / dots)

Customize color and shape of slider navigation.

Review stars (active / base)

Colors for rating stars in active and inactive states.

Collections — Subsection of Collage

The Collections block shows featured collections inside the collage layout. You can display collection images, names, and product counts, styled consistently with other elements.


Collections — Options Overview

Option / Setting

Description

Collections

Select which collections to show in the collage.

Slider settings

Configure desktop and mobile navigation for collection slider.

Desktop navigation

Choose from Disable, Dots, Arrows, or Dots and arrows.

Mobile navigation

Choose between Disable and Dots.

Enable autoplay

Automatically changes collection slides after set interval.

Change slides every

Time interval for slide changes (inactive in editor preview).

Image ratio

Select image proportions: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).

Text align

Aligns collection name and description: Left or Center.

Heading size

Sets heading text size: Normal or Small.

Underline on hover

Adds underline hover effect to text.

Show products count

Displays total number of products in each collection.

Colors — Heading / link hover / Description

Defines color styling for headings, links, and descriptions.

Media button / Slider arrows / Slider dots

Styles navigation elements used in the slider.

Last updated