Customizing Category Pages¶

Hiding Breadcrumbs and Page Headings¶

page-settings

To hide breadcrumbs and the page heading, go to Global > Page in Page Builder and select the options you want to hide:

Hide breadcrumbs
Hide page heading
Hide category page heading
Hide blog page heading
Hide contact us page heading

Number of Products Displayed¶

products-number-settings

In Page Builder > Theme Styles > Products > Number of products displayed:

Category page: Specify the number of products to display per page.
Brand page: Specify the number of products to display per page.

Products Display Type¶

The theme allows you to display products in either a grid or a list format. To set the default display, navigate to Page Builder > Global > Products and choose your preferred Display style.

Grid:

products-display-type-grid

List:

products-display-type-list

Displaying Images and Colors on Faceted Filters¶

display-image-filter

To configure image and color options for faceted filters, navigate to Page Builder > Theme Styles > Products > Display Settings.

faceted-filter-image-settings

Setting	Value & Meaning
Faceted filter images (separated by comma)	`shape, material` Defines which product filter fields should display image-based swatches. Each term is separated by a comma (e.g., "Shape," "Material").
+ image size	"Optimized for theme" Specifies how large each swatch image is rendered, using theme-recommended sizing.
Faceted filter colors (separated by comma)	`color` Defines which product filter fields should display color swatches (e.g., "Color").
+ image size	"Optimized for theme" Specifies the recommended size for color swatches, ensuring consistency with the overall theme.

Next, upload the images you want to display on the faceted filters to the Image Manager. Name the images according to the convention [option-name]-[option-value] (e.g., shape-round, color-light-brown). Be sure to replace any spaces or non-alphanumeric characters with hyphens. All images must be in PNG format (with the .png file extension).

image manager

Display FAQs Accordion¶

FAQ Accordion

To add the FAQs accordion to your category page, open Page Builder and drag the Accordion | PapaThemes widget into the designated widget region. Then, use the inline editor to update the FAQs content as needed.

PC Builder Feature¶

PC Builder is a powerful tool that allows customers to build custom PC configurations by selecting compatible components from different categories.

pc-builder-page

Key Features¶

Component Selection: Choose from multiple component categories (CPU, GPU, RAM, etc.)
Compatibility Checking: Automatic validation of component compatibility
Real-time Price Calculation: Price updates instantly as components are selected
Configuration Management: Save, load, and share PC builds
Excel Export: Export configurations to Excel/CSV format
Print Support: Generate printable configuration summaries

PC Builder Setup¶

1. Create PC Builder Category Structure¶

1. Main Category Setup:¶

Create a main category called "PC Builder" (or any name you prefer)
Set this as the parent category for all component categories

2. Component Categories:¶

Create subcategories for each component type:
- CPU (Processors)
- GPU (Graphics Cards)
- RAM (Memory)
- Motherboard
- Storage (SSD/HDD)
- Power Supply
- Case
- Cooling

2. Configure PC Builder Template¶

edit-category-template-layout-pc-builder

1. Access Category Settings:¶

Go to Products → Product Categories in BigCommerce Admin Panel
Select your main PC Builder category

2. Set Custom Template:¶

Edit the category and scroll down to the Custom Template section
Select PC-Builder from the dropdown
Save the category

3. Configure Compatibility Fields¶

theme-settings-configure-compatibility-fields

1. Access Theme Settings:¶

Go to Storefront → Themes → Customize
Navigate to theme settings

2. Set Compatibility Fields:¶

Find the Compatibility Fields setting
Enter comma-separated field names
Example: Socket Support,Memory Type,Memory Speed,TDP,Power Rating,Form Factor,Interface,PCIe Slot,Dimensions,Efficiency

Product Configuration¶

Create Custom Fields for Products¶

edit-product-custom-fields-compatibility

For each product that will be used in PC Builder, you need to create custom fields that correspond to the compatibility fields.

Add Custom Field to Product:¶

Go to Products → View Products in BigCommerce Admin Panel
Edit the product you want to add custom fields to
Scroll down to the Custom Fields section
Click Add Custom Field
Enter the Custom Field Name (must match compatibility field names exactly)
Fill in the Value in the text box
Save the product

Product Configuration Examples¶

CPU Product (Intel Core i7-12700K):

Socket Support: LGA1700
TDP: 125
Memory Type: DDR4,DDR5
Memory Speed: 3200,4800

Motherboard Product (ASUS Z690-A):

Socket Support: LGA1700
Memory Type: DDR4,DDR5
Memory Speed: 3200,4800,5600
Form Factor: ATX
PCIe Slot: PCIe 5.0

RAM Product (Corsair Vengeance 32GB DDR5):

Memory Type: DDR5
Memory Speed: 5600
Form Factor: DIMM

Using PC Builder¶

pc-builder-page

Customer Interface¶

1. Accessing PC Builder:¶

Customers navigate to the PC Builder category
The custom template loads the PC Builder interface

2. Component Selection:¶

Each component category is displayed as a row
Click "Select" button to choose components
A modal opens showing filtered compatible products

Products are filtered based on compatibility with already selected components
Advanced filtering and search options available
Product details, pricing, and options displayed

Build Management¶

Save Configuration: Click "Save Build" to download configuration as JSON file
Load Configuration: Click "Load Build" to upload a previously saved JSON file
Share Build: Click "Share Build" to generate a shareable URL
Export to Excel: Click "Export Excel" to download CSV file
Print View: Click "View & Print" to open printable summary
Add to Cart: Click "Add to Cart" to add all selected components to shopping cart

Customizing Category Pages¶

Number of Products Displayed¶

Products Display Type¶

Displaying Images and Colors on Faceted Filters¶

Display FAQs Accordion¶