Product Categories

The Product Categories Element will allow you to showcase your categories in a display where you can easily style and customize their appearance. 

Content Tab 

Layout 

1. Columns - Set the number of columns you want your categories to display
2. Carousel - Choose to display your categories in a carousel 
3. Layout - Choose a layout to either be Grid, Masonry, or Metro 
4. Image Size - Set an image size for the categories 
5. Image Ratio - Set an image ratio for the categories 
6. Title - Choose to either display the title of the category or not 
7. HTML Tag - Set an HTML tag for the title of the category  
8. Count - Switch the handle on to show the court of your categories 
9. Meta Type - Decide to show the Meta either Inside or Outside 

Query

1. Source - Select the source from where the element will extract content either Show All or Manual Selection
2. Hide Empty - Switch the handle on to hide categories with no product in them 
3. Order By - Order your categories either by Name, Slug, Description, or Count 
4. Order - Choose to show your categories in either ascending or descending order 

Style Tab 

Layout 

1. Columns Gap - Set the gap between the columns 
2. Row Gap - Set the gap between the rows 
3. Initial Animation - Choose an animation for your categories from the dropdown menu and also tweak the respective setting 
4. Alignment - Align your categories either Left, Center, or Right 
5. Offset - Use this option to skip categories 

Box 

1. Border Width - Set a width for the border of the categories 
2. Border Radius - Set the border-radius values to make the edges of the box rounder 
3. Padding - Add padding values around the box 
4. Content Padding - Add padding values around the content of the box 

Normal | Hover

1. Box Shadow - Choose to add a shadow around the box 
2. Background Color - Set a background color for the box 
3. Border Color - Set a color for the border 

Image

1. Border Radius - Set the border-radius to make your images rounder 
2. Spacing - Set the spacing between the image and the category 

Normal | Hover

1. CSS Filters - Play around with the CSS filters to edit the images 
2. Animation - Set an animation for the image that is being hovered 

Content

TITLE 

1. Color - Set a color for the title 
2. Typography - Tweak the typography options for the title 

COUNT

1. Color - Set a color for the count 
2. Typography - Tweak the typography options for the count 
3. Spacing - Set the spacing between the count and the categories