Banners

The purpose of this component is for you to highlight features or information about your store, with content that can go from things such as promotions, featured categories or products, among others you can think of.

Component settings

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 (Banners). 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.

Note: the size for the images that you can upload within each Banner will vary depending on the option you chose here. These are explained in detail on this section of the page.

Number of columns on desktop

It allows to define the amount of banners that will be displayed within a single horizontal row, for desktop devices that have a width equal or greater than 768px.

Note: When choosing 4 columns, the amount of banners on smaller desktop devices will be automatically changed to 2 columns, to preserve a good visibility of the content inside them.

Number of columns on mobile

It allows to define the amount of Banners that will be displayed within a single horizontal row, for Mobile devices that have a width equal or lower than 767px.

Space between

This option allows you to define if there will be space between banners.

Note: it 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 options

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.

Banners content

By enabling this option:

• Banners will display content elements (e.g. Title, description, etc).
• Several options will become visible within the component settings which will allow you customize each one of those elements.
• Several options will become visible on each Banner, to manually customize aspects of them.
• Images on banners will be used as backgrounds, therefore, they will adapt based on the Image ratio option that you define.

The options that will be displayed in the main component panel will be the following:

• Position: allows to define the position in which the content of banners 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.
• Image ratio: allows to define the dimension of the banners. Images will adapt to the available space, vertically and horizontally.
• Elements options: within this group you will find options to customize elements such as title, subtitle and description/text, which are covered and explained in detail on this this page.
  • Note: options to customize Descriptions will only appear if the Position option it’s equal to After the image.

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.

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 Banners component is called Banner, and you can add as many as you want. The options for this subcomponent are the following:

Image options

The following options will allow you to define the images for each banner and define how they will look and behave:

• Image: displays two image options to upload them. By uploading the first one, a second will be displayed for mobile devices. If not, the previous will be used for all devices.
• Overlay: allows to define the opacity (or transparency) of this element. You can read more about it on this page.
• Desktop options: allows to define the horizontal and vertical position of the image on desktop devices.
• Mobile options: allows to define the horizontal and vertical position of the image on mobile devices.

Note 1: Vertical and horizontal positioning is most noticeably visible when images are larger than the area of the slide, like for example if the are has a vertical dimension and the uploaded image has a rectangular dimension.

Note 2: Desktop will consider devices with a width equal or higher than 576px. As for Mobile, will be for devices with a width equal or lower than 575px.

Link options

Next, you will find several options for adding a Link to the banner:

• Link: allows to add a link to any content of the store, such as categories, products, pages, etc.
• Link text: Text that will be displayed within the button.
• External link: If enabled, the link will open in a new browser tab.
• Visible link: If enabled, a button will be displayed along with the banner content and the following options will become visible:
  • Link as text: allows to switch the style of the button to be only text.
  • Outline style: if the style is a button, it will display a border around it and a transparent background; if it’s a text, it will display a border at the bottom part of it.
  • Arrow in link: displays an arrow icon on the right side of the link text.

Content options

In this group you will find several options for adding content to a banner, which will only be visible in the storefront if you have enabled the Banners content option, within the main component settings:

• Maximum desktop width: allows to define the maximum amount of space for which the content will stretch within the slide.
• The following content elements will be available to be used:
  • Subtile
  • Title
  • Description: only if the Position option at the main component settings it’s equal to After the image.
• Content colors: allows to define the Color pack to be used on the banner, which will affect all item’s colors inside of it.
• Desktop: allows to define the content alignment and position on desktop devices.
• Mobile: allows to define the content alignment and position on mobile devices.

Note: For alignment and positioning options, the Desktop measure will consider devices that have a width equal or higher than 576px; for Mobile will be for devices equal or less than 575px.

---

---

Images sizes

The suggested dimensions on the tables below will vary depending on the combination and variations of several options of the main component settings.

when you choose to enable Show Banners content, Numbers of columns on desktop and Numbers of columns on mobile options of the component settings:

Banners content: enabled

When enabling this option the dimension for images will have a depend on what you chooseo within the following options:

• Columns on desktop
• Columns on mobile
• Image ratio

Note: Consider that the following dimensions are suggestions from a minimum measure standpoint.

Desktop

Ratio / Number of columns	4 columns	3 columns	2 columns	1 column
Landscape	306 x 172 px	416 x 234 px	636 x 358 px	1296 x 729 px
Portrait	306 x 408 px	416 x 555 px	636 x 848 px	1296 x 1728 px
Rectangular	306 x 230 px	416 x 312 px	636 x 477 px	1296 x 972 px
Square	306 x 306 px	416 x 416 px	636 x 636 px	1296 x 1296 px

Mobile

Ratio / Number of columns	2 columns	1 column
Landscape	366 x 206 px	527 x 297 px
Portrait	366 x 488 px	527 x 703 px
Rectangular	366 x 275 px	527 x 396 px
Square	366 x 366 px	527 x 527 px

Baners content: disabled

When disabling this option we are only specifying the minimum suggested Width, as the Height for each Banner will depend on the number of pixels of each image you upload, in combination with the Number of columns definitions for both desktop and mobile devices.

Desktop

4 columns	3 columns	2 columns	1 column
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px
306 px	416 px	636 px	1296 px

Mobile

2 columns	1 column
366 px	527 px
366 px	527 px
366 px	527 px
366 px	527 px