Collection Page

Overview

The Collection Grid section is a versatile and highly customizable component of the Label One theme that displays your products in a responsive grid layout. It includes features such as filtering, sorting, customizable spacing, and the ability to insert promotional images within the product grid.

Key Features

• Responsive grid layout with customizable columns
• Product filtering and sorting capabilities
• Customizable title and breadcrumb display
• Adjustable spacing between products
• Sticky positioning for filters
• Inner grid promotional images
• Pagination with "load more" functionality
• Compatible with product siblings/swatches feature

Settings Guide

Page Title Settings

Setting	Description	Options
Title size	Controls the size of the collection title	XS to 7XL (responsive options available)
Title alignment	Sets the horizontal alignment of the title	Left, Center, Right

Filter Settings

Setting	Description	Options
Show product filter	Toggles the display of product filtering options	On/Off
Show sort filter	Toggles the display of sorting options	On/Off
Enable sticky positioning	Makes filters stick to the top when scrolling	On/Off
Filter alignment	Sets the horizontal alignment of filters	Left, Center, Right
Filter Groups Default State	Controls how filter groups initially appear	First Group Open, All Groups Open, No Groups Open

Breadcrumb Settings

Setting	Description	Options
Breadcrumb text size	Controls the size of breadcrumb text	Do not display, XS, S, Base
Breadcrumb alignment	Sets the horizontal alignment of breadcrumbs	Left, Center, Right

Inner Grid Spacing

Setting	Description	Options
Horizontal spacing	Controls the horizontal gap between products	0-100px
Vertical spacing	Controls the vertical gap between product cards	0-100px

Layout Settings

Setting	Description	Options
Remove product info padding	Removes left/right padding from product information	On/Off
Horizontal spacing size	Adjusts the overall horizontal spacing	None, Small
Number of products per row	Sets the number of columns for desktop view	2-5
Number of columns on mobile	Sets the number of columns for mobile view	One column, Two columns
Products per page	Controls how many products display before pagination	4-48
Indent section	Adds indentation to the left and right edges	On/Off
Color scheme	Sets the color scheme for the collection	Theme color schemes

Section Padding

Setting	Description	Options
Top section padding	Controls the padding at the top of the section	0-100px
Bottom section padding	Controls the padding at the bottom of the section	0-100px

Blocks

Inner Grid Image

Insert promotional images between product rows in your collection.

Setting	Description
Image	The image to display
Link	Optional URL the image links to

Note: The first image appears after the 2nd row of products, and the second image (if added) appears after the 6th row.

Setup Instructions

Basic Setup

1. Navigate to your Shopify admin → Online Store → Themes
2. Click Customize on your current theme
3. Select a collection page
4. The Collection Grid section should be present by default

Customizing Your Collection Grid

Adjust Grid Layout:

• Set your desired number of columns (2-5 for desktop, 1-2 for mobile)
• Configure horizontal and vertical spacing between products
• Choose products per page (4-48)

Configure Filters:

• Enable/disable product filtering and sorting
• Set filter alignment and default state
• Toggle sticky positioning

Add Inner Grid Images:

1. Click "Add block"
2. Select "Inner Grid Image"
3. Upload an image and add an optional link
4. Add up to two promotional images

Product Siblings Integration

The Collection Grid works seamlessly with the Product Siblings feature, displaying color swatches on product cards when enabled:

1. Ensure Product Siblings is enabled in Theme Settings → Product siblings
2. Set up required metafields for your products (see Product Siblings documentation)
3. Color swatches will automatically appear on product cards in your collection

Best Practices

Responsive Design:

• Test your collection on mobile, tablet, and desktop
• Consider using fewer columns (3-4) for better readability

Product Images:

• Use consistent aspect ratios for product images
• The default aspect ratio is set in Theme Settings → Product cards

Spacing:

• Balance spacing for a clean look (10-20px recommended)
• Consider enabling borders in Theme Settings → Borders for visual separation

Inner Grid Images:

• Use images that match your collection's width
• Create images with aspect ratios that complement your products

Performance:

• Keep products per page reasonable (16-24 recommended)
• Use appropriately sized images to maintain fast loading times

Troubleshooting

• Filters not appearing: Verify that your collection has filterable tags or metafields
• Product swatches missing: Check Product Siblings settings and product metafields
• Uneven grid: Ensure product images have consistent aspect ratios
• Mobile layout issues: Adjust mobile columns and test on multiple devices
• Inner grid images not showing: Verify block settings and check image dimensions

Advanced Customization

For developers looking to further customize:

• The main grid layout is controlled in template-collection--grid.liquid
• Product cards are rendered via the product-card--default snippet
• Filters are managed through the product-header snippet
• Pagination uses the Ajaxinate library

Custom CSS can be added to your theme to further personalize the collection grid appearance.