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.
Banner — Subsection of 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.
Banner — Options Overview
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