Big Banner

This component allows you to display a section to feature and stand out something about your store. Use cases could be for example:

• Showcase a feature.
• Feature a category that’s very relevant.
• Feature a product that you want clients to take a look or perhaps it has a very good discount.

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. 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 will vary depending on the option you chose here. These are explained in detail on this section of the page.

Media type

Allows to define which type of *media element will be used as a background of the component:

• Image: displays two image options to upload them. By uploading the first one, another will be displayed for mobile devices. If not, the previous will be used for all devices.
• Video: displays a Video source option to add and use a video fron an external URL or Youtube video. By doing so, a second option will appear to upload a different one for mobile devices.

When choosing Image, the following options will appear to define aspects of them:

• 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 section, like for example if it 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.

When choosing Video, it will center horizontally and vertically and cover the entire area of the component.

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.
• Show Link image: allows to display the image of the selected link (for products, categories and pages), if it has been added through the administration panel.
• Link text: Text that will be displayed within the link.
• External link: If enabled, the link will open in a new browser tab.

If you have enabled the Show Banner content option that’s found below, the following options will be available to be used:

• Link as button: if enabled, a button will be displayed along with the banner content.
• Outline style: allows for the button to have a border around it and a transparent background.
• Arrow in button: displays an arrow icon on the right side of the button text.

Show Banner content

By enabling this option:

• The banner 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.
• Images will be used as backgrounds, therefore, they will adapt based on the width and height that you define.

The options that will be displayed are the following:

• Height: allows you to define a minimum height for the entire banner, based on these options:
  • Fit to content: the section height will be determined based on the content you add within the component, such as Title, Description, etc.
  • Small: the height of the section will be a minimum of 420px.
  • Medium: the height of the section will be a minimum of 560px.
  • Large: the height of the section will be a minimum of 720px.
  • Browser: the height of the section will take, as a minimum, the height of the browser window where your store it’s being seen, so it may vary from device to device.
• Maximum content width on desktop: allows to define the maximum amount of space for which the content will stretch within the banner.
• Inner border: allows to display a border around all sides of the banner.
• Overlay: allows to define the opacity (or transparency) of this element. You can read more about it on this page.
• Image position: this group of options allow to define how the images you upload will behave on desktop and mobiles devices.
• 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.
• Desktop and mobile options: you will find two groups of options that will allow you to define the Alignment and Position of the content within the banner, for both desktop and mobiles devices.

Note 1: We refer to a minimum height, because this will vary depending on the amount and/or length of the content you add within the component.

Note 2: The size for the images that you can upload will vary depending on the combination of width and height that you define. These are explained in detail in this section.

Appearance

This group contains the following options to customize the component:

• Content colors: allows to choose the Color Pack for the component content, when Show Banner content is enabled.
• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Component background color: allows to choose the Color Pack for the component, which will only affect its background color.

Animations

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

---

---

Images sizes

The suggested minimum dimensions on the tables below will vary depending on the combination from the options Width and Height within the component settings:

The dimension for Desktop devices will consider the ones that have a width equal or greater than 576px, while for Mobile devices the ones that have a width equal or lower than 575px:

Width: Grid

Height	Desktop	Mobile
Fit to content	1320 x 300 px	575 x 320 px
Small	1320 x 420 px	575 x 420 px
Medium	1320 x 560 px	575 x 560 px
Large	1320 x 720 px	575 x 720 px
Browser	1320 x 850 px	575 x 820 px

Width: Medium

Height	Desktop	Mobile
Fit to content	1620 x 300 px	575 x 320 px
Small	1620 x 420 px	575 x 420 px
Medium	1620 x 560 px	575 x 560 px
Large	1620 x 720 px	575 x 720 px
Browser	1620 x 850 px	575 x 820 px

Width: Large

Height	Desktop	Mobile
Fit to content	1920 x 300 px	575 x 320 px
Small	1920 x 420 px	575 x 420 px
Medium	1920 x 560 px	575 x 560 px
Large	1920 x 720 px	575 x 720 px
Browser	1920 x 850 px	575 x 820 px

Width: Extra Large

Height	Desktop	Mobile
Fit to content	2220 x 300 px	575 x 320 px
Small	2220 x 420 px	575 x 420 px
Medium	2220 x 560 px	575 x 560 px
Large	2220 x 720 px	575 x 720 px
Browser	2220 x 850 px	575 x 820 px

Width: Browser

Height	Desktop	Mobile
Fit to content	2800 x 300 px	575 x 320 px
Small	2800 x 420 px	575 x 420 px
Medium	2800 x 560 px	575 x 560 px
Large	2800 x 720 px	575 x 720 px
Browser	2800 x 850 px	575 x 820 px

Note: When defining Browser within the Width and Height options, we suggest that you can test how images look among different devices, to ensure that they don’t pixelate.