How to Display Attributes on Category Pages

Follow

This how-to is a part of the How to Filter Products Using Attributes series. Click below to navigate to the other articles in the series: 

  1. How to create Attributes and Attribute Groups
  2. How to Apply Attributes to Products
  3. How to Display Attribute Filters on Category Pages
  4. Optional: How to Create Attributes and Attributes Groups (Import)

Once you are finished creating attribute groups and attributes, its time to display the attribute filters on category pages. This will allow customers to filter products using the attributes you created.

Step 1: Add an Attribute Widget to Left or Right Column

The best place to add attribute filters is the left or right column. In this article, we will be adding them to the left column. To do so, navigate to Themes > Edit Theme > Left Column > Widgets, and click the Add Widget button. You'll notice three options for attributes in the widget list:

  • Attribute Drop Down Group: Displays attributes for a single or multiple attribute groups in drop down menus.
  • Attribute Group: Display attributes for a single, specified attribute group in a list format.
  • Browse by Attribute: Displays attributes for ALL attribute groups in a list format, with a setting for displaying check-boxes.

After you've chosen a widget option, click Add to add the widget to the page. Edit the widget's settings, layout, and CSS to modify how the widget displays.

Below are screenshots of each widget.

Attribute Drop Down Group:

Attribute Group:

 

Browse by Attribute with check-boxes:

 Step 2: Add an Applied Attribute Filters Widget to Category Page

Once you're finished adding and configuring the widgets in the left or right column, navigate to Themes > Edit Theme > Category > Widgets, click Add Widget, and add an Applied Attribute Filters widget to the top of the category page. 

 

Have more questions? Submit a request

Comments