Get Early Access to GutenKit Page Builder Blocks


Categories widgets let you display categories so your customers can easily navigate. This is a general widget of ShopEngine so you can use it on any of the templates.

Let’s check out the steps of how you can use the Categories widget:

Step 1: Enable the Categories Widget  #

To enable the widget,

  • Go to ShopEngine > Widgets > Categories 
  • Turn on Categories Widget  under General section
  • Save changes
enable categories widget

Note: You can also turn on the Categories Widget with a global setting that turns on all the widgets of ShopEngine. To turn on all the widgets 

  • Go to ShopEngine > Widgets 
  • Click on Enable All Widgets
  • Save changes
enable all widgets

Step 2: Add Categories Widget  #

To add Categories:

  • Go to ShopEngine > Templates > Any ShopEngine Template
  • Click on Edit with Elementor
edit shop template
  • Search for Categories on Elements Search option
  • Drag and drop the widget 
  • Click on Update to save changes
 drag and drop categories widget

Step 3: Configure Settings #

Go to: Content > Content to change the following options:

 content settings categories
  • Title:  Change the title of the widgets.
  • Order By: You can set the order list by category or name.
  • Show as Dropdown: Turn this option on to show all the categories as one drop-down menu.
  • Show Product Counts: You can show the total product count for each category by turning this option on;
  • Show Hierarchy: This option shows the category in the hierarchy. If you turn this option off, then all the categories will show up in one list without any hierarchy.
  • Hide Empty Categories:  Turn this option on to hide the categories with no product.
  • Maximum Depth: Enter the number of category levels you want to show. The default value is 0 and it will show all the labels.

Step 4: Style Settings #

Go to the Style tab to change the following style settings:

title style product categories

Title: #

  • Color: Change the color of the title text
  • Typography: Click on the typography edit icon to change the font size.
  • Margin (px): Adjust the top, right, bottom, and left margin around the title.

Category List: #

 category list and global font style categories
  • Typography: Click on the typography edit icon to change the font size.
  • Color: Choose a color for both the normal and hover view.
  • Padding(px): Adjust the top, right, bottom, and left margin around the title.
  • Border Type: Choose a border type for the category list. You can go for solid, double, dotted, dashed, and groove. If you don’t want any border to choose none.
  • Width: Select the top, right, bottom, and left width for the border.
  • Color: Pick a color for the border type.
  • Sub Category Padding Left (px):  Choose how much left padding you want for the subcategory.

Global Font: #

  • Font family: Here you can change the font family for the whole widget.

After making all the changes, click Update to save.

What are your feelings
Updated on February 17, 2022