With the Featured Categories component, you can easily display a list of product categories on any page of your site. Each category you select includes the category name, image and call-to-action button, and all are linked to their respective category pages. To get started, drag the component to a page of your site, then click on it to open the options panel.
Managing Categories
There are a pair of options that help you manage categories shown within the component.
- Items Per Page - With this option, you set how many categories are shown in the component per page. If you add 10 categories and have this set to 5, it will display five and include a link in the component to view the next five.
- Manage Categories - To add categories, click on the Add Categories button and select all that you want to show within the component. To remove a category, click the Red X button for the category you want to remove. You can rearrange the order by clicking on a category in the list and dragging it to a new position.
Layout
We provide multiple options for controlling the layout of the component.
- Columns - With this option you set the number of columns of categories; from as little as 1 to as much as 12. This can be set separately for different screen sizes by clicking the desktop/mobile icon.
- Category Spacing - This option controls how much space there is between categories, and can also be set separately for different screen sizes.
- Show Image - This option is toggled on by default. Toggle this off if you don’t want to display category images.
- Show Name - This option is also toggled on by default, but can be turned off if you don’t want to display the names of categories.
- Image Aspect Ratio - With this option, you can set the image ratio of all category images within the component. For example choosing the Square (1:1) option will make all the images squares.
- Image Placement - Use this option to set where the image for each category is shown in relation to the name and button. By default this is set to Above.
- Text Align - This option aligns text for each category to the left, right, or center.
Button
The button included with each category has the following options available to you:
- Show Button - Toggle this option off to hide the button from all categories. Each category will still link to its respective category page.
- Button Label - Edit this field to change the text shown on all buttons within the component. By default this is set to Shop.
- Button Shape - To override the shape setting of your site, change this option to something other than Inherit Global. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Button Text Color - With this option you can customize the color of button text.
- Button Background - With this option, you can customize the background of buttons to a color, gradient, image, or image with overlay.
- Button Border - You can use this option to add a border to buttons, and set the width, color, and style of the border.
Spacing
The Margin option found here controls the space around all of the categories within the component. You can set this individually for each side or all together, and can set it separately for different screen sizes.