All Collections
Product category panel widget
Product category panel widget

How to display product categories in a customised grid on your website.

Clare Wade avatar
Written by Clare Wade
Updated over a week ago

What is a product category panel?

A product category panel is a way of displaying product categories with the title, summary and image in a customised grid. When a customer clicks the product category title or image, they are redirected to the relevant product category page.

How do I add a product category panel to my website?

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click on Product category panel.

  4. Enter a Title.

  5. Select the Parent category that you want to show.

  6. Select the Page you want to open products in.

  7. Optionally, select a Listing alignment.

  8. Enter a Maximum listings per row.

  9. Enter a Listing minimum width.

  10. Optionally, select a Listing image aspect ratio.

  11. Optionally, enter a Listing image maximum height.

  12. Click Add.

You can now add this widget to your website but it will only be displayed if it has product categories so it's important to ensure that you have some published product categories that meet the Category criteria.

How do I edit a product category panel?

  1. Go to Website > Widgets.

  2. Find the product category panel you are looking for and click the Edit button in the Options column.

  3. Edit the product category panel's details.

  4. Click the Update button.

How do I delete a product category panel?

  1. Go to Website > Widgets.

  2. Find the product category panel you are looking for and click the Delete button in the Options column.

  3. Click the Delete button.

How do I customise a product category panel?

There are several customisation settings for product category panel, they are:

  • Listing alignment - Choose how you want the listing to be aligned. Everything to the left, or everything centred.

  • Maximum listings per row - Choose the maximum number of listings you want to display per row in the grid. (e.g. 3 per row, 4 per row, etc).

  • Listing minimum width - Choose the minimum width a listing can be. This determines when the listings wrap on to the next row in the grid when the space available is reduced.

  • Listing image aspect ratio - Choose how the images are cropped and sized.

  • Listing image maximum height - Set a maximum image height to prevent the image from getting too tall.

Did this answer your question?