Collection listing
Overview:
The Main Collections section is used to visually display all collections in a grid format. Each collection is represented by a customizable card that can include the collection image, title, product count, custom tags, and interactive animations
Section Configuration:
Banner Settings
These settings control the header area above the collections grid.
Setting |
Description |
|---|---|
| Image | Upload a background image for the banner area. |
| Parallax Effect | Adds a parallax scroll effect to the background image. |
| Overlay Background | Applies a gradient or solid overlay on top of the image. |
| Caption | Optional text displayed above the heading. |
| Caption Size / Weight | Controls the font size and weight of the caption. |
| Heading | Main heading text displayed above the grid. |
| Heading Size / Weight | Controls font size and weight of the heading. |
| Description | Optional text shown below the heading. |
| Description Text Size / Weight | Controls font size and weight of the description. |
| Container Layout | Sets the layout width of the banner. Options: Page Width, Contained Content, Full Width. |
| Corner Radius | Rounds the corners of the banner area. |
| Max Content Width | Limits the width of the text content relative to page width. |
| Section Height | Sets the height of the banner. Options: Small, Medium, Full Viewport Height. |
| Content Alignment | Vertically aligns banner content to Top, Middle, or Bottom. |
| Color Scheme | Applies a color scheme to the banner area. |
Breadcrumb Settings
Setting |
Description |
|---|---|
| Show Breadcrumb | Displays a breadcrumb navigation bar above the section. |
| Show Top Border | Adds a border to the top of the breadcrumb. |
| Show Bottom Border | Adds a border to the bottom of the breadcrumb. |
| Corner Radius | Rounds the corners of the breadcrumb section. |
| Container Layout | Sets layout width of the breadcrumb section. |
| Color Scheme | Applies a background and text color scheme to the breadcrumb. |
Grid Layout
Setting |
Description |
|---|---|
| Sort By | Sorts collections by: – Alphabetical – Alphabetical (Reversed) – Date (Newest First) – Date (Oldest First) – Product Count (High to Low / Low to High) |
| Desktop Columns | Sets how many columns of collection cards to show on desktop (2–5). |
| Mobile Columns | Sets number of columns shown on mobile (1 or 2). |
Collection Card Settings
These options affect the appearance and content of individual collection cards.
Setting |
Description |
|---|---|
| Heading Size / Weight | Controls the font size and weight of the collection title. |
| Media Size | Controls the shape of the collection image. Options: Adapt, Square, Portrait, Landscape. |
| Show Tags | Displays custom metafield tags on collection cards if available. |
| Show Title | Displays the collection title. |
| Show Product Counts | Displays how many products are in each collection. |
| Show Animation on Hover | Enables animation effects when hovering over a collection card. |
| Show Animation Bar | Displays a loading-style animation bar at the bottom of the collection card. |
Grid Appearance and Layout
These settings apply to the main collection grid area (below the banner).
Setting |
Description |
|---|---|
| Container Layout | Sets the layout width of the grid area. Options: Page Width, Contained Content, Full Width. |
| Corner Radius | Rounds the corners of the section background. |
| Text Alignment | Controls text alignment for section content (Left, Center, Right). |
| Color Scheme | Applies a theme color scheme to the grid background and text. |
| Top / Bottom Padding | Adds spacing above and below the collection grid. |