Articles in this category

GOOD STUFF!

How to create product category filter (Website builder)

Jun Hyeok Yang Updated by Jun Hyeok Yang

Do you have different types of products and want to offer to your customers the best experience? You can learn how to create a layout to show different categories on your Subbly site!

Creating your own categories layout on your Subbly website

The first step is to create your products and tag them.

If you don't know how to tag your products, check out this article.

Now that we have the products created and tagged. Let's open our website builder. Once there, access your Dashboard > Pages.

We need to create a Products page to make this happen.

After we create the page, it is time to add the categories, and we will achieve this by using the Image element and adding the Paragraph element inside.

You can use images with text included if you don't want to use the Paragraph element, just like the last image with the text 'OTHER'.

Now, let's create additional pages below the main shop page, displaying all the products related to each category. We will continue this process until we achieve the desired result, as shown below.

After creating the pages, navigate to each page and add the Products element. Apply filters based on the tags we previously assigned to our products.

To achieve this, right-click the element > Edit Products (Gear Icon) > Options. And scroll down until you see the 'Filter by Tag' option.

Choose the appropriate tag that corresponds to each page and the products associated with that tag will be displayed. Repeat this process for the remaining pages. Now, let's move on to the final step.

If you want to know more about how to set up your Products element, check out this article.

We need to link the Paragraph elements to each corresponding page. To do this, double-click on the Paragraph element, and you will see a link icon. Click on it and select the "Internal" option, as shown in the following screenshot.

From there, simply select the page that corresponds to the respective category. Using the example, choose the page named 'Category: dog', which will redirect your customers to the Dog's page.

Repeat this process with the remaining elements, and you will have successfully completed the task!

If you decided to use images with the text included, you just need to right-click the image > Edit Link > Internal > Select the page.

Congratulations! With the completion of the categories page and the implemented elements, you are now ready to provide your customers with the best possible experience! Well done!

Did you find this difficult? Reach out to our customer support to get further assistance!

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free