Collection Page
Product Grid
Displays products in a structured grid layout on the collection page.
This section allows you to control how products are presented, including layout, card styles, filtering, and sorting options.
You can fully customize the number of products, column structure, and visual behavior to match your store design and improve the browsing experience.
Settings
Layout
| Setting | Type | Description |
|---|---|---|
| Products per page | range | Controls how many products are displayed per page. |
| Number of columns on desktop | range | Sets how many product cards appear per row on desktop. |
| Color scheme | select | Applies a predefined color theme to product cards. |
Product Card
| Setting | Type | Description |
|---|---|---|
| Card Style | select | Choose between default or larger product card layout. |
| Enable box shadow for product cards | checkbox | Adds a shadow around product cards for depth. |
| Sale Card Hover Effect | select | Applies hover effects to highlight sale products. |
| Image ratio | select | Controls the aspect ratio of product images. |
| Image shape | select | Defines the shape of the product image. |
| Show second image on hover | checkbox | Displays an alternate product image on hover. |
| Show vendor | checkbox | Displays the product vendor name. |
| Show product rating | checkbox | Shows product ratings (requires a rating app). |
| Enable quick add button | checkbox | Allows customers to quickly add products to cart. |
Filtering and Sorting
| Setting | Type | Description |
|---|---|---|
| Enable filtering | checkbox | Enables product filtering using the Search & Discovery app. |
| Desktop filter layout | select | Sets filter layout (horizontal, vertical, or drawer). |
| Enable sorting | checkbox | Allows users to sort products (e.g. by price or name). |
Mobile Layout
| Setting | Type | Description |
|---|---|---|
| Number of columns on mobile | select | Controls how many products appear per row on mobile. |
Section Spacing
| Setting | Type | Description |
|---|---|---|
| Top padding | range | Adjusts space above the product grid. |
| Bottom padding | range | Adjusts space below the product grid. |
Theme Settings
| Setting | Type | Description |
|---|---|---|
| Swatch Shape | select | Choose the shape of color swatches (circle or square). |
| Enable Product Card Swatches | checkbox | Displays color swatches on product cards. May impact performance slightly. |
| Variant Option Name | text | Define which variant option is used for swatches (e.g. Color). |
| Lazy Load Variant Images | checkbox | Loads variant images only when needed to improve performance. |
| Default Variant Swatch Map Metaobject | text | Specifies the default metaobject used for swatch data mapping. |
| Color scheme | select | Applies a predefined color theme to product cards. |
| Style | select | Choose between standard or card-style layout. |
| Position on cards | select | Sets where swatches appear on product cards. |
| Show currency codes | checkbox | Displays currency codes alongside prices. |
| Sold out badge color scheme | select | Defines the color style for the sold-out badge. |
| Corner radius | range | Adjusts the roundness of product card corners. |
Additional
| Setting | Type | Description |
|---|---|---|
| Custom CSS | code | Add custom styles for advanced customization. |
Notes
- Filtering works with the Shopify Search & Discovery app.
- Product ratings require a compatible review app.
- Layout automatically adapts for mobile devices.
Product Grid Layout
-
Products per page
Choose how many products are displayed on each collection page.
-
Number of columns on desktop
Set how many product cards appear in each row on desktop screens.
-
Color scheme
Apply a predefined color scheme to the product grid area.
Product Card
-
Card Style
Choose between the default product card style or a larger card layout.
-
Enable box shadow for product cards
Add a shadow effect around product cards to create more visual depth.
-
Sale Card Hover Effect
Choose a hover effect for sale product cards, or select “None” to disable it.
-
Image ratio
Set the image aspect ratio used inside product cards.
-
Image shape
Choose the shape style for product images.
-
Show second image on hover
Show an alternate product image when customers hover over a product card.
-
Show vendor
Display the product vendor name on product cards.
-
Show product rating
Show product ratings when a compatible rating app is installed.
-
Enable quick add button
Add a quick add button to let customers add products to the cart directly from the collection page.
Filtering and Sorting
-
Enable filtering
Enable product filtering using the Shopify Search & Discovery app.
- Desktop filter layout Choose how filters are displayed on desktop:
- Horizontal: Filters appear at the top
- Vertical: Filters appear in a left sidebar
-
Drawer: Filters open in a slide-out panel
(Mobile always uses drawer layout)
-
Enable sorting
Allow customers to sort products (e.g. by price, name, or newest).
Mobile Layout
-
Number of columns on mobile
Choose how many product cards appear per row on mobile devices.
Section Spacing
-
Top padding
Adjust the space above the product grid.
-
Bottom padding
Adjust the space below the product grid.
