> ## 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 Page (PLP)

> Individual collection page template with product grid, filtering, and sorting

The Collection Page (PLP) displays products within a specific collection on collection detail pages with product grid layout, filtering, sorting, pagination, and optional promotional content injection. This is the core template for displaying product collections and directly impacts browse-to-purchase conversion rates. Configure grid layouts, enable filtering and sorting, and customize the shopping experience to help customers find the perfect product within each collection.

***

## Template Settings

<Tabs>
  <Tab title="Utilities Bar">
    The utilities bar appears above the product grid with filtering, sorting, and product count controls.

    <AccordionGroup>
      <Accordion title="Enable Products Count" icon="hashtag">
        Display total product count for the collection.

        * **Type:** Checkbox
        * **Default:** Enabled

        **Displays:**

        * "120 products" or similar text
        * Updates dynamically with active filters
        * Helps set customer expectations

        <Tip>
          Product count provides transparency and helps customers understand collection size before browsing.
        </Tip>
      </Accordion>

      <Accordion title="Products Per Row UI" icon="grip">
        Allow customers to switch between grid layouts (3 or 4 columns).

        * **Type:** Checkbox
        * **Default:** Enabled
        * **Provides:** Grid view toggle buttons in collection toolbar

        <Note>
          When enabled, customers see icon buttons to switch between 3-column and 4-column grid views based on preference.
        </Note>
      </Accordion>

      <Accordion title="Enable Sorting" icon="arrow-down-wide-short">
        Display product sorting dropdown.

        * **Type:** Checkbox
        * **Default:** Enabled

        **Sorting Options (typical):**

        * Featured (manual collection order)
        * Best Selling
        * Alphabetically: A-Z
        * Alphabetically: Z-A
        * Price: Low to High
        * Price: High to Low
        * Date: Old to New
        * Date: New to Old

        <Tip>
          Sorting helps customers find products based on their shopping preferences. "Best Selling" is great for social proof.
        </Tip>
      </Accordion>

      <Accordion title="Filters Style" icon="filter">
        Choose how product filters display:

        * **Hidden** - No filtering available
        * **Drawer** (default) - Opens in slide-out panel
        * **Sidebar** - Permanent sidebar on desktop

        <CardGroup cols={3}>
          <Card title="Hidden" icon="eye-slash">
            No filters, simplest browsing experience
          </Card>

          <Card title="Drawer" icon="bars-staggered">
            Space-efficient, opens on demand, mobile-friendly
          </Card>

          <Card title="Sidebar" icon="sidebar">
            Always visible on desktop, quick filter access
          </Card>
        </CardGroup>

        <Note>
          Filters are based on product tags, metafields, and variants. Configure in **Shopify Admin → Online Store → Navigation → Search & Discovery → Filters**.
        </Note>
      </Accordion>

      <Accordion title="Sidebar Navigation" icon="list">
        Add custom navigation menu to collection sidebar.

        * **Type:** Link list (menu) picker
        * **Location:** Appears in sidebar when filters\_style is "sidebar"

        **Common Uses:**

        * Related collection links
        * Category navigation
        * Featured collections
        * Shopping guides

        <Tip>
          Create menus in **Shopify Admin → Online Store → Navigation**. Use for cross-collection navigation or category browsing.
        </Tip>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Product Grid">
    Configure how products are displayed in the grid layout.

    <AccordionGroup>
      <Accordion title="Products Per Page" icon="table-cells">
        Control how many products load before pagination.

        * **Range:** 12-36 products
        * **Step:** 1
        * **Default:** 16

        **Recommendations:**

        * **12:** Smaller collections, faster load times
        * **16:** Balanced (4x4 grid)
        * **24:** Larger catalogs (6x4 grid or 8x3 grid)
        * **36:** Maximum for large collections

        <Warning>
          Higher values improve browsing but increase page load time. Balance between UX and performance.
        </Warning>
      </Accordion>

      <Accordion title="Products Per Row (Default)" icon="columns">
        Default desktop grid columns.

        * **Options:** 3 or 4 columns
        * **Default:** 4 columns

        **Grid Comparison:**

        **4 Columns:**

        * More products visible at once
        * Efficient space usage
        * Smaller product cards
        * Best for: Large catalogs, simple products, fast browsing

        **3 Columns:**

        * Larger product cards with more detail
        * Better for complex products
        * More focus on individual items
        * Best for: Premium products, detailed imagery, lifestyle photos
      </Accordion>

      <Accordion title="Products Per Row (Mobile)" icon="mobile">
        Mobile grid layout.

        * **Options:** 1 or 2 columns
        * **Default:** 2 columns

        **Mobile Layout:**

        * **1 Column:** Large cards, detailed view, portrait-optimized
        * **2 Columns:** More products visible, efficient scrolling
      </Accordion>

      <Accordion title="Pagination Style" icon="ellipsis">
        Choose pagination behavior:

        * **Default** (default) - Traditional page numbers (1, 2, 3...)
        * **Load More** - Progressive loading with button

        <Tip>
          "Load More" provides seamless browsing, while traditional pagination is better for SEO and allows jumping to specific pages.
        </Tip>
      </Accordion>

      <Accordion title="Button Style" icon="square">
        Style for "Add to Cart" and action buttons:

        * **Filled** - Solid background
        * **Outlined** (default) - Border only, transparent background

        <Note>
          Applies to quick-add buttons and "Load More" pagination button.
        </Note>
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    Control the overall section layout, width, spacing, and visual styling.

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

      <Accordion title="Color Scheme" icon="palette">
        * Select from available theme color schemes
        * **Default:** scheme-1
      </Accordion>

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

        <Note>
          Top spacing is 0 by default assuming collection banner section appears above.
        </Note>
      </Accordion>

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

  <Tab title="Text Cards">
    Inject promotional content within the product grid using text card blocks.

    **Limit:** 1 block maximum

    **Purpose:** Add promotional card, banner, or call-to-action within product grid

    <AccordionGroup>
      <Accordion title="Position" icon="location-dot">
        Grid position for the promotional card.

        * **Range:** 1-28
        * **Default:** 8 (after 8th product)

        **Position Strategy:**

        * **1-4:** Above the fold, high visibility
        * **8-12:** Mid-page, natural break point
        * **16-24:** Lower on page for engaged browsers

        <Tip>
          Position 8 (default) appears after the second row in 4-column grid, providing natural visual break.
        </Tip>
      </Accordion>

      <Accordion title="Title" icon="heading">
        * Promotional heading text (rich text supported)
        * **Default:** "Heading goes here"
        * Supports bold, italic, links
      </Accordion>

      <Accordion title="Text Size" icon="text-size">
        * **S** (0.6) - Subtle messaging
        * **M** (0.8) - Standard text
        * **L** (1) - Prominent heading (default)
      </Accordion>

      <Accordion title="Button" icon="rectangle-wide">
        Optional CTA button:

        * **Button Text:** Label for button
        * **Button URL:** Destination link
        * **Button Style:** Filled, Outlined, or Link (default: Outlined)

        <Note>
          Button only displays if both text and URL are provided.
        </Note>
      </Accordion>

      <Accordion title="Color Scheme" icon="swatchbook">
        Independent color scheme for text card.

        * Select from available schemes
        * **Default:** scheme-1
        * Can contrast with main collection background
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

