Skip to content

Collection Description Block

Display the description text for a product collection (category).

What It Does

Section titled “What It Does”

The Collection Description block shows the description text from BigCommerce for the current collection. This helps explain what products are in the category and provides SEO value.

Use cases:

  • Category landing page content
  • Collection archive headers
  • SEO-optimized collection pages

How to Add It

Section titled “How to Add It”

Requirements: Must be used inside the Collection Details Template block.

  1. Add a Collection Details Template block to your page
  2. Click + inside the template
  3. Search for “Collection Description”
  4. Click to insert

Block Settings

Section titled “Block Settings”

Layout

Section titled “Layout”

Alignment:

  • Wide (default)
  • Full width
  • None (constrained to content width)

Text alignment:

  • Left (default)
  • Center
  • Right
  • Justify

Typography

Section titled “Typography”

Font settings:

  • Font family (inherits from theme)
  • Font size
  • Font weight
  • Line height
  • Letter spacing

Spacing

Section titled “Spacing”

Margin:

  • Top, bottom, left, right
  • Custom values or presets

Padding:

  • Top, bottom, left, right
  • Custom values or presets

Customization

Section titled “Customization”

Styling with CSS

Section titled “Styling with CSS”
/* Basic description styling */
.wpe-mustang-collection-description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 2rem;
}


/* Centered description */
.wpe-mustang-collection-description.has-text-align-center {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* Description with background */
.wpe-mustang-collection-description {
  background: #f9f9f9;
  padding: 1.5rem;
  border-left: 4px solid #0073aa;
}

Custom Colors

Section titled “Custom Colors”

Via block settings:

  1. Click the Collection Description block
  2. In sidebar → Color settings
  3. Choose text color
  4. Choose background color (optional)
  5. Choose link color (if description contains links)

Common Patterns

Section titled “Common Patterns”

Hero Description

Section titled “Hero Description”

Large, centered collection intro:

  • Alignment: Wide
  • Text align: Center
  • Font size: 1.25rem
  • Bottom margin: 3rem

Standard Description

Section titled “Standard Description”

Left-aligned content:

  • Alignment: None
  • Text align: Left
  • Font size: 1rem
  • Bottom margin: 2rem
Section titled “Sidebar Description”

Compact description in sidebar:

  • Alignment: None
  • Text align: Left
  • Font size: 0.875rem
  • Bottom margin: 1rem

Managing Description Content

Section titled “Managing Description Content”

Collection descriptions are managed in BigCommerce, not WordPress:

  1. Log into BigCommerce admin
  2. Go to Products → Categories
  3. Edit the collection/category
  4. Add description text in the Description field
  5. Save changes
  6. Wait for webhook sync (automatic)

HTML in descriptions:

  • BigCommerce supports HTML in category descriptions
  • The block renders HTML safely
  • Links, bold, italic, lists are preserved

Block Context

Section titled “Block Context”

Must be used inside:

  • Collection Details Template block

Receives context from:

  • Parent collection slug
  • Parent collection name

Does not work:

  • Standalone (requires parent Collection Details Template)
  • Inside Products block
  • Inside Single Product block

Technical Details

Section titled “Technical Details”

Block name: wpe-mustang/collection-description

Uses context:

  • wpe-mustang/parentCollection - Collection slug

Supports:

  • Alignment (wide, full)
  • Typography controls
  • Color settings
  • Spacing (margin, padding)
  • Custom CSS classes

Does not support:

  • Multiple instances (only one per template)
  • Anchor links
  • Reusable blocks

Troubleshooting

Section titled “Troubleshooting”

Description not showing

Section titled “Description not showing”

Check:

  1. Block is inside Collection Details Template
  2. Collection Details Template has collection selected
  3. Collection has description text in BigCommerce
  4. Description is not empty

Fix:

  • Edit the collection in BigCommerce admin
  • Add description text
  • Save and wait for webhook sync
  • Or trigger manual sync in WordPress

HTML not rendering

Section titled “HTML not rendering”

If HTML from BigCommerce shows as raw text:

Possible causes:

  • WordPress security filters stripping HTML
  • Theme or plugin blocking HTML in blocks

Fix: This should work automatically. If not, contact support.

Description text cut off

Section titled “Description text cut off”

Check:

  • No CSS overflow: hidden on parent elements
  • No max-height limiting the block
  • No JavaScript truncating text

Fix:

/* Ensure full description shows */
.wpe-mustang-collection-description {
  overflow: visible;
  max-height: none;
}

Formatting from BigCommerce lost

Section titled “Formatting from BigCommerce lost”

The block preserves HTML from BigCommerce, but some CSS may be stripped:

Preserved:

  • <p>, <strong>, <em>, <a>, <ul>, <ol>, <li>

May be stripped:

  • Inline style attributes
  • <script> tags
  • Unsafe HTML elements

Best practice: Use semantic HTML in BigCommerce, style with CSS in WordPress theme.

Section titled “Related Blocks”