Slider

This component it’s one of the most used and applied type of sections on websites. It allows you to add and display several subcomponents inside of it, which are called Slide, with several content inside of them and various options to customize them.

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

Slider settings

The following options will allow you to customize its behavior:

• Autoplay: allows for the Carousel to automatically move from one item to the next.
  • Autoplay speed: allows to define the time that it will take for the previous option to work.
• Arrows: allows to display arrows below the Carousel for users to control it.
  • Arrows on hover: allows to show the arrows only when the user places the cursor over the component.
• Dots: allows to display dots/points below the Carousel for users to control it.
• Custom navigation color: allows manually define the color of the navigation elements.

Show Slides content

By enabling this option:

• Slides 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 Slide, to manually customize aspects of them.
• Images on slides will be used as backgrounds, therefore, they will adapt based on the width and height that you define.

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

• Height: allows you to define a minimum height for the entire Slider, 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.
• Enable image zoom on hover: images will increase its size when placing the cursor over them.
• 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.
• Icon options: within this group you will be able to enable an icon for all slides, and by doing so, several options will be displayed to customize how they will look.

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 each slide.

Note 2: The size for the images that you can upload within each Slide 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:

• 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

As mentioned before, the subcomponent for a Slider component is called Slide, and you can add as many as you want. The options for this subcomponent are the following:

Background options

This group contains several options to customize how each slide will look and behave:

Media type

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

• 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 slide, 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 slide.

Overlay

Allows to define the opacity (or transparency) of this element. You can read more about it on this page.

Link options

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

• 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 button.
• Enable as external link: If enabled, the link will open in a new browser tab.
• Link as button: if enabled, a button will be displayed along with the slide 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.

Content options

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

• Content colors: allows to define the Color pack to be used on the slide, which will affect all item’s colors inside of it.
• 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
• 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 768px; for Mobile will be for devices equal or less than 767px.

Content image options

This group contains options to display an image next to the slide’s content:

• Image: will be used for desktop devices and for mobile devices if the one for that is not uploaded.
• Size on desktop: allows to define the width of the image (in percentage) based on the available space: Small: (80%), Medium (90%), Large: (100%).
• Image (mobile): will be displayed only on mobile devices.
• Image position: allows to define the position in which the image will be positioned, opposite to the slide’s content:
  • Left: on mobile devices, it will display before the slide’s content.
  • Right: on mobile devices, it will display after the slide’s content.
• Respect order on mobile: will be visible if Image position is equal to Left, and allows to force the theme to position the image before the slide’s content on mobile devices. If disabled, the image will be displayed after.

---

---

Images sizes

The suggested dimensions listed below will vary depending if you enable the Show Slides content option at the main component settings:

Show slides content: Enabled

Width	Height	Dimension for Desktop (in pixels)	Dimension for Mobile (in pixels)
Small	Small	1320 x 420	551 x 420
Small	Medium	1320 x 560	551 x 560
Small	Large	1320 x 720	551 x 720
Small	Browser	1320 x (variable)	551 x (variable)
Small	Fit to content	1320 x (variable)	551 x (variable)
Medium	Small	1620 x 420	575 x 420
Medium	Medium	1620 x 560	575 x 560
Medium	Large	1620 x 720	575 x 720
Medium	Browser	1620 x (variable)	575 x (variable)
Medium	Fit to content	1620 x (variable)	575 x (variable)
Large	Small	1920 x 420	575 x 420
Large	Medium	1920 x 560	575 x 420
Large	Large	1920 x 720	575 x 720
Large	Browser	1920 x (variable)	575 x (variable)
Large	Fit to content	1920 x (variable)	575 x (variable)
Extra Large	Small	2220 x 420	575 x 420
Extra Large	Medium	2220 x 560	575 x 560
Extra Large	Large	2220 x 720	575 x 720
Extra Large	Browser	2220 x (variable)	575 x (variable)
Extra Large	Fit to content	2220 x (variable)	575 x (variable)
Browser width	Small	Width: 2400 px minimum suggested / Height: 420 px	575 x 420
Browser width	Medium	Width: 2400 px minimum suggested / Height: 560 px	575 x 560
Browser width	Large	Width: 2400 px minimum suggested / Height: 720 px	575 x 720
Browser width	Browser	Width: 2400 px minimum suggested / Height: variable	575 x (variable)
Browser width	Fit to content	Width: 2400 px minimum suggested / Height: variable	575 x (variable)

Note 1: When choosing Browser within the Height option, the necessary dimension should be a minimum of certain pixels considering very large devices, so it can be visualized properly.

Note 2: When choosing Fit to content within the Height option, the necessary dimension should be considering the height of the tallest Slide you’ve added.

Show slides content: Disabled

We only make reference to the Width of the image on this table, as its Height will depend on how tall the images you upload are:

Width	Desktop image (in pixels)	Mobile image (in pixels)
Grid	Minimum suggested: 1320	Maximum suggested: 551
Medium	Minimum suggested: 1620	Maximum suggested: 575
Large	Minimum suggested: 1920	Maximum suggested: 575
Extra Large	Minimum suggested: 2220	Maximum suggested: 575
Full Width	Minimum suggested: 2400	Maximum suggested: 575

---

---