Collection listing

Overview:

The Main Collections section showcases a group of collections in a structured layout. It supports various display modes (grid or collage), customizable card styles, heading and description formatting, and pagination. This section is ideal for store owners looking to highlight multiple collections on a landing or catalog page.

Section Configuration:

Setting	Description
Heading	Sets the main title displayed at the top of the section.
Heading Size	Defines the HTML heading tag (H1–H6), affecting both size and SEO hierarchy.
Heading Weight	Controls the font weight of the heading.
Description	Optional rich text content displayed below the heading.
Description Size	Sets the font size of the description text.
Description Weight	Sets the font weight of the description.
Show Border Below Heading	Displays a border under the section heading and description.

Setting	Description
Show Breadcrumb	Displays breadcrumb navigation above the section, helping users understand their location within the site hierarchy.

Card Appearance (Collection Items)

Setting	Description
Image Ratio	Sets the image aspect ratio for collection cards (adapt, square, portrait, or landscape).
Card Heading Size	Adjusts the font size of the collection title within each card. Only visible in grid view.
Card Heading Weight	Controls the font weight of the collection title.
Card Text Alignment	Aligns text content inside each card (left, center, or right). Only visible in grid view.
Show Custom Tags	Displays custom tags or labels on each card, if available via metafields or tags.

Layout Options

Setting	Description
View As	Chooses the layout style: grid (uniform cards) or collage (staggered layout).
Sort By	Sorts collections by alphabetical order, published date, or number of products. Options include ascending or descending variations.

Container & Width Settings

Setting	Description
Container Width	Determines the section’s layout width: boxed (container) or full width (container-fluid).
Enable Padding	Toggles horizontal padding inside the container.
Text Alignment (Desktop)	Controls the text alignment for desktop screens.
Text Alignment (Mobile)	Controls the text alignment for mobile devices.
Color Scheme	Applies a predefined theme color palette to the section’s background and text.

Grid Settings

Only applies when layout view is set to "Grid".

Setting	Description
Desktop Columns	Sets the number of columns displayed on desktop (2–5).
Mobile Columns	Sets the number of columns displayed on mobile (1 or 2).
Gap Between Cards	Controls the spacing between collection cards.

Padding Settings

Setting	Description
Top Padding	Adds vertical space above the section.
Bottom Padding	Adds vertical space below the section.