Collection List Setup Guide

This guide explains how to configure the Collection List section of your Shopify store— a high-visibility navigational section that displays multiple product collections (e.g., categories, seasonal lines, or themed groups) in card format. It helps visitors quickly browse and access different product groups, driving discovery and sales.

Overall Collection List Settings

Heading

The title for your Collection List section (sets context for the displayed collections).

• Common examples: Our Collections, Shop By Category, Featured Series, or Explore Our Range.
• Leave blank if you want a clean, title-free layout (as shown in the preview) — ideal for minimalist store designs.
• Keep text short (2-3 words) for scannable clarity — avoid long, descriptive headings.

Font Size (Heading)

Slider (default: 100%) that adjusts the size of the section heading.

• Adjust between 80% (subtle, secondary heading) and 120% (prominent, primary heading) to match your store’s page hierarchy.
• Avoid sizes over 120% — oversized headings can crowd collection cards, especially on mobile screens.

Columns

Controls the number of collection cards displayed in a single row (desktop only — mobile auto-stacks to 1 column).

• 2 columns: Spacious layout (ideal for large collection images or detailed descriptions).
• 3 columns (default): Balanced layout (works for most stores, as shown in the preview).
• 4 columns: Compact layout (best for small, icon-style collection cards with minimal text).

Image Ratio

Sets the aspect ratio for all collection card images (ensures consistent sizing across the list).

• 1:1 (Square): Clean, uniform look (great for product category images).
• 4:3: Slightly landscape format (ideal for lifestyle collection imagery).
• 3:4: Vertical format (perfect for tall product shots, e.g., clothing or home decor).
• Match the ratio to your collection images — avoid cropping key visual details (e.g., don’t use 1:1 for a tall dress image).

Image Height

Slider (default: 300 px) that controls the fixed height of collection card images (width scales automatically per the image ratio).

• Recommended range: 200 px (compact) to 400 px (immersive).
• Use 300 px as a baseline — increase for larger, more visual collections (e.g., home decor), decrease for small accessory categories.

Font Size (Cards)

Slider (default: 100%) that adjusts the size of text (heading/description) on all collection cards.

• Stick to 90-110% — this section is meant to be scanned quickly, so text should be clear but not overwhelming.

Section Spacing

Controls padding above and below the Collection List to ensure it fits smoothly with adjacent content.

• Top Spacing (default: 44 px): Increase to 60-80 px if the section feels cramped against the element above (e.g., a banner or rich text section).
• Bottom Spacing (default: 44 px): Match to top spacing for visual symmetry, or reduce to 20-30 px before a footer.

Individual Collection Card Settings

Customize each collection card (add/edit via the "Add block" button in the customizer):

Collection

Select the Shopify collection to link to this card (the core functional setting).

• Click the dropdown to choose an existing collection (e.g., "New Arrivals", "Summer 2025", or "Best Sellers").
• Ensure the collection has active products — empty collections will display a blank card (poor user experience).

Image

The visual thumbnail for the collection card (replaces the collection’s default image if set).

• Click Select to upload a high-quality PNG or JPG file.
• Upload images at 2× the display size (e.g., 600px for a 300px height card) for sharpness on retina screens.
• Use a consistent style across all cards (e.g., all product shots or all lifestyle imagery) for cohesion.

Heading

The title displayed on the collection card (overrides the collection’s default name if set).

• Keep it short (1-2 words): e.g., Skincare, Accessories, or Sale.
• Use title case (e.g., Home Decor instead of home decor) for a polished look.

Description

Optional short text below the heading (adds context to the collection).

• Limit to 1 short sentence: e.g., "New summer essentials" or "Best-selling styles".
• Leave blank for a clean, minimal card design (recommended for most stores).

Best Practices

• Curate collection count: Limit to 3-6 collections (too many cards overwhelm visitors, too few look sparse).
• Prioritize high-conversion collections: Feature bestsellers, new arrivals, and sale categories at the top.
• Update regularly: Refresh collection images/selection seasonally (e.g., swap winter for spring collections).
• Test navigation: Ensure clicking the card (image/heading) links directly to the collection page — verify on desktop and mobile.