Categories

This component allows you to add several items or blocks, which will be categories from your store, and you can customize attributes and options for each one of them.

Component settings

Note: We will refer to Content for the details of a category, such as its Name/Title, Description and Button link.

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave, as well as its subcomponents (blocks). The available options for this component are the following:

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

Columns on desktop

Allows to define the amount of blocks per horizontal row that will be displayed on desktop devices. The visible amount of blocks will vary based on what you have defined at the Display option, as it follows:

Carousel

Device width	Amount of blocks
Equal or greater than 992px	Defined amount
Less than 992px	3 blocks
Less than 768px	2 blocks

Grid

Device width	Amount of blocks
Equal or greater than 992px	Defined amount
Less than 992px	3 blocks
Less than 768px	2 blocks

Columns on mobile

Allows to define the amount of blocks that will be displayed within a single horizontal row, for mobile devices that have a width equal or lower than 575px.

Space between

Allows you to define if there will be a visible space between blocks.

Note: this option will only be visible and available to be used if what’s defined at the Spacing option in Theme settings > Design > Theme styles is any other than None.

Display

Allows to define if the component content will be displayed within a section of type Carousel or Grid.

You can read more about the differences between these two types on this page.

Carousel settings

This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.

You can find the full list of options in this page.

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options in this page.

Content options

This group allow to customize the Content of each block, based on the following options:

Image ratio

Allows to define the dimension in which images will be displayed on each block. They will adapt to the available space, vertically and horizontally.

Position:

Allows to define the position in which the content of blocks will appear:

• Over the image: the content will be displayed on top of images, making the image control the height of each banner.
• After the image: the content will be displayed after the image.

Alignment

When choosing After the image in the previous option, two addtional options will become visible so you can define the alignment of the content for desktop and mobile devices. This will affect all blocks in the same way.

Titles

Within this group you will find options to customize the style of the titles for all blocks, like the Weight, Letter spacing and force them to display in All caps.

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available in this page.

---

---

Subcomponent settings

The subcomponent for a Categories component is called Category block, and you can add as many as you want. The options for this subcomponent are the following:

Category

Here you can choose a category for the block, which will automatically add attributes such as the name/title and link.

Title

Allows to replace the original name of the selected category, or even define one if you don’t want to choose a category.

Show description

Allows to display the selected category description after its name.

By enabling it, a Custom description option will become available to override the previous one.

Link options

When you choose a Category in the first option of the block, this group will become visible, with the following additional settings:

Note: when choosing a category the entire block area will be clickable and take to the respective category page.

Link text

Text that will be displayed within the link.

Note: if the option Show link as text is disabled, this text will still visible when you hover (pass the cursor) over the block.

External link

If enabled, the link will open in a new browser tab.

Show arrow in title

An arrow will be displayed and its position will depend on what you have chosen within the Position option at the component settings, as it follows:

• Over the image: The arrow will be displayed along with the link text, if Show link as text is enabled.
• Below the image: The arrow will be displayed at the right side of the title.

Show link as text

Allows to display the link as a visible text after the title and description.

Image options

Note: The first image to be displayed will be the one that belongs to the selected Category on the block, as long as it has one within its admin panel configuration.

Custom image

This option allows you to upload an image if the chosen category doesn’t have one, or to override it if there is.

By doing it, an additional option called Custom image (mobile) will be appear for you to upload one on mobile devices. If nothing is uploaded on this second option, the first one will be displayed on all devices.

Overlay

This element will be visible as long as Over the image is selected at the Position option within the main component settings.

This option allows to control its opacity (transparency). You can read more about it on this page.

Note: This option also displays if an Icon has been added.

Icon options

This group allows to display an icon inside the image area of the block. The following options will become available depending on what you choose at the Position option in the component settings:

Note: We suggest that you upload an icon in formats such as .svg, .webp or .png.

Size

Allows to define the size for the icon in percentages, which will be based on the block width. So for example, if you set 50% the icon width will be half of the block full width.

Overlay color

Allows to choose a Color Pack for the overlay element when an Icon it’s added.

Position options

Two options will be displayed for you to control and choose the horizontal and vertical position of the icon within the image area.

Appearance

This group of options will become visible when Over the image is selected at the Position option, within the main component settings:

Alignment (desktop and mobile)

Allows to define the alignment for both type of devices.

Vertical content position

Allows to define the position of the content in the vertical axis.

Content colors

Allows to choose the Color Pack for the block.