Collection page
Main Products Grid
Overview
The collection products page template. Displays products in a configurable grid with sort, filter, and pagination controls. A Featured Collection block (up to 4) can be added to highlight specific collections inline within the grid. Section settings cover featured collection label typography, product card appearance, grid layout, and standard layout controls. No section-level header.
Featured Collection Settings
Typography applied to featured collection labels displayed within the grid.
| Setting |
Description |
| Text Size |
Large, Medium, or Small. Default: Small. |
| Text Weight |
Thin (100) to Black (900). Default: Normal (400). |
| Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: None. |
| Text Font Family |
Default or Heading font. |
| Text Color Style |
Default or Heading color preset. |
Card Settings
Image
| Setting |
Description |
| Media Ratio |
Card image aspect ratio: Adapt, Square, Portrait, or Fit to Box. Default: Adapt. |
| Desktop Height |
Fixed card height on desktop. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box. |
| Mobile Height |
Fixed card height on mobile. Range: 100–400 px, default 265 px. Visible only when Media Ratio is Fit to Box. |
| Show Second Image on Hover |
Swaps to the product's second image on hover. Enabled by default. |
Product Title
| Setting |
Description |
| Heading Size |
H4–H6 or Large, Medium, Small. Default: H5. |
| Heading Weight |
Thin (100) to Black (900). Default: Bold (700). |
| Heading Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. |
| Heading Tag |
Semantic HTML heading level (H1–H6). Default: H2. |
| Heading Font Family |
Default or Body font. |
| Heading Color Style |
Default or Body color preset. |
Price
| Setting |
Description |
| Show Price |
Displays the product price. Enabled by default. |
| Text Size |
Large, Medium, or Small. Default: Medium. Visible when price is shown. |
| Text Weight |
Thin (100) to Black (900). Default: Normal (400). Visible when price is shown. |
| Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. Visible when price is shown. |
| Text Font Family |
Default or Heading font. Visible when price is shown. |
| Text Color Style |
Default, Heading, or Body color preset. Visible when price is shown. |
Unit Price
| Setting |
Description |
| Show Unit Price |
Displays the unit price. Enabled by default. |
| Text Size |
Large, Medium, or Small. Default: Small. Visible when unit price is shown. |
| Text Weight |
Thin (100) to Black (900). Default: Normal (400). Visible when unit price is shown. |
| Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. Visible when unit price is shown. |
| Text Font Family |
Default or Heading font. Visible when unit price is shown. |
| Text Color Style |
Heading or Body color preset. Default: Body. Visible when unit price is shown. |
Vendor
| Setting |
Description |
| Show Vendor |
Displays the product vendor. Enabled by default. |
| Text Size |
Large, Medium, or Small. Default: Small. Visible when vendor is shown. |
| Text Weight |
Thin (100) to Black (900). Default: Normal (400). Visible when vendor is shown. |
| Text Case |
None, Uppercase, Capitalize, or Lowercase. Default: Capitalize. Visible when vendor is shown. |
| Text Font Family |
Default or Heading font. Visible when vendor is shown. |
| Text Color Style |
Heading or Body color preset. Default: Body. Visible when vendor is shown. |
| Setting |
Description |
| Show Tags |
Displays product tag badges. Enabled by default. |
| Show Custom Tag |
Displays custom product tags. Enabled by default. Visible when tags are shown. |
| Show Sale Tag |
Displays the sale badge. Enabled by default. Visible when tags are shown. |
| Show Stock Tag |
Displays the stock status badge. Enabled by default. Visible when tags are shown. |
| Tag Position |
Placement of badges on the card: Top Left, Top Right, or Bottom. Default: Bottom. Visible when tags are shown. |
Add to Cart
| Setting |
Description |
| Enable Add to Cart |
Shows an add-to-cart button on the card. Enabled by default. |
| Button Type |
Primary, Secondary, Styled, or Link (underlined). Default: Styled. Visible when ATC is enabled. |
| Button Case |
None, Uppercase, Capitalize, or Lowercase. Default: Uppercase. Visible when ATC is enabled. |
Swatches
| Setting |
Description |
| Show Swatches |
Displays variant color swatches on the card. Enabled by default. |
| Swatches Position |
First or Last in the card info stack. Default: Last. Visible when swatches are shown. |
| Swatches Style |
Square or Circle. Default: Circle. Visible when swatches are shown and theme variant layout is active. |
Card Alignment
| Setting |
Description |
| Desktop Text Alignment |
Content alignment on desktop. Default: Center. |
| Mobile Text Alignment |
Content alignment on mobile. Default: Center. |
Grid Settings
| Setting |
Description |
| Desktop Columns |
Number of columns on desktop. Range: 2–4, default 3. |
| Desktop Rows |
Number of rows per page on desktop. Range: 2–6, default 3. |
| Mobile Columns |
Number of columns on mobile: 1 or 2. Default: 2. |
| Desktop Grid Spacing |
Gap between cards on desktop. Range: 0–100 px, default 10 px. |
| Mobile Grid Spacing |
Gap between cards on mobile. Range: 0–100 px, default 10 px. |
Layout Settings
| Setting |
Description |
| Container Layout |
Page Width, Contained Content, or Container Fluid. Default: Contained Content. |
| Border Style |
None, Top, Bottom, or Top & Bottom. Default: Top & Bottom. Visible when container is not Page Width. |
| Container Size |
Max container width as a percentage of page width. Range: 50–100%, default 100%. |
| Desktop Text Alignment |
Section-level content alignment on desktop. Default: Left. |
| Mobile Text Alignment |
Section-level content alignment on mobile. Default: Left. |
| Color Scheme |
Shopify color scheme applied to the section. Default: Scheme 1. |
| Filter Color Scheme |
Shopify color scheme applied to the filter panel. Default: Scheme 1. |
| Show Product Counts |
Displays the result count alongside filter options. Enabled by default. |
| Enable Sort |
Displays the sort dropdown. Enabled by default. |
| Enable Filters |
Displays Shopify storefront filters. Enabled by default. |
| Pagination |
Result paging style: Pagination, Click to Load, or Load More. Default: Pagination. |
Inner Spacing
| Setting |
Description |
| Desktop Top Padding |
Default 60 px. |
| Desktop Bottom Padding |
Default 60 px. |
| Desktop Left Padding |
Default 75 px. |
| Desktop Right Padding |
Default 75 px. |
| Mobile Top Padding |
Default 35 px. |
| Mobile Bottom Padding |
Default 35 px. |
| Mobile Left Padding |
Default 15 px. |
| Mobile Right Padding |
Default 15 px. |
Outer Spacing
| Setting |
Description |
| Desktop Top Spacing |
Default 0 px. |
| Desktop Bottom Spacing |
Default 0 px. |
| Desktop Left Spacing |
Default 0 px. |
| Desktop Right Spacing |
Default 0 px. |
| Mobile Top Spacing |
Default 0 px. |
| Mobile Bottom Spacing |
Default 0 px. |
| Mobile Left Spacing |
Default 0 px. |
| Mobile Right Spacing |
Default 0 px. |
Blocks
Featured Collection (limit 4)
Highlights a specific collection inline within the product grid.
| Setting |
Description |
| Collection |
The collection to feature. |
| Featured Image |
Custom image displayed for the featured collection card. |
| Headline |
Custom title displayed on the featured collection card. |