Article tabs

This component allows you to display page categories from your store along with their Articles (which are pages), but adding several elements commonly known as Tabs.

Each Tab consist of a button and a panel in which articles are contained. The first tab will be the one “active”, therefore, it will show its articles.

The other categories you add will also have buttons, but the content of their respective panel will be hidden, until the user clicks on them to reveal it.

The ideal case scenario for this component is to have at least two categories, so users can switch between them. If that’s not the case, we suggest you use another component such as the Page category articles.

Next, you can find the list of options that will allow you to customize it:

Categories

Here you need to choose the categories you want to display from the list that can be found on your store’s admin panel at Products > Categories. The maximum amount of categories you can add is 5.

Tip: You can reorder the list by clicking and dragging each one of them.

---

Items to display

Allows to define the amount of articles to display on each category that you add.

---

Columns

You will find two options to define the amount of columns in which articles will be displayed, for desktop and mobile devices, as it’s defined on the following tables:

Desktop

Columns / Device width	≥576px	≥768px	≥992px
3	2 articles	2 articles	3 articles
2	2 articles	2 articles	2 articles
1	1 article	1 article	1 article

Mobile

Columns / Device width	≤418px	≤575px
2	1 article	2 articles
1	1 article	1 article

---

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.

---

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 on 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 on this page.

---

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 on this page.