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
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
Step 2: Add Categories Widget #
To add Categories:
- Go to ShopEngine > Templates > Any ShopEngine Template
- Click on Edit with Elementor
- Search for Categories on Elements Search option
- Drag and drop the widget
- Click on Update to save changes
Step 3: Configure Settings #
Go to: Content > Content to change the following options:
- 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: #
- 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: #
- 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.
