Collections Block

Display product collections (categories) in a grid layout on your storefront.

What It Does

The Collections block shows your BigCommerce product collections as a visual grid, allowing customers to browse by category. Each collection displays as a card with its name and product count.

Use cases:

• Homepage collection navigation
• Shop by category pages
• Landing pages highlighting product categories

How to Add It

1. Open a page/post/template in the Block Editor
2. Click the + button to add a block
3. Search for “Collections”
4. Click to insert the block

Block Settings

Layout Options

Columns:

• Desktop: 1-6 columns (default: 3)
• Tablet: 1-4 columns (default: 2)
• Mobile: 1-2 columns (default: 1)

Alignment:

• Full width (stretches to container edges)
• Wide (wider than content column)
• None (contained within content column)

Collection Display

Collections to show:

• All collections (default)
• Selected collections only
• Featured collections

Order by:

• Name (A-Z)
• Name (Z-A)
• Product count (high to low)
• Product count (low to high)
• Custom order

Show/hide:

• Collection name
• Product count
• Collection image (if available)

Customization

Styling

Via Block Settings:

• Grid gap (spacing between cards)
• Card border radius
• Card shadow
• Text alignment

Via CSS:

/* Target the collections grid */
.wpe-mustang-collections {
  gap: 2rem;
}

/* Style collection cards */
.wpe-mustang-collections .collection-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Collection title */
.wpe-mustang-collections .collection-title {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Product count */
.wpe-mustang-collections .product-count {
  color: #666;
  font-size: 0.875rem;
}

Filtering Collections

Use the block settings to show only specific collections:

1. Click the Collections block
2. In the sidebar, expand Collection Selection
3. Choose “Selected collections only”
4. Pick collections from the dropdown

Common Patterns

Homepage Collection Grid

3-column grid showing all collections:

• Columns: 3 (desktop), 2 (tablet), 1 (mobile)
• Show collection image and product count
• Full width alignment

Featured Categories Landing Page

2-column grid with large cards:

• Columns: 2 across all breakpoints
• Featured collections only
• Wide alignment with spacing

Shop by Category Sidebar

Single column list in sidebar:

• Columns: 1 across all breakpoints
• Text-only (no images)
• Compact spacing

Block Context

Works with:

• Works standalone on any page/post
• Can be combined with other blocks

Does not work with:

• Not available inside Single Product block
• Not available inside Products block

Related Blocks

• Collection Details Template - Display individual collection details
• Products - Show products from a collection
• Collection Title - Display collection name

Technical Details

Block name: wpe-mustang/collections

Supports:

• Alignment (full width only)
• Custom CSS classes

Does not support:

• Reusable blocks
• Anchor links
• Typography controls

Troubleshooting

Collections not showing

Check:

1. Collections exist in BigCommerce
2. Products are assigned to collections in BigCommerce
3. Products are assigned to your WordPress channel
4. Sync has completed successfully

Fix:

• Navigate to Settings → Commerce Connect → Data
• Click “Sync Products Now”
• Wait for sync to complete

Wrong product counts

Product counts update when:

• Product sync runs (every minute via cron)
• Webhooks fire from BigCommerce
• Manual sync triggered

If counts seem stale, trigger a manual sync.

Grid layout broken

Common causes:

• Theme CSS conflicts with grid layout
• Custom CSS overriding block styles

Fix:

/* Force grid layout */
.wpe-mustang-collections {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}