Learn how to organize and display your store products by category on your website


Step 1 - Create a Product Category

Click the "Store" tab on the left side menu, then hover your mouse over the [store] icon, then select "Products"

Products category

Click the "Categories" Tab, then click the "New Category" button.

Categories creation

Enter the name of the category and category description.

Category settings

You can re-arrange how the categories are displayed on the website's Shop Page by dragging the categories in the desired order.

Click and drag to rearrange the display order

Step 2 - Apply the Category on a Product

Go to the Products Dashboard. Click the "Store" tab on the left side menu, then hover your mouse over the [store] icon, then select "Products"

Navigate to the products tab

Click the [edit] button to open the product, then select a product category. Categories you create will be displayed as a dropdown option.

Product editor

Step 3 - Setup Store Page Layout

  1. Go to the Website Dashboard to edit your Shop Page. If you haven't enabled your shop page, click here for the step by step tutorial.
  2. Click "Shop Products" from the left side menu to load the page settings, then set the "Show products layout" to "By Category"
Shop products block settings in page customization
Organize by category, example

Step 4 - Enable side navigation (optional)

Optionally, you can display a side navigation based on product category. When a category is clicked, the page scrolls to the section of the corresponding category.

Side navigation example