> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Collection list page (CLP)

> Collections directory page (list.collections) displaying all or selected store collections

## What It Does

The **Collections List** section displays on your `/collections` page (Collections List template), showing an organized grid of all your store's collections or a curated selection. Each collection displays as a card with image, title, and product count, allowing customers to browse your catalog by category.

Configure page title, choose to show all collections or hand-picked selections, set pagination, and customize collection cards with overrides for specific images or titles.

<Note>
  This is a **template section** (appears on `/collections` page only - Collections List template). Not available as a regular section on other pages. Configure in Theme Customizer → Collections List page template.
</Note>

## Getting Started

<Steps>
  <Step title="Access Collections List Page">
    Visit `yourstore.myshopify.com/collections` to see your collections directory. This page auto-generates from Shopify collections.
  </Step>

  <Step title="Set Page Title">
    In Theme Customizer → Collections List template → Set title (default "Collections"). This appears as page heading.
  </Step>

  <Step title="Choose Collections to Display">
    Select "Show all collections" or "Show selected collections". If selected, add Collection blocks for curated list.
  </Step>

  <Step title="Configure Pagination">
    Set "Collections per page" (default 12). For stores with many collections (50+), pagination improves page load.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Section Settings">
    <AccordionGroup>
      <Accordion title="Title" icon="heading">
        **Type:** Text input\
        **Default:** "Collections"\
        **Translatable:** Yes (uses locale file default "Collections")

        Sets the page heading displayed at top of collections list page.

        ### How It Displays

        * Large heading text (H1) at top of page
        * Typically styled as page title (40-60px font size)
        * Appears above collection cards grid

        ### Customizing Title

        **Default "Collections":**

        * Generic, functional, clear
        * Works for most stores
        * Translates automatically in multi-language stores

        **Custom titles:**

        * "Shop by Category" - More descriptive, guides browsing
        * "Explore Collections" - Action-oriented, engaging
        * "Browse Our Catalog" - Formal, traditional
        * "Shop All" - Minimal, direct
        * Brand-specific terms (e.g., "Women's Categories," "Product Lines")

        ### Choosing a Title

        **Use "Collections" when:**

        * Standard e-commerce terminology sufficient
        * Customers familiar with "collections" concept
        * Simple, direct language preferred

        **Use custom title when:**

        * Target audience unfamiliar with "collections" (may prefer "Categories")
        * Brand voice is specific (playful, formal, technical)
        * Want action-oriented language ("Explore," "Discover")
        * Multi-brand store (e.g., "Shop Brands" if collections are brands)

        ### SEO Considerations

        **H1 heading:**

        * Title becomes H1 heading (most important heading for SEO)
        * Should describe page purpose clearly
        * "Collections" or "Shop by Category" both SEO-friendly

        **Keywords:**

        * Include target keywords if natural (e.g., "Women's Fashion Collections")
        * Avoid keyword stuffing ("Cheap Products Collections Sale")
        * Keep concise (3-5 words ideal)

        ### Best Practices

        **Concise:**

        * Keep to 1-4 words (long titles crowd page)
        * "Collections" (1 word) - minimal
        * "Shop by Category" (3 words) - descriptive
        * "Explore Our Fashion Collections" (4 words) - max length

        **Descriptive:**

        * Should communicate page purpose
        * Visitor should know this is collections/category directory

        **Consistent:**

        * Match terminology used elsewhere in site
        * If main nav says "Categories," use "Categories" here (not "Collections")

        **Translatable:**

        * If multi-language store, keep default "Collections" (auto-translates via locale files)
        * Or edit translations in theme's locale files for each language

        **Recommendation:** Use default "Collections" for most stores. Change to "Shop by Category" if customers unfamiliar with collections terminology, or "Explore \[Your Brand]" for brand-specific messaging.
      </Accordion>

      <Accordion title="Collections to Show" icon="grid-2">
        **Type:** Radio select\
        **Options:** Show all collections, Show selected collections\
        **Default:** Show all collections

        Controls whether page displays all store collections automatically or only hand-picked collections via blocks.

        ### Show All Collections (Default)

        **How it works:**

        * Automatically displays every collection in your Shopify store
        * Collections pulled from Shopify Admin → Products → Collections
        * Order determined by Shopify settings or theme logic (often alphabetical)
        * No manual collection selection needed

        **Pros:**

        * Zero maintenance—new collections auto-appear
        * Comprehensive—customers see all available categories
        * Fast setup—no need to add collection blocks

        **Cons:**

        * No control over order (automatic sorting)
        * Displays ALL collections (including hidden/test collections if published)
        * Can't exclude specific collections

        **Best for:**

        * Stores with organized collection structure (all collections customer-facing)
        * 5-30 collections (manageable number for auto-display)
        * Low-maintenance preference (don't want to manually curate)

        ### Show Selected Collections

        **How it works:**

        * Only displays collections added via "Collection" blocks (see Blocks tab)
        * Must manually add Collection block for each collection to show
        * Control exact order by reordering blocks
        * Can display same collection multiple times (if needed for different images/titles)

        **Pros:**

        * Full control over which collections appear
        * Custom order (drag-and-drop blocks to reorder)
        * Exclude collections (e.g., hidden categories, staff-only, test collections)
        * Override collection images/titles per-card

        **Cons:**

        * Manual maintenance—must add new collections as blocks
        * More setup time (especially for stores with many collections)
        * Forgetting to add new collections means customers don't see them

        **Best for:**

        * Curated experience (only show primary collections)
        * Specific collection order important (e.g., Women → Men → Kids, not alphabetical)
        * Need to hide certain collections (Sale, Staff Picks, etc.)
        * Want custom images/titles different from Shopify Admin defaults

        ### Examples

        **Example 1: Auto-display (Show all)**

        * Store has 12 collections, all customer-facing
        * All collections have good featured images, clear titles
        * Order doesn't matter (alphabetical fine)
        * **Setting:** "Show all collections" (automatic,zero maintenance)

        **Example 2: Curated display (Show selected)**

        * Store has 20 collections, but 5 are internal/test
        * Want specific order: Best Sellers → New Arrivals → Seasonal → Men → Women → Kids
        * **Setting:** "Show selected collections", add 15 Collection blocks in desired order

        **Example 3: Custom imagery (Show selected)**

        * Collections have generic featured images in Admin (created by staff)
        * Want professional branded imagery for collections page
        * **Setting:** "Show selected collections", add Collection blocks with custom images

        ### Switching Between Options

        **Moving from All to Selected:**

        1. Change setting to "Show selected collections"
        2. Add Collection block for each collection you want to display
        3. Reorder blocks to desired sequence
        4. Optionally add custom images/titles

        **Moving from Selected to All:**

        1. Change setting to "Show all collections"
        2. Collection blocks become inactive (not deleted, just not used)
        3. All collections auto-display

        ### Best Practices

        **Use "Show all" when:**

        * All collections are customer-ready (published, good images, clear naming)
        * Collection count is reasonable (5-30)
        * You want hands-off management

        **Use "Show selected" when:**

        * Have hidden/internal collections to exclude
        * Specific order is critical (brand hierarchy, seasonal priority)
        * Need different imagery than Shopify Admin featured images
        * Collection count very large (50+) and want to feature top categories

        **Hybrid approach:**

        * Use "Show all" initially (get site launched quickly)
        * Switch to "Show selected" later when ready to curate experience

        **Recommendation:** Use "Show all collections" (default) for straightforward stores with clean collection structure. Use "Show selected collections" for curated experiences or when collection order matters.
      </Accordion>

      <Accordion title="Collections Per Page" icon="list-ol">
        **Type:** Number input\
        **Default:** 12\
        **Info:** "Collections will be divided to pages by pagination"

        Sets how many collection cards display per page before pagination kicks in.

        ### How Pagination Works

        **If you have 50 collections and set "Collections per page" to 12:**

        * **Page 1:** Collections 1-12
        * **Page 2:** Collections 13-24
        * **Page 3:** Collections 25-36
        * **Page 4:** Collections 37-48
        * **Page 5:** Collections 49-50
        * Pagination links below grid: `< 1 2 3 4 5 >`

        **If you have 8 collections and set to 12:**

        * All 8 collections display on one page
        * No pagination links (unnecessary)

        ### Choosing Collections Per Page

        **Small number (8-12):** ← **Default: 12**

        * **Pro:** Fast page load (fewer images)
        * **Pro:** Less scrolling (easier to browse)
        * **Con:** More pagination clicks to see all collections
        * **Best for:** Stores with 20+ collections, slower internet users, mobile-first

        **Medium number (16-24):**

        * **Pro:** Balance browsing vs loading
        * **Pro:** 2-3 rows of collections visible without scrolling (desktop)
        * **Con:** Moderate page load (more images)
        * **Best for:** Stores with 30-60 collections, desktop-heavy traffic

        **Large number (30+):**

        * **Pro:** Minimal pagination (maybe 2 pages total)
        * **Pro:** All or most collections visible on single page
        * **Con:** Slow page load (many images loading at once)
        * **Con:** Long scrolling (overwhelming on mobile)
        * **Best for:** Stores with 30-50 collections max, fast hosting, desktop-only

        **No pagination (100+):**

        * **Pro:** All collections on one page (no pagination)
        * **Con:** Very slow load for stores with 50+ collections
        * **Risk:** Page timeout, poor UX
        * **Best for:** ONLY stores with \<20 collections (pagination unnecessary)

        ### Performance Considerations

        **Image loading:**

        * Each collection card loads featured image
        * 12 collections = 12 images loading
        * 50 collections = 50 images loading (can be slow)

        **Recommendation by collection count:**

        * **5-15 collections:** 12-24 per page (all fit on 1 page or 2 pages max)
        * **15-30 collections:** 12-16 per page (2-3 pages)
        * **30-60 collections:** 12 per page (5 pages, manageable)
        * **60+ collections:** 12 per page (consider if you need this many customer-facing collections)

        ### Mobile Considerations

        **Mobile scrolling:**

        * Mobile displays 1-2 collection cards per row (vs 3-4 on desktop)
        * 12 collections = 6-12 rows of scrolling on mobile
        * 24 collections = 12-24 rows (too much scrolling)

        **Mobile recommendation:**

        * Keep pagination at 12 or less if mobile-heavy audience
        * Customers comfortable with pagination links ("Next" button)

        ### SEO Implications

        **Pagination:**

        * Each pagination page has unique URL (e.g., `/collections?page=2`)
        * Search engines crawl pagination pages
        * Not a negative SEO factor (standard e-commerce pattern)

        **Load time:**

        * Faster page load (fewer collections per page) improves SEO
        * Google favors fast-loading pages
        * Balance UX (fewer clicks) vs speed (fewer images)

        ### Best Practices

        **Test your store:**

        1. Count your collections (Shopify Admin → Products → Collections)
        2. Set to 12 (default)
        3. Preview collections page
        4. Check page load speed (Google PageSpeed Insights)
        5. **If fast & many collections:** Increase to 16 or 24
        6. **If slow:** Keep at 12 or reduce to 8

        **Future-proofing:**

        * If you have 10 collections now but plan to grow to 50+, set to 12 (room to grow)
        * If you have 8 collections and don't plan to add many, set to 24 (all on one page now and later)

        **User experience:**

        * Most users comfortable with 2-3 clicks to browse all collections
        * Page 1 should showcase primary/popular collections
        * Avoid forcing users through 10+ pages (set higher pagination if this happens)

        **Recommendation:** Use 12 (default) for most stores. Adjust to 8-10 for mobile-heavy stores or 16-24 for desktop-heavy stores with strong hosting. Never exceed number of total collections (avoid unnecessary pagination).
      </Accordion>

      <Accordion title="Section Width" icon="arrows-left-right">
        **Type:** Select dropdown\
        **Options:** Page width (container--default), Narrow (container--md), Full-width (container--fullwidth)\
        **Default:** Page width (container--default)

        Controls the maximum width of the collections grid container.

        ### Width Options

        **Page Width (Default - container--default):**

        * **Width:** \~1200-1400px max (typical theme page width)
        * **Best for:** Most stores, balanced layout
        * **Appearance:** Collection grid centered with moderate side margins
        * **Cards per row (desktop):** 3-4 collection cards

        **Narrow (container--md):**

        * **Width:** \~900-1000px max (narrower than page width)
        * **Best for:** Minimal aesthetic, few collections
        * **Appearance:** Tighter grid, larger margins, more whitespace
        * **Cards per row (desktop):** 2-3 collection cards

        **Full-Width (container--fullwidth):**

        * **Width:** Edge-to-edge (100% browser width minus small padding)
        * **Best for:** Many collections, visual/image-focused brands
        * **Appearance:** Collections span nearly entire screen width
        * **Cards per row (desktop):** 4-5+ collection cards (depends on screen size)

        ### Choosing Section Width

        **Page Width when:** (Recommended default)

        * Standard e-commerce layout
        * 10-30 collections (3-4 cards per row is comfortable)
        * Balanced, professional appearance

        **Narrow when:**

        * Few collections (5-10) - narrower grid prevents excessive whitespace
        * Minimal brand aesthetic (lots of whitespace, breathing room)
        * Collection images are detailed (larger cards when fewer per row)
        * Mobile-first design (narrow desktop grid closer to mobile experience)

        **Full-Width when:**

        * Many collections (30+) - more cards per row reduces scrolling
        * Image-heavy brand (fashion, photography) - showcase large collection images
        * Modern, gallery-style layout
        * Desktop-heavy traffic (utilize wide screens)

        ### Visual Comparison

        **Narrow (2-3 cards per row):**

        ```
        [  Collection  ] [  Collection  ]
        [  Collection  ] [  Collection  ]
        ```

        Large cards, lots of whitespace

        **Page Width (3-4 cards per row):**

        ```
        [ Collection ] [ Collection ] [ Collection ]
        [ Collection ] [ Collection ] [ Collection ]
        ```

        Balanced, standard grid

        **Full-Width (4-5 cards per row):**

        ```
        [Collection] [Collection] [Collection] [Collection] [Collection]
        [Collection] [Collection] [Collection] [Collection] [Collection]
        ```

        Many cards, edge-to-edge

        ### Mobile Behavior

        **All widths behave similarly on mobile:**

        * Mobile typically displays 1-2 collection cards per row
        * Width settings primarily affect desktop/tablet (>768px)
        * Full-width may have slightly less side padding on mobile

        ### Best Practices

        **Consider collection count:**

        * Few collections: Narrow (prevents cards stretching too wide)
        * Many collections: Page Width or Full-Width (more cards visible)

        **Match site aesthetic:**

        * Check other pages' section widths
        * Consistent width across pages feels cohesive
        * If homepage uses page width, collections page should too

        **Test on large screens:**

        * Full-width can look sparse on 27"+ monitors (cards very small)
        * Page Width maintains comfortable card size on large screens
        * Narrow may look awkwardly tight on wide screens (excess whitespace on sides)

        **Image quality:**

        * Full-width requires high-res collection images (cards display larger)
        * Narrow can get away with lower-res images (cards smaller)

        **Recommendation:** Use Page Width (default) for most stores. Switch to Narrow for minimal aesthetic or \<10 collections. Use Full-Width for image-focused brands with many collections (30+).
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Collection Blocks">
    <AccordionGroup>
      <Accordion title="Collection Block" icon="folder">
        **Block Type:** Collection\
        **Limit:** 50 blocks max\
        **Required when:** "Show selected collections" enabled (otherwise blocks inactive)

        Add individual collection cards to display on collections list page. Each block represents one collection card.

        ### When to Use

        **Blocks only active when:**

        * Section setting "Collections to show" set to "Show selected collections"
        * If set to "Show all collections," blocks are ignored

        **Use Collection blocks to:**

        * Manually curate which collections appear
        * Control exact order of collections
        * Override collection featured images (custom imagery per card)
        * Override collection titles (custom names per card)

        ### Block Settings

        **Collection (Collection picker - Required)**

        * Select which collection this block represents
        * Dropdown shows all collections from Shopify Admin
        * Must select a collection (required field)

        **Image (Image picker - Optional)**

        * Override collection's featured image (from Shopify Admin)
        * If blank: Uses collection's default featured image from Admin
        * If uploaded: Uses custom image instead for this card only
        * **Use when:** Collection featured image unsuitable for collections page (wrong aspect ratio, poor quality, off-brand)

        **Title (Text input - Optional)**

        * Override collection's title (from Shopify Admin)
        * If blank: Uses collection's default title from Admin
        * If filled: Displays custom title for this card only
        * **Use when:** Collection title in Admin is technical/long, want shorter/different title for display

        ### Adding Collection Blocks

        **Steps:**

        1. Set "Collections to show" to "Show selected collections"
        2. Click "Add Collection" block button
        3. Select collection from dropdown
        4. Optionally upload custom image (override featured image)
        5. Optionally enter custom title (override collection title)
        6. Repeat for each collection you want to display
        7. Drag-and-drop blocks to reorder

        ### Use Cases for Image Override

        **Scenario 1: Featured image wrong aspect ratio**

        * Collection featured image in Admin is 1200x600px (wide rectangle)
        * Collections page cards are square (crops awkwardly)
        * **Solution:** Upload square 800x800px image in block (override)

        **Scenario 2: Consistent aesthetic**

        * Collections have varied featured images (some lifestyle, some product shots, some text graphics)
        * Want uniform style for collections page (all lifestyle images)
        * **Solution:** Upload consistent lifestyle images for each block

        **Scenario 3: Branded imagery**

        * Admin featured images are generic product grids (created quickly during setup)
        * Ready to upgrade to professional branded photography
        * **Solution:** Upload branded images in blocks without changing Admin images (Admin images still used elsewhere)

        ### Use Cases for Title Override

        **Scenario 1: Long collection titles**

        * Collection title in Admin: "Spring 2024 Limited Edition Women's Apparel"
        * **Card title override:** "Spring 2024 Limited" (shorter, fits card better)

        **Scenario 2: Technical titles**

        * Collection title in Admin: "CAT-MENS-CASUAL-SHIRTS" (technical, for internal use)
        * **Card title override:** "Men's Casual Shirts" (customer-friendly)

        **Scenario 3: Multilingual**

        * Collection title in Admin in English, but theme locale file doesn't translate
        * **Card title override:** Manually enter translated title for non-English stores

        ### Best Practices

        **Block order:**

        * Drag-and-drop to reorder blocks (top block = first card on page)
        * Strategic ordering: Best Sellers → New Arrivals → Seasonal → Evergreen categories
        * Most important collections first (above the fold)

        **Image consistency:**

        * If overriding images, override for ALL collections (consistent style)
        * Mixing default Admin images + custom overrides looks inconsistent
        * Use same aspect ratio for all images (all square or all 3:2 ratio)

        **Title length:**

        * Keep titles under 30 characters (long titles wrap awkwardly on cards)
        * Test on mobile (titles truncate on small screens)

        **Don't duplicate:**

        * Don't add same collection twice unless intentional (e.g., different images for sub-categories)
        * Duplicates confuse customers

        **Max 50 blocks:**

        * Theme limits blocks to 50 (performance)
        * If you have 50+ collections, use "Show all collections" instead (no limit)

        **Recommendation:** Add Collection blocks ONLY when using "Show selected collections." Use image overrides for consistent aesthetic, use title overrides for customer-friendly display names.
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Best practices

<CardGroup cols={2}>
  <Card title="Show All for Simplicity" icon="layer-group">
    Use "Show all collections" (default) for low-maintenance, comprehensive display. Switch to "Show selected" only when curation or custom order required.
  </Card>

  <Card title="12 Collections Per Page" icon="list">
    Keep pagination at 12 collections (default) for fast page load and mobile-friendly scrolling. Increase to 16-24 only for desktop-heavy stores.
  </Card>

  <Card title="Strategic Collection Order" icon="arrow-down-1-9">
    If using "Show selected," order blocks strategically: Best Sellers → New Arrivals → Seasonal → Core categories. First 12 most important (page 1).
  </Card>

  <Card title="Consistent Collection Images" icon="images">
    Ensure all collection featured images have same aspect ratio (square recommended). Inconsistent aspect ratios create uneven grid.
  </Card>

  <Card title="Clear Collection Titles" icon="font">
    Use concise, customer-friendly titles (under 30 characters). "Women's Shoes" better than "WOMENS-SHOES-SPRING-2024-CLEARANCE".
  </Card>

  <Card title="Test on Mobile" icon="mobile">
    Preview collections page on mobile—grid becomes 1-2 cards per row. Ensure images clear, titles readable, pagination easily tappable.
  </Card>

  <Card title="Hide Test Collections" icon="eye-slash">
    Use "Show selected collections" to exclude internal/test collections. Customers shouldn't see "Staff Picks" or "DO NOT DELETE" collections.
  </Card>

  <Card title="Page Width for Balance" icon="maximize">
    Use "Page width" section width (default) for balanced layout. Narrow for minimal aesthetic, Full-width for many collections (30+).
  </Card>
</CardGroup>

## Common Use Cases

### Auto-Display All Collections

**Settings:** Title "Collections", Show all collections, 12 per page, Page width

**Setup:** Zero-maintenance collections directory. All collections auto-appear, alphabetical order, pagination for stores with 20+ collections.

**Best for:** Standard stores with organized collection structure, 10-40 collections

### Curated Collections Showcase

**Settings:** Title "Shop by Category", Show selected collections, 16 per page, Page width

**Setup:** Hand-picked 15 primary collections in strategic order (exclude internal collections). Custom order: Women → Men → Kids → Accessories.

**Best for:** Stores with many collections but want to highlight primary categories

### Minimal Collection Grid

**Settings:** Title "Collections", Show all collections, 12 per page, Narrow width

**Setup:** Small store with 8 collections, narrow grid creates elegant spacing, all collections fit on one page.

**Best for:** Boutique stores, few collections (\<10), minimal aesthetic

### Visual Fashion Gallery

**Settings:** Title "Explore", Show selected collections, 24 per page, Full-width

**Setup:** 30 fashion collections with professional imagery, full-width grid showcases images, 24 per page for comprehensive view.

**Best for:** Fashion brands, image-focused, many collections (30+)

### Custom Branded Directory

**Settings:** Title "Shop Our Brands", Show selected collections, 12 per page, Page width, Image overrides on all blocks

**Setup:** Collections represent brands, upload custom brand logo images (override featured images), display as branded directory.

**Best for:** Multi-brand retailers, collections organized by brand

## Layout Behavior

### Desktop Layout

**Collection cards grid:**

* **Page Width:** 3-4 cards per row (1200-1400px container)
* **Narrow:** 2-3 cards per row (900-1000px container)
* **Full-Width:** 4-5+ cards per row (edge-to-edge)

**Card contents:**

* Collection featured image (square or 3:2 ratio typical)
* Collection title below image
* Product count (e.g., "24 products") below title

**Pagination:**

* Displays below grid if total collections exceeds "Collections per page" setting
* Links: `< 1 2 3 4 ... 10 >`

### Mobile Layout

**Responsive behavior:**

* Mobile (\< 768px): 1-2 cards per row (usually 1 on narrow screens, 2 on wide phones)
* Section width setting minimally affects mobile (cards span nearly full width)
* Vertical scrolling (pagination links below grid)

**Card sizing:**

* Cards larger on mobile (fewer per row = more screen space per card)
* Images remain clear (not too small)

### Empty State

**If no collections:**

* Page displays title but no cards
* (Shopify requires at least 1 collection, so empty state rare)

**If all collections hidden:**

* "Show selected collections" with no blocks added
* Page shows title, no cards (add Collection blocks to fix)

## Related Sections

* **[Collection Banner (Template)](/themes/mojave/sections/main-collection-banner)** - Hero banner on individual collection pages
* **[Featured Collections Links](/themes/mojave/featured-collections-links)** - Collection grid for homepage
* **[Featured Collection](/themes/mojave/featured-collection)** - Single collection products showcase
* **[Collection Product Grid (Template)](/themes/mojave/collections/collection-page)** - Product grid within collection pages

## Technical Notes

### Collections Source

**Shopify Admin collections:**

* Products → Collections → All collections listed here
* Collections List page pulls from this source
* **Published collections only:** Unpublished collections don't appear (even in "Show all" mode)

**Collection visibility:**

* Check collection settings in Admin → Collection → Sales channels
* Must be published to "Online Store" channel to appear

### Collection Cards Data

**Each card displays:**

* **Image:** Collection featured image (Admin → Collection → Featured image), or block override
* **Title:** Collection title (Admin → Collection → Title), or block override
* **Product count:** Auto-calculated (e.g., "15 products")
* **Link:** Clicks go to collection page (`/collections/collection-handle`)

### Pagination Logic

**URL structure:**

* Page 1: `/collections` (no query param)
* Page 2: `/collections?page=2`
* Page 3: `/collections?page=3`

**SEO:**

* Pagination query params are SEO-friendly (Google crawls paginated pages)
* Each page has unique URL, indexed separately

### Dynamic Collection Count

**"Show all collections" mode:**

* If you add new collection in Shopify Admin, it auto-appears on page
* If you delete collection, it auto-disappears
* Zero maintenance (dynamic)

**"Show selected collections" mode:**

* Must manually add Collection block for new collections
* Deleted collections show error in block (remove block)
* Requires maintenance

### Performance

**Image loading:**

* Collection featured images lazy load (below fold cards load as scrolling)
* First 12 cards load immediately, rest on-demand
* Shopify CDN auto-optimizes images (WebP format for supported browsers)

**Pagination improves performance:**

* 12 collections per page = 12 images loading
* vs 60 collections on one page = 60 images (much slower)

### Accessibility

**Keyboard navigation:**

* Tab through collection cards (each card focusable link)
* Enter on card navigates to collection page
* Pagination links keyboard-accessible

**Screen reader:**

* Each card announces: "Collection name, Link, X products"
* Images have alt text (collection title as alt)

**Color contrast:**

* Text overlays on images should have sufficient contrast
* Theme typically adds semi-transparent overlay to images for readability

## Troubleshooting

**Collections not showing:**

* Check "Collections to show" setting—if "Show selected," must add Collection blocks
* Verify collections published: Admin → Collection → Sales channels → Online Store enabled
* Check collection visibility (some themes have hidden collection feature)

**Wrong collections displaying:**

* If "Show all collections" enabled, shows ALL published collections (check Admin for unwanted collections)
* Switch to "Show selected collections" to exclude specific collections

**Collection images missing:**

* Add featured images in Admin: Products → Collections → \[Collection] → Featured image
* If using "Show selected" with image overrides, verify images uploaded in blocks
* Check browser console for image load errors

**Pagination not working:**

* Check "Collections per page" setting—if set higher than total collections, no pagination
* Example: 8 collections with 12 per page = no pagination (fits on 1 page)
* Reduce "Collections per page" to see pagination (e.g., set to 4 for 8 collections = 2 pages)

**Collection order wrong:**

* "Show all collections" orders alphabetically or by Shopify sort (no custom order)
* Use "Show selected collections" for custom order (drag-and-drop blocks)

**Custom images not applying:**

* Verify "Show selected collections" enabled (image overrides only work in blocks)
* Check image uploaded in Collection block (not just in Admin)
* Hard refresh browser (Cmd/Ctrl+Shift+R) to clear cache

**Custom titles not applying:**

* Same as images—only works in "Show selected collections" mode with blocks
* Verify title entered in block's "Title" field
* Check for trailing spaces (extra spaces may cause issues)

**Page load slow:**

* Too many collections per page (reduce "Collections per page" to 12)
* Collection images too large (compress images to under 300KB before upload in Admin)
* Check Shopify status (hosting issues rare but possible)

**Mobile grid looks broken:**

* Test on actual mobile device (not just browser resize—may render differently)
* Check collection image aspect ratios (all should be consistent)
* Clear mobile browser cache

**Collections page blank:**

* Verify in Theme Customizer → Templates → Collections List that section is enabled
* Check if section accidentally deleted (re-add from section library)
* Preview specific collection URL (not `/collections`) to verify collections exist

**Product count incorrect:**

* Product count auto-calculated by Shopify (# of published products in collection)
* If wrong, check collection products in Admin (may have unpublished products)
* Count only includes products published to Online Store channel

**Blocks not reordering:**

* Drag-and-drop by clicking block name/handle (not settings area)
* Ensure "Show selected collections" enabled (blocks inactive otherwise)
* Save changes, hard refresh browser to see new order