***

## Filter System

<AccordionGroup>
  <Accordion title="Filter Types" icon="sliders">
    Shopify supports multiple filter types:

    **Available Filters:**

    * **Price Range** - Min/max price slider
    * **Product Type** - Category filters
    * **Vendor** - Brand filters
    * **Tags** - Custom tag filters
    * **Variants** - Size, color, material options
    * **Metafields** - Custom attributes (fabric, dimensions, etc.)
    * **Availability** - In stock / Out of stock

    <Note>
      Configure filters in **Shopify Admin → Online Store → Navigation → Search & Discovery → Filters tab**.
    </Note>
  </Accordion>

  <Accordion title="Filter Configuration" icon="gears">
    **Setup Process:**

    1. Go to Shopify Admin → Online Store → Navigation
    2. Click "Search & Discovery"
    3. Navigate to "Filters" tab
    4. Add filters for each collection or globally
    5. Choose filter types (list, swatch, range)
    6. Set filter labels and options

    **Filter Display:**

    * Drawer: "Filter & Sort" button opens slide-out panel
    * Sidebar: Filters always visible on left side
    * Hidden: No filters available
  </Accordion>

  <Accordion title="Active Filters" icon="circle-check">
    When filters are applied:

    * Active filter tags display above product grid
    * Product count updates dynamically
    * "Clear All" option appears
    * URL updates for shareability
    * Filtering works with sorting
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Grid layout strategy" icon="grid-2">
    Choose 4 columns for large catalogs (50+ products), simple imagery, fashion/accessories. Choose 3 columns for premium/luxury products, complex items needing detail, lifestyle photography, home decor/furniture/electronics.
  </Card>

  <Card title="Products per page calculation" icon="calculator">
    Match products\_per\_page to create complete rows. For 4-column grid: 12 (3 rows), 16 (4 rows recommended), 20 (5 rows), 24 (6 rows). For 3-column: 12 (4 rows recommended), 18 (6 rows), 24 (8 rows). Incomplete rows can look unfinished.
  </Card>

  <Card title="Filter implementation" icon="filter-circle-xmark">
    Use filters for collections with 20+ products, multiple variants, price range variety, multiple brands. Skip for small collections (\< 20 products), homogeneous products. Limit to 5-7 filter types, use clear labels, order by importance, show product counts per option.
  </Card>

  <Card title="Sorting strategy" icon="arrow-down-short-wide">
    Featured (manual) is best for curated collections allowing manual product ordering. Best Selling provides social proof and builds trust. Price sorting is essential for budget shoppers (Low to High for bargain hunters, High to Low for premium browsers). Date (New to Old) is perfect for "New Arrivals" collections.
  </Card>

  <Card title="Text card usage" icon="rectangle-ad">
    Use for promotional messaging (free shipping, sales), cross-selling (related collections, bundles), content marketing (size guides, tips). Position 1-4 for high-priority promotions, 8-12 for natural break, 16+ for engaged scrolling customers. Limit to 1 text card per collection for maximum impact.
  </Card>

  <Card title="Mobile optimization" icon="mobile-screen-button">
    Use 2-column mobile grid (shows more products) or 1-column for products needing large images. Filters in drawer work better than sidebar on mobile. Keep products\_per\_page lower on mobile (12-16). Verify touch targets are large enough (44x44px minimum).
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Fashion Store" icon="shirt">
    4-column grid, drawer filters (Size, Color, Price), Best Selling sort, 24 products per page
  </Card>

  <Card title="Premium Furniture" icon="couch">
    3-column grid, sidebar filters, Featured sort, 12 products per page, large product cards
  </Card>

  <Card title="Sale Collection" icon="tag">
    4-column grid, text card at position 1 with "Extra 20% with code SALE20", Price Low-to-High default
  </Card>

  <Card title="New Arrivals" icon="sparkles">
    4-column grid, Date (New-to-Old) sort, text card announcing "Just Landed" collection
  </Card>

  <Card title="Electronics Store" icon="laptop">
    3-column grid, sidebar with detailed filters (Brand, Price, Specs), comparison features
  </Card>

  <Card title="Small Boutique" icon="shop">
    3-column grid, no filters (\< 20 products), Featured sort for manual curation
  </Card>
