> ## 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 listing page displaying all or selected collections with pagination

The Main List Collections template displays a grid of collection cards on the `/collections` page, allowing you to show all collections automatically or manually curate specific collections with custom imagery and content. This template is perfect for stores with multiple product categories, allowing customers to browse and navigate to specific collection pages easily. Use this template to create an organized catalog overview that helps customers discover and access your various product categories.

***

## Template Settings

<Tabs>
  <Tab title="Collections">
    <AccordionGroup>
      <Accordion title="Collections to Show" icon="filter">
        Control which collections appear on the page:

        * **All** (default) - Automatically display all published collections
        * **Selected** - Manually choose specific collections via collection blocks

        <CardGroup cols={2}>
          <Card title="All Mode" icon="list">
            Automatic, chronological display of all collections
          </Card>

          <Card title="Selected Mode" icon="hand-pointer">
            Manual curation with custom order and optional override images/titles
          </Card>
        </CardGroup>

        <Note>
          Use "Selected" for curated collection showcases or to highlight specific categories. Use "All" for automatic collection listing.
        </Note>
      </Accordion>

      <Accordion title="Pagination Style" icon="ellipsis">
        Choose how additional collections load:

        * **Default** (default) - Traditional page numbers (1, 2, 3...)
        * **Load More** - "Load More" button for progressive loading

        <Tip>
          "Load More" provides smoother UX, while traditional pagination is better for SEO and allows users to jump to specific pages.
        </Tip>
      </Accordion>

      <Accordion title="Collections Per Page" icon="grid-2">
        Control how many collections display before pagination.

        * **Range:** 3-50 collections
        * **Step:** 1
        * **Default:** 12

        **Recommendations:**

        * **9-12:** Standard for most stores (3-4 rows in 3-column grid)
        * **20-24:** High collection count stores
        * **6:** Simple stores with few collections
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Cards">
    <AccordionGroup>
      <Accordion title="Collection Card Color Scheme" icon="palette">
        Independent color scheme for collection cards:

        * Select from available theme color schemes
        * **Default:** scheme-1
        * Separate from main section background

        <Note>
          This controls the background and text colors of individual collection cards. Use contrasting schemes for visual separation.
        </Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    <AccordionGroup>
      <Accordion title="Section Width" icon="left-right">
        * **Page** (default) - Contained within page margins
        * **Fluid** - Extends to container edges
      </Accordion>

      <Accordion title="Section Color Scheme" icon="swatchbook">
        Main section background color:

        * Select from available theme color schemes
        * **Default:** scheme-1

        <Tip>
          Use different schemes for section background vs. collection cards to create visual depth.
        </Tip>
      </Accordion>

      <Accordion title="Spacing" icon="arrows-up-down">
        * **Top Spacing**: 0, 1, 2 (default), 4, or 6
        * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
      </Accordion>

      <Accordion title="Borders" icon="border-top-left">
        * **None** (default)
        * **Top Border**
        * **Bottom Border**
        * **Both Borders**
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Blocks

### Collection Block

Add specific collections when "Selected" mode is active.

