Section: Collection

Everything you'll need to know on how to setup your Collection page section.

The Collection section is the main content of your collection pages — the grid of products visitors browse when they land on a collection URL (/collections/all, /collections/sale, etc.). Includes filters, pagination, configurable product cards, badges, and grid columns. The section pulls products automatically from the active collection.

The Collection section is a system section that lives on the Default collection template and renders automatically when visitors land on a collection page.

1) In the theme editor, switch to the Default collection template using the page selector at the top.

2) Click on the Collection section in the left sidebar.

3) Configure the settings — they apply to all collection pages on your store.

Color scheme for the section background, headings, and surrounding text. Pick from the schemes set up in Theme Settings → Colors.

Quick Add: direct 'Add to Cart' for simple products; shows option selector for products with variants. View Product: always links to product page. Choose Quick Add (smart), View Product (link), or No button to keep the card clean.

Choose between horizontal badges or diagonal ribbon style. Normal - Pill badge for a rounded horizontal pill, or Ticker - Diagonal corner ribbon for an angled ribbon across the corner.

How to display the savings amount. Money format uses your shop's currency automatically. Percentage shows SAVE 25%; Money shows SAVE $30.00.

What to show when product has both discount and special tag. Discount Only, Tag Only (NEW, HOT, etc.), or Both.

Position of the badge on product images. Top Left or Top Right.

Color scheme for the filter sidebar / drawer. Pick a contrasting scheme to make filters stand apart from the product grid.

Tick this box to display the total product count for the active collection (e.g. 24 products) at the top of the page.

Number of products shown before pagination kicks in. Range 8–50 (step 2). Default: 16. Lower values speed up page loads; higher values let visitors browse more without paginating.

Number of product cards per row on desktop (2–4). Default: 4.

Number of product cards per row on mobile: 1 column or 2 columns. Default: 2.

Color scheme used inside each product card (background, text, price, badges). Pick a different scheme from the section to create contrast between the page and cards.

Tick this box to display product star ratings on each card. Requires the product to have a rating metafield (Shopify Product Reviews app or similar). Default: off.

Filters and sort are configured in Online Store → Navigation → Filter (or Search and discovery). Define which filters appear (price range, vendor, color, size, etc.). The Collection section automatically renders all enabled filters.

Discount badges only appear when a product has a compare-at price higher than its regular price. Set this in the product's Pricing section in the admin. Tag badges require specific tags on products like NEW, HOT, or BESTSELLER.

Yes — Shopify supports per-collection templates. Duplicate the Default collection template (rename to e.g. collection.sale), customize it, then assign it to specific collections in the admin under Theme template. Each collection can use a different template.

Quick Add is smart: products with no variants (single option) add directly to the cart. Products with variants (color, size) open a small option selector — visitors pick the variant and confirm to add. View Product disables Quick Add and always links to the product page instead.

Products tagged with gift-wrap are intentionally hidden from collection views to avoid showing wrapping options as standalone products. Products with no variants in stock may also be hidden depending on your collection rules. Check the collection's product list in the admin to verify.