Collection page

Overview:

The Main Product Grid section presents a collection's products in a configurable grid layout, allowing customers to explore products with optional filters, sort options, and dynamic layout behavior. It also includes settings to customize product card appearance, description display, and fallback visuals for empty collections.

Section Configuration:

Setting	Description
Heading Size	Sets the HTML heading level for the collection title. Affects visual size and semantic hierarchy.
Heading Weight	Determines the font weight of the collection title.
Description Text Size	Sets the font size for the collection description, if shown.
Description Text Weight	Sets the font weight for the collection description.

Product Card Settings

These settings control the display and content of individual product cards shown in the grid.

Setting	Description
Image Ratio	Defines the aspect ratio of product images (e.g., square, portrait, landscape, or adapt to original).
Card Heading Size	Controls the font size for the product name within each card.
Card Heading Weight	Sets the font weight of the product name.
Text Alignment	Aligns text content inside each product card (left, center, or right).
Enable Add to Cart Button	Displays the "Add to Cart" button on product cards.
Show Price	Displays product pricing beneath the product title.
Show Vendor	Displays the product vendor name.
Show Swatches	Displays color swatches if product variants are available.
Show Stock Status	Shows stock availability tags such as "In Stock" or "Sold Out."
Show Sale Tag	Displays a sale badge when applicable.
Show Custom Tag	Displays a custom label or tag if defined on the product.
Show Features List	Optionally displays a list of product features pulled from metafields.
Show Custom Highlights	Displays product highlights pulled from metafields.

Grid Settings

Setting	Description
Desktop Columns	Defines the number of product columns on desktop screens (2–4).
Desktop Rows	Controls how many rows of products are shown per page.
Mobile Columns	Sets how many product columns are shown on mobile (1 or 2).

Setting	Description
Show Breadcrumbs	Displays a breadcrumb navigation element at the top of the section.

Empty Collection State

These settings control what is displayed when the collection has no products.

Setting	Description
Desktop Banner Image	Image displayed as the background for empty collections on desktop.
Mobile Banner Image	Mobile-optimized background image for empty collections.
Heading	Custom heading text displayed when the collection is empty.
Subheading	Custom subheading text displayed beneath the empty heading.
Button Label	Text for the button shown in the empty state that links back to the collections page.

Height Settings

Setting	Description
Desktop Height	Sets the vertical height of the section background on desktop.
Mobile Height	Sets the vertical height of the section background on mobile.

Layout Settings

Setting	Description
Gap Between Products	Controls spacing between product grid items.
Collection Description Position	Defines where to show the collection description: at the top, bottom, or not at all.
Enable Filters	Displays a filter button and modal to refine product listings based on tags, price, or custom filters.
Enable Sorting	Adds a dropdown to sort products by available options such as "Best selling" or "Price: Low to High."
Pagination Type	Determines how more products are loaded: standard pagination, "Load More" button, or infinite scroll.
Collection Card Index	Displays a featured collection collage card at a specified position in the product grid. Enter 0 to disable.
Enable Custom Tags on Collection Card	Displays custom metafield tags on the collection collage card.

Container & Style Settings

Setting	Description
Container Width	Sets the section layout width: container (boxed) or container-fluid (edge-to-edge).
Container Padding	Toggles padding within the container.
Text Alignment – Desktop	Aligns the section’s text content on desktop.
Text Alignment – Mobile	Aligns the section’s text content on mobile.
Filter Color Scheme	Defines the visual color scheme used within the filter modal.
Section Color Scheme	Sets the overall color theme for the section (background, text, links).

Padding Settings

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