</CardGroup>

***

## Performance Considerations

<AccordionGroup>
  <Accordion title="Page Load Optimization" icon="gauge-high">
    **Performance Tips:**

    * Lower products\_per\_page for faster initial load (12-16)
    * Use Load More pagination to reduce initial load
    * Optimize product images (compress, use WebP)
    * Enable lazy loading for product images
    * Limit filter complexity (fewer filter types)
    * Use 4-column grid for smaller card images
  </Accordion>

  <Accordion title="SEO Best Practices" icon="magnifying-glass">
    **Collection Page SEO:**

    * Use descriptive collection titles and URLs
    * Write unique collection descriptions
    * Optimize collection featured image alt text
    * Use traditional pagination for crawlability
    * Enable product count for transparency
    * Keep URL structure clean when filtering
    * Add schema markup (breadcrumbs, products)
  </Accordion>
</AccordionGroup>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Collection Banner" icon="image">
    Hero banner appearing above this collection template
  </Card>

  <Card title="Collection Product Card" icon="square">
    Individual product card component within grid
  </Card>

  <Card title="Product Page" icon="tag">
    Individual product page template customers visit after clicking
  </Card>

  <Card title="Featured Collections" icon="star">
    Homepage section for displaying multiple collections
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="No Products Showing" icon="box-open">
    **Possible Causes:**

    * Collection has no published products
    * All products are out of stock (if stock filter active)
    * Products don't match active filters
    * Products not assigned to collection

    **Solutions:**

    1. Add products to collection in Shopify Admin
    2. Publish products (check product status)
    3. Clear active filters
    4. Verify collection conditions (manual vs. automated)
  </Accordion>

  <Accordion title="Filters Not Appearing" icon="filter-circle-xmark">
    **Check:**

    * Filters\_style is not set to "hidden"
    * Filters configured in Shopify Admin → Search & Discovery
    * Collection has filterable attributes (tags, variants, metafields)
    * Theme filter settings enabled globally
  </Accordion>

  <Accordion title="Sorting Not Working" icon="xmark">
    **Verify:**

    * Enable\_sorting checkbox is enabled
    * JavaScript not blocked
    * No theme conflicts
    * Browser cache cleared
  </Accordion>

  <Accordion title="Grid Layout Issues" icon="table-cells-large">
    **Common Issues:**

    * Uneven product card heights (mixed image ratios)
    * Incomplete rows (adjust products\_per\_page)
    * Mobile layout broken (test responsive breakpoints)

    **Solutions:**

    * Use consistent product image aspect ratios (1:1 or 3:4)
    * Match products\_per\_page to grid columns (multiples of 3 or 4)
    * Test on actual mobile devices
  </Accordion>

  <Accordion title="Text Card Not Displaying" icon="rectangle-xmark">
    **Reasons:**

    * Position value exceeds total products on page
    * Block not added to template
    * Position set to value beyond current page products

    **Fix:**

    * Ensure position ≤ products\_per\_page
    * Add text-card block if missing
    * Adjust position to visible range
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Collection product grid template for individual collection pages
* **Features:** Product grid, filtering, sorting, pagination, promotional injection
* **Grid Options:** 3 or 4 columns (desktop), 1 or 2 columns (mobile)
* **Products Per Page:** 12-36 (default: 16)
* **Filters:** Hidden, Drawer, or Sidebar
* **Pagination:** Traditional or Load More
* **Blocks:** 1 text card for promotional content (position 1-28)
* **Customization:** Grid toggles, sorting, sidebar navigation, button styles

<Note>
  Collections are managed in **Shopify Admin → Products → Collections**. This template controls the visual layout and functionality of collection pages, not which products appear in collections.
</Note>