Skip to content

Collection Title Block

Display the name of a product collection (category).

What It Does

Section titled “What It Does”

The Collection Title block shows the name of the current collection. It automatically pulls the collection name from BigCommerce and displays it as a heading.

Use cases:

  • Collection archive page headers
  • Inside Collection Details Template
  • Category landing 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 Title”
  4. Click to insert

Block Settings

Section titled “Block Settings”

Typography

Section titled “Typography”

Tag level:

  • H1 (default for page headers)
  • H2
  • H3
  • H4
  • H5
  • H6
  • Paragraph

Text alignment:

  • Left
  • Center
  • Right

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

Customization

Section titled “Customization”

Styling with CSS

Section titled “Styling with CSS”
/* Basic title styling */
.wpe-mustang-collection-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #333;
}


/* Centered title */
.wpe-mustang-collection-title.has-text-align-center {
  text-align: center;
}


/* Uppercase title */
.wpe-mustang-collection-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Custom Colors

Section titled “Custom Colors”

Via block settings:

  1. Click the Collection Title block
  2. In sidebar → Color settings
  3. Choose text color
  4. Choose background color (optional)

Common Patterns

Section titled “Common Patterns”

Page Header Title

Section titled “Page Header Title”

Large, centered collection name:

  • Tag: H1
  • Font size: 3rem
  • Text align: Center
  • Bottom margin: 2rem

Section Title

Section titled “Section Title”

Medium-sized section heading:

  • Tag: H2
  • Font size: 2rem
  • Text align: Left
  • Bottom margin: 1.5rem
Section titled “Sidebar Collection Name”

Compact title in sidebar:

  • Tag: H3
  • Font size: 1.25rem
  • Text align: Left
  • Bottom margin: 0.5rem

Block Context

Section titled “Block Context”

Must be used inside:

  • Collection Details Template block

Receives context from:

  • Parent collection name
  • Parent collection slug

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-title

Uses context:

  • wpe-mustang/parentCollection - Collection slug
  • wpe-mustang/parentCollectionName - Collection display name

Supports:

  • Typography controls
  • Color settings
  • Spacing (margin)
  • Custom CSS classes

Does not support:

  • Multiple instances (only one per template)
  • Alignment
  • Anchor links

Troubleshooting

Section titled “Troubleshooting”

Title not showing

Section titled “Title not showing”

Check:

  1. Block is inside Collection Details Template
  2. Collection Details Template has collection selected
  3. Collection exists in BigCommerce
  4. Collection name is not empty

Fix:

  • Edit Collection Details Template block
  • Select a collection from dropdown
  • Verify collection has a name in BigCommerce

Wrong collection name showing

Section titled “Wrong collection name showing”

The collection name is pulled from the parent Collection Details Template block. Make sure the correct collection is selected there, not in this block.

Title formatting broken

Section titled “Title formatting broken”

Common causes:

  • Theme CSS overriding heading styles
  • Custom CSS conflicts

Fix:

/* Reset and restyle */
.wpe-mustang-collection-title {
  all: unset;
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
Section titled “Related Blocks”