Category Page
Lucid v2
This section is for all things related to the category pages in the new Lucid design. Link to the Figma
Header
On every category page in Page Builder, you will have access to a widget region above the header. Adding a widget here will replace the default category header. This widget region will allow you to swap out the header for a custom one. You can view a category in Page Builder in BigCommerce by going to Products → Product Categories → clicking on the ··· on the category → and choosing “View in page builder”. Completely remove the widget and newly added layouts to reactivate the default header.
Layouts
With the new Lucid category designs, there are 3 layouts to choose from. Default, Detailed, and Subcategories. Category layouts can be assigned in the BigCommerce admin when editing a category.
| Layout Name | Whats it do? |
|---|---|
| Default | Default category. Nothing special here. |
| Detailed | Product Cards now display extra information enabled by the products custom fields*. The FAQ/Contact region is added as well as a space for more widgets below the grid. |
| Subcategories | The same as detailed + now products will be grouped by Subcategories**. The name and description in the header of each of these sections are pulled from the subcategory in the BigCommerce admin. |
*see Product Cards.
**see Filtering
Filtering
Product filtering is all handled in BigCommerce. The sort bar can be removed by unchecking all of the facet/filter options in BigCommerce. Read more about category filtering.
The design currently has it set up to show subcategories. BigCommerce does not natively support subcategory filtering on anything other than brand and search pages. To get around this, each product will have to have the custom field “Subcategory” added with the value set to the appropriate subcategory name*. Then, in the BigCommerce admin under “Product Filtering”, enable the “Subcategory” facet. You can change the name to “Category” in it’s settings. This will then make it appear as “Category (Subcategory)“.
*see Product Cards Custom Fields.
Product Cards
Swatches
Products with swatch variants will automatically have their swatches added to the product card. If a variant with a swatch has an image, the main image will be updated when the swatch is selected.
Description
A brief snippet from the product description will be used on the product card. The elipsis (…) can be removed by changing the first paragraphs length in BigCommerce.
Custom Fields
In order to show some of the extra details on the product cards, certain custom fields will need to be add to the products in the BigCommerce admin. If Multiple is checked, then more than one of that custom field can be added. This is generally used for things with lists so each list entry would recieve it’s own custom field.
| Name | Value | Description | Multiple? |
|---|---|---|---|
| alt-description | text | Description to be used for the product card. (255 character limit) | |
| featured-card | text | Adding this will turn the card into a “featured card” on category pages that allow it. The card will take up a full row in the grid and a header will be added above the card with the text from the custom field value. ex: The anywhere mattress | |
| featured-message | text | To be used with featured-card. This will add a message below the featured products header. Not required for featured-card to work. | |
| feature-list | text | A list that appears below the product price. Adding ** around the text will make it bolder and darker (used for showing features that weren’t in the previous product). ex: **Bluetooth Syncing** | ✅ |
| included | text | Similar to the feature-list except it is displayed above the product price and the text will not be bolded with **. | ✅ |
| meter | x=y | x is the feature and y is the value on a scale of 0-5. ex: Cooling=4. If text is added after the ”=”, then the meter will be removed and the text will be displayed. | ✅ |
| options-summary | text | Text that will appear below the name. Generally used for a brief synopsis of the product options. ex: Available in three colors. | |
| sale | text | The text added will be displayed in the “sale” banner in the top-left corner of the card. ex: 20% OFF (always displayed uppercase). If the “sold-out” field is used, it will take precedence. | |
| sold-out | text | The text added will be displayed in the “sold-out” banner in the top-left corner of the card. ex: SOLD OUT (always displayed uppercase). Will take precedence over the “sale” field. Text and background colors can be changed in Page Builder > Theme Styles > Products > Badges. | |
| Subcategory | subcategory name | Used for enabling subcategory filtering. The value needs to match exactly how the subcategory name is spelt in BigCommerce. | |
| tag | text | The text entered will be displayed as a tag on the product card. ex: Best Seller | ✅ |
| tagline | text | Text that appears below the name. Only shown on product cards in a carousel. Usually a short sentance about the product. |
Old Lucid
All things old…
Category Appearance
Header & Description
Since each category has a unique page name compared to it’s link name, we’ll be using the Category’s Description in BigCommerce for the unique name (this will be the header that appears above the product grid). The categories actual description/tagline can be added using Page Builder. While in the Category view in BigCommerce, click the more button ··· on the category and select View in Page Builder. Simply drag a text widget into the designated description region (in the landing image) or edit the one that is currently there. Make sure to set the Text style to Theme default.
Extra Content
Each category has some additional content at the bottom of it’s page. To add this section, open this category page in Page Builder → scroll to the bottom after the product grid → then add the home-seo widget to the region. Update the wiget content and image.
Facets
Facets are the groups of filters for our category & search pages. By default, Size and Price are enabled on every page. More info can be found in the BigCommerce Filters Docs but a couple things to note about facets:
- Facets are case sensitive.
Colorandcolorare two different facets. - A products facets are based off It’s information, It’s variants (color, size, etc), or by It’s custom fields*.
- Multiple of the same custom field facets can be added by adding another custom field with the same name.
Special Facets
Outside of the base design, 3 facets have recieved some special treatment to match the old design. Each of these facets is activated on a product using a custom field.
Bedroom
The Bedroom facet adds 3 icons based off the bedroom type. Guest Bedroom, Kids Bedroom, and Master Bedroom. Adding the custom field Bedroom and one of the bedroom type values will enable this facet on a product.
The availble Bedroom types are:
Guest BedroomKids BedroomMaster Bedroom
Comfort
The Comfort scale is broken into 3 types, Firm, Medium, and Plush. Add the custom field Comfort to a product with one of the types as it’s value.
Material
The Material facet is a little more in depth. It adds an image of the material with each material type. Same as the others, to activate this section, add the custom field Material to the product. For the value, give the name of the material capitalized (ex: Gel Memory Foam). The component will take the name, change it to dashcase, add the prefix “material-”, and look for a .jpg file with the same name. For a material to have an image, there has to be a matching named image uploaded to BigCommerce’s Image Manager*.
example:
| Custom Field Name | Custom Field Value |
|---|---|
| Material | Gel Memory Foam |
The component will convert the name and look for an image called “material-gel-memory-foam.jpg”.
Product Cards
Additional information can be displayed on a product card besides price and name. The following are sections that we have added to them:
Sale Badge
The Sale Badge will appear at the bottom right of the card’s image. It is enabled with the custom field sale. Whatever text is placed inside the custom field value box will be the text that is displayed.
example:
| Custom Field Name | Custom Field Value |
|---|---|
| sale | Save Up to 20% |
will show the sale tag with the text “Save Up to 20%”
Firmness Scale
To add the firmness/plush scale to a product card, use the custom field firmness. For the value, place the products score over the total (X/Y). The component will generate boxes equal to the total and fill in those boxes up till the products score with a low number reffering to more firm and a higher number meaning more plush
example:
| Custom Field Name | Custom Field Value |
|---|---|
| firmness | 4/5 |
In this example, 5 boxes would be created with 4 of them being filled in meaning this product is almost all the way plush.
Bedroom
The corresponding Bedroom icons are automatically added to a product when the Bedroom facet is enabled.