Collection Details Template Block

A container block for building custom collection (category) page layouts using nested blocks.

What It Does

The Collection Details Template block provides a template structure for displaying collection information. It acts as a parent container that passes collection context to child blocks like Collection Title, Collection Description, and Products.

Think of it like: A frame that holds all the pieces of a collection page together.

Use cases:

• Custom collection archive pages
• Category landing pages
• Collection-specific layouts

How to Add It

1. Edit a collection archive template or page
2. Click the + button
3. Search for “Collection Details Template”
4. Click to insert
5. Add child blocks inside (Collection Title, Collection Description, Products)

Block Settings

Collection Selection

Select collection:

• Choose which collection this template displays
• Dropdown lists all synced collections
• Updates child blocks automatically

Alignment:

• Full width (default)
• Wide
• None

Allowed Child Blocks

Only these blocks work inside Collection Details Template:

• Collection Title - Display collection name
• Collection Description - Show collection description
• Products - Show products from this collection

Common Patterns

Standard Collection Page

Collection header + product grid:

Collection Details Template (Full width)
├── Collection Title (H1, centered)
├── Collection Description (Wide alignment)
└── Products block (Grid layout)

Minimal Collection Layout

Just title and products:

Collection Details Template (Wide)
├── Collection Title (H2, left-aligned)
└── Products block (3 columns)

Rich Collection Landing Page

Full-featured layout:

Collection Details Template (Full width)
├── Collection Title (H1, 3rem, centered)
├── Collection Description (1.25rem, centered, max-width 800px)
└── Products block
    ├── Products Filters
    ├── Products Sort
    └── Products Grid (4 columns)

How It Works

Context Passing

This block provides “context” to child blocks:

Provides to children:

• wpe-mustang/parentCollection - Collection slug (e.g., “mens-shoes”)
• wpe-mustang/parentCollectionName - Collection name (e.g., “Men’s Shoes”)

Child blocks use this to:

• Collection Title → Display the correct collection name
• Collection Description → Fetch the correct description
• Products → Filter to show only products from this collection

Block Hierarchy

Collection Details Template (parent - provides context)
  └─→ Collection Title (child - uses parentCollectionName)
  └─→ Collection Description (child - uses parentCollection)
  └─→ Products (child - filters by parentCollection)

Customization

Template Styling

/* Style the container */
.wpe-mustang-collection-details-template {
  padding: 3rem 0;
}

/* Add background to template */
.wpe-mustang-collection-details-template {
  background: linear-gradient(to bottom, #f9f9f9, #ffffff);
}

/* Limit content width */
.wpe-mustang-collection-details-template {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

Spacing Between Child Blocks

/* Add consistent spacing */
.wpe-mustang-collection-details-template > * {
  margin-bottom: 2rem;
}

/* Remove margin from last child */
.wpe-mustang-collection-details-template > *:last-child {
  margin-bottom: 0;
}

Using in Templates

Collection Archive Template

1. Go to Appearance → Editor
2. Navigate to Templates → Collection Archive
3. Add Collection Details Template block
4. Select “Use current collection” (dynamic)
5. Add child blocks
6. Save template

The template will automatically show the correct collection based on the URL.

Custom Collection Landing Page

1. Create a new page
2. Add Collection Details Template
3. Select a specific collection from dropdown
4. Add child blocks
5. Publish

This creates a static page for that collection.

Block Context

Provides context:

• wpe-mustang/parentCollection (string) - Collection slug
• wpe-mustang/parentCollectionName (string) - Collection display name

Receives context:

• None (this is a top-level block)

Allowed child blocks:

• wpe-mustang/collection-title
• wpe-mustang/collection-description
• wpe-mustang/products

Technical Details

Block name: wpe-mustang/collection-details-template

Attributes:

• parentCollectionSlug (string) - Collection slug
• parentCollectionName (string) - Collection name
• align (string) - Block alignment

Supports:

• Alignment (wide, full)
• Custom CSS classes

Does not support:

• Multiple instances on same page (may cause context conflicts)
• Nesting inside other blocks
• Typography controls
• Color controls

Troubleshooting

Child blocks not showing collection data

Check:

1. Collection Details Template has collection selected
2. Child blocks are direct children (not nested deeper)
3. Collection exists in BigCommerce and is synced

Fix:

• Re-select the collection in template block settings
• Remove and re-add child blocks
• Verify collection has products assigned

”Use current collection” not working

This option only works in collection archive templates, not on regular pages.

For pages: You must select a specific collection from the dropdown.

Products block showing wrong products

The Products block filters by the parent collection automatically. If showing wrong products:

Check:

1. Correct collection selected in template
2. Products are assigned to this collection in BigCommerce
3. Recent sync has run

Fix:

• Verify in BigCommerce which products are in this collection
• Trigger manual sync: Settings → Commerce Connect → Data → Sync Products Now

Multiple templates on same page

Not recommended - can cause context conflicts. Use only one Collection Details Template per page.

Related Blocks

• Collection Title - Display collection name (child block)
• Collection Description - Show description (child block)
• Products - Show collection products (child block)
• Collections - Grid of all collections (separate block)