<Accordion title="Collection Block Settings" icon="grid-2-plus">
  **Limit:** Up to 50 blocks

  **Settings:**

  * **Collection:** Collection picker to select specific collection
  * **Image:** Optional custom image override (replaces collection's featured image)
  * **Title:** Optional custom title override (replaces collection name)
  * **Heading Size:** H6 (XS) to H2 (XL), default: H2
  * **Color Scheme:** Per-card color scheme override (default: scheme-1)

  <Note>
    Image and title overrides are optional. If left blank, the block uses the collection's default featured image and name.
  </Note>

  <Tip>
    Use custom images to create consistent visual style across all collection cards, even if actual collection images vary.
  </Tip>
</Accordion>

***

## Display Modes

<CardGroup cols={2}>
  <Card title="All Collections Mode" icon="list-check">
    **When to Use:**

    * Standard collection directory
    * Automatic updates as collections are added
    * Minimal manual maintenance
    * Alphabetical or chronological order

    **Behavior:**

    * Shows all published collections
    * Automatic ordering
    * Updates automatically when collections added/removed
    * Uses collection's featured image and name
  </Card>

  <Card title="Selected Collections Mode" icon="hand-sparkles">
    **When to Use:**

    * Curated collection showcase
    * Custom collection ordering
    * Featured categories only
    * Landing pages with specific collections

    **Behavior:**

    * Shows only collections added via blocks
    * Custom order (block order in Theme Customizer)
    * Manual updates required
    * Supports image/title overrides
    * Great for highlighting key collections
  </Card>
</CardGroup>

***

## Collection Card Display

Each collection card automatically shows:

<AccordionGroup>
  <Accordion title="Collection Image" icon="image">
    * Featured image from collection settings or custom override
    * Responsive scaling
    * Clickable to collection page
    * Hover effects (theme-dependent)
  </Accordion>

  <Accordion title="Collection Title" icon="heading">
    * Collection name or custom override
    * Configurable heading size (H6-H2)
    * Clickable to collection page
  </Accordion>

  <Accordion title="Product Count" icon="hashtag">
    Some themes display:

    * Number of products in collection
    * Updates dynamically
    * Format: "120 products" or similar
  </Accordion>

  <Accordion title="Collection Description" icon="align-left">
    Optional (theme-dependent):

    * Excerpt from collection description
    * Truncated for card display
    * Provides context
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Collection count" icon="calculator">
    For 3-6 collections use 6 per page with simple navigation. For 7-20 collections use 12 per page (medium stores). For 20+ collections use 12-24 per page with pagination, consider collection categories and subcategories.
  </Card>

  <Card title="Image guidelines" icon="image">
    Use minimum 800x800px resolution, 1:1 (square) or 4:3 aspect ratio, JPG/PNG under 200KB each. Use lifestyle images showing products in context, maintain consistent style/aesthetic, ensure images clearly represent collection content.
  </Card>

  <Card title="Collection organization" icon="folder-tree">
    Use clear descriptive names keeping titles concise (1-4 words). Example: "Summer Dresses" not "Summer", "Men's Sneakers" not "Shoes". Organize by product type, use case, demographic, or season - stay consistent with one principle.
  </Card>

  <Card title="Custom overrides" icon="pen-to-square">
    Use custom images to create visual consistency, replace poor-quality images, implement seasonal/campaign imagery, match brand aesthetic. Use custom titles for seasonal promotions, campaign names, improved clarity, or A/B testing.
  </Card>

  <Card title="Pagination strategy" icon="forward">
    Default pagination is better for SEO (crawlable pages) with clear progress and page jumping. Load More offers better mobile UX with seamless browsing and infinite scroll feel. For 12 or fewer collections, pagination won't appear.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Product Categories" icon="tags">
    All mode showing automatic list of product type collections (Shirts, Pants, Shoes, Accessories)
  </Card>

  <Card title="Curated Showcase" icon="star">
    Selected mode featuring 6-8 hero collections with custom imagery for landing page
  </Card>

  <Card title="Seasonal Navigation" icon="calendar">
    Selected mode with seasonal collections (Spring, Summer, Fall, Winter) using custom override images
  </Card>

  <Card title="Department Store" icon="building">
    All mode with 20+ collections organized by department, 12 per page
  </Card>

  <Card title="Boutique Shop" icon="shop">
    Selected mode with 6 carefully curated collections, no pagination needed
  </Card>

  <Card title="Multi-Brand Store" icon="landmark">
    All mode showing collections for each brand, alphabetically organized
  </Card>
</CardGroup>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Collection Page" icon="grid-2">
    Individual collection page showing products within a collection
  </Card>

  <Card title="Collection Banner" icon="image">
    Hero banner for individual collection pages
  </Card>

  <Card title="Featured Collections" icon="star">
    Section for displaying collection grid on homepage or other pages
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="No Collections Showing" icon="eye-slash">
    **Possible Causes:**

    * No published collections in store
    * Template set to "Selected" with no collection blocks
    * Collections not published

    **Solutions:**

    1. Create and publish collections in Shopify Admin
    2. Switch to "All" mode or add collection blocks
    3. Verify collections are published (not draft)
  </Accordion>

  <Accordion title="Custom Images Not Appearing" icon="image-slash">
    **Verify:**

    * Image uploaded successfully in block settings
    * Image file format is supported (JPG, PNG)
    * Browser cache cleared
    * Image override field has valid image
  </Accordion>

  <Accordion title="Wrong Collection Order" icon="shuffle">
    **In All Mode:**

    * Collections display chronologically or alphabetically (theme-dependent)
    * Cannot manually reorder in "All" mode

    **In Selected Mode:**

    * Order matches block order in Theme Customizer
    * Drag blocks to reorder collections
  </Accordion>

  <Accordion title="Pagination Not Working" icon="page-break">
    **Check:**

    * More collections exist than per-page setting
    * JavaScript enabled in browser
    * No theme conflicts
    * "Load More" button functional (if using that style)
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Collections directory/listing page
* **URL:** `/collections` (default Shopify collections page)
* **Display Modes:** All collections (automatic) or Selected (manual)
* **Blocks:** Up to 50 collection blocks with custom images/titles
* **Pagination:** 3-50 collections per page, traditional or load more
* **Card Features:** Image, title, optional product count/description
* **Customization:** Per-card color schemes, heading sizes, image overrides

<Note>
  Collections are created in **Shopify Admin → Products → Collections**. This template controls how the collection listing page displays, not individual collection content.
</Note>