Apparel Theme - Components

Some of these Components have subsections that we will refer to as Subcomponents. These elements are the ones that allow more flexibility to some Components by giving the chance to add several pieces of content. Components that have Subcomponents are the following:

• Slider > Slide subcomponent.
• Trustbar > Trustbar Block subcomponent.
• Banners > Banner subcomponent.
• Handpicked Products > Store Product subcomponent.
• Collage > Collage Item subcomponent.
• Lookbook > Lookbook Item subcomponent.
• Flexible Content > Flexible Content Block subcomponent.
• Testimonials > Testimony subcomponent.
• Logo Carousel > Logo subcomponent.
• Accordion > Accordion Item subcomponent.

Components can be added on several templates (or pages) of your store, which include the following: Homepage, Categories, Products, Pages, Contact and Error page.

Something very important that you need to consider is that for Categories, Products and Pages, the Components you add will apply for ALL templates where you have defined it. For example, let’s say you have added a Banners component to the “Default” product template. This component will be displayed on all products that have that template applied.

Based on the previous, if you would like to customize this entirely and for example you may think or want to add different components for different products, you may need to create different “Product templates” so you can apply components for those specific templates.

If you want to look at examples on how to achieve this, you can visit the Tips & Tricks section on our website.

If you need to make changes or customize your theme, you can contact us directly and we would be glad to work with you.

Some Components can only be added once per page, while others can be added as many times as you need. The ones that are limited it’s mainly because they would display the same content or information and would look repetitive.

Here you can find the list of limited Components:

• Featured Products
• Latest Products
• Blog
• Instagram
• Newsletter
• Pop Up

It’s important to point out that still you can add these components on all the pages you want. So for example, you could add the Instagram component at the Homepage of your store but also on the Product pages.

As it was explained at the Theme Basics section, for all components you will have the ability to modify, change or adapt its colors and margins.

For all, except the Slide and Banner subcomponents, you will find the Customize Colors option that will enable the functionality to change the colors. If you don’t enable this, it doesn’t matter which colors you change, because those changes will not take effect until you do and will respect the colors defined at Themes > Visual Editor > Edit Settings > Theme Colors.

In the case of the Slide and Banner subcomponents, you won’t find the Customize Colors option as you will have the immediate ability to change and adapt the colors for all elements of the subcomponent. We did this way for these specific cases because as they work with images, it would be very likely that you will want to adapt colors and we thought it would be annoying for you to have to enable the option each time for each subcomponent.

As for the margins, mostly all components come with the same margin options: Top margin, Bottom margin, Top inner margin and Bottom inner margin. This will give you full flexibility and control to decide how components behave within each other in terms of separation, distance and spacing, even within the component itself.

This option allows you to define the width that the section will have, based on two options:

1. Browser Width: the width of the section will be 100% of the browser's width. You must consider the maximum width defined in Themes > Visual Editor > Edit Settings > Theme Styles.
2. Grid Width: the section width will be based on the Store's Grid width, which is approximately 1300px.

This option allows you to define the “type” of Slider that will be displayed, which works differently in terms of how images and content need to be uploaded and added.

1.- Image + Content

This is the option that comes selected by default. The key focus for it is that the images you can upload (Mobile and Desktop) are going to be used as backgrounds, therefore, they will be placed at the back of all the content you add (e.g. Title, Description, etc.) and they should not contain any over-highly designed graphics that can affect the readability of the content, because basically, they will work as a “decorative” or “contextual” image.

2.- Image only

For this option all the content that you want to include, like texts, titles, buttons, graphics, etc., must be within the image. This is commonly done through design softwares such as Photoshop, Illustrator, among others.

If enabled, Slides will pass automatically from one to the next based on the speed defined in the option below.

Time that takes to pass from one Slide to the next, in seconds.

Allows to define the color that navigation arrows and dots will have.

Displays next and previous arrows for customers to navigate the Slider.

Displays navigational dots (points) for customers to navigate the Slider.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Image for Mobile devices with a maximum width of 575px and ideally in .jpg format.

Image for Desktop and Tablet devices with a minimum suggested width of 1600px and ideally in .jpg format.

The Overlay it's an element that positions itself between the content of the Slide and the image and allows to generate contrast between both for easier readability. Only necessary if Slider Type is equal to Image + Content. You can choose between the following options:

• Both Mobile and Desktop (default): will be visible on all devices.
• Mobile only: will be visible just for Mobile devices up to 575px.
• Desktop only: will be visible for Desktop and Tablet devices that are equal or higher than 576px.
• Disable: won't be visible on any device.

Background color for the Overlay.

Allows you to define the horizontal position of the content. In Mobile devices content will stretch to the whole available space.

Allows you to define the alignment of the content. In Mobile devices content will align to the center of the Slide by default.

Optional and only necessary if Slider Type is equal to Image + Content.

Color for the subtitle.

Mandatory if Slider Type is equal to Image + Content. If you want to split the title into one or more lines, you can just press enter on your keyboard to create it.

Color for the title.

Optional and only necessary if Slider Type is equal to Image + Content. It will display a maximum of 150 characters.

We suggest you make it brief and direct and with no more than 2 lines in Desktop devices. The purpose of this description is to give context to customers about what they would find when they click on the Slide (or the button/link).

Color for the description.

Choose any content of the store, like categories, pages, products, external links, etc. When adding this link, the whole Slide will be clickable.

Text that will be displayed inside the link. It should be brief, direct and attractive.

If enabled, the link will be visible along with the content, although the entire Slide will still be completely clickable.

Displays an arrow at the right side of the link text.

Allows to define the style of the link:

• Filled Button: It will have the default style like any other button of the store.
• Bordered Button: Will have a border and its background will be transparent.
• Normal Link: Will look like a normal link with a border at the bottom.

Color for the text of the link.

Color for the text that displays inside the link on hover state (when passing the mouse over).

Background color of the link. This won't be applied if Link Style is equal to Normal Link.

Background color of the link on hover state (when passing the mouse over). This won't be applied if Link Style is equal to Normal Link.

How many blocks will be visible in Desktop devices. For tablets devices will always be 2 and for Mobile devices only 1.

Time that takes to pass from one block to the next.

Allows you to enable or disable Icons for the all Component blocks.

Allows you to define the alignment of the content:

1. Centered (default): All the content will be aligned to the center on each block. Icons will be positioned before and on top of the block title.
2. Left: All the content will be aligned to the left on each block. Icons will be positioned at the very left side, and the rest will be within a subsection at the right of it.

If enabled, the height of the section will vary depending on the height of each block. If disabled (default), the height of the section will be equal to the height of the tallest block.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Color for the background of the section. This is the only color that can be modified without having to enable Customize Colors.

Color that will be applied to all the icons of the component.

Color that will be applied to all the titles of the component.

Color that will be applied to all the descriptions of the component.

Color that will be applied to all the links of the component.

Color that will be applied to all the links of the component in hover state (when passing the mouse over).

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Here you can select an icon by typing any letter and the icons list will be displayed. The position of the icon will depend on the option you select at Content Alignment. There's no need to choose anything here if Enable Icons is disabled.

Allows to define a style for the icon selected before. If the icon you choose is a Brand, like for example Instagram, Facebook, etc., there's no need to select anything here.

Mandatory. Make it brief, simple and direct.

Optional, but ideal and brief. Displays below the title.

Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if a Link is added.

Allows to define how Banners will work on the component, based on two options that have the same logic as the Slider component:

This option allows you to define how and where Banners will be positioned within the store’s grid, based on two options:

How Banners behave and display will depend on what you define in the previous option:

If Carousel is selected at the Display Type option, this will make it pass automatically from one banner to the next.

Time that takes to pass from one Banner to the next, if Carousel is selected at the Display Type option.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

Background color of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Image for Mobile devices. We recommend uploading an image in .jpg format. Maximum recommended width: 575px.

Image for Desktop devices. We recommend uploading an image in .jpg format. Minimum recommended width: 640px (if 2 or more banners have been added).

Allows to display the Overlay element to generate contrast. Will only display if Banners Type is equal to Image + Content:

1. Both Mobile and Desktop (default): will be visible on all devices.
2. Mobile only: will be visible just for Mobile devices up to 575px.
3. Desktop only: will be visible for Desktop and Tablet devices that are equal or higher than 576px.
4. Disable: won’t be visible on any device.

Background color for the Overlay.

Allows you to define the horizontal position of the content. In Mobile devices content will stretch to the whole available space.

Allows you to define the alignment of the content, between Left, Right and Center.

Optional. Subtitle of the Banner. Only necessary if Banners Type equals Image + Content.

Color for the subtitle.

Title of the Banner. Mandatory if Banners Type equals Image + Content. You can split the title in two or more lines just by typing enter on your keyboard.

Color for the title.

Choose any content of the store, like categories, pages, products, external links, etc. By adding this, the entire Banner will be clickable.

Text that will be displayed on the Link. Mandatory if Enable Link Visibility is enabled.

If enabled, the Link will be displayed along with the content, although the entire Banner will still be clickable.

Displays a right arrow inside the Link.

Style for the Link of the Banner. Only applies if Enable Link Visibility has been enabled.

Allows you to define how products will be displayed:

1. Carousel: with arrows and dots to navigate it.
2. Grid: the same way products are shown in a category page, in columns.

Limit the amount of products that the section will display. The interval is based on multiples of 5 products, considering the maximum number of products that will be displayed on Desktop devices.

Optional. Subtitle of the section.

Title of the section. By default the text “Featured Products” will be displayed, which you can change at the Languages settings of your store or by filling this field.

Optional. Description of the section.

Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. By default the text "See more products" will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, products will pass automatically from one to the next based on the speed defined in the option below. Only applies if Display Type is equal to Carousel.

Time that takes to pass from one product to the next, if Autoplay is enabled.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Allows you to define how products will be displayed:

1. Carousel: with arrows and dots to navigate it.
2. Grid: the same way products are shown in a category page, in columns.

Limit the amount of products that the section will display.

Optional. Subtitle of the section.

Title of the section. By default the text "Latest Products" will be displayed, which you can change at the Languages settings of your store or by filling this field.

Optional. Description of the section.

Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. By default the text "See more products" will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, products will pass automatically from one to the next based on the speed defined in the option below. Only applies if Display Type is equal to Carousel.

Time that takes to pass from one product to the next, if Autoplay is enabled.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Allows you to define how products will be displayed:

1. Carousel: with arrows and dots to navigate it.
2. Grid: the same way products are shown in a category page, in columns.

Optional. Subtitle of the section.

Title of the section. By default the text “Handpicked Products” will be displayed, which you can change at the Languages settings of your store or by filling this field.

Optional. Description of the section.

Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. By default the text "See more products" will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, products will pass automatically from one to the next based on the speed defined in the option below. Only applies if Display Type is equal to Carousel.

Time that takes to pass from one product to the next, if Autoplay is enabled.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Select the Category from which you want to show products. This component won't display if you don't choose something here.

Allows you to define how products will be displayed:

1. Carousel: with arrows and dots to navigate it.
2. Grid: the same way products are shown in a category page, in columns.

Limit the amount of products that the section will show.

Optional. Subtitle of the section.

Title of the section. By default it will display the name of the Category you have selected. You can change it by filling this field.

Optional. Description of the section.

Allows you to show or hide the link to the page of the Category you have selected.

Text that displays in the link. By default the text "See more products" will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, products will pass automatically from one to the next based on the speed defined in the option below. Only applies if Display Type is equal to Carousel.

Time that takes to pass from one product to the next, if Autoplay is enabled.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Allows to define the width that the section will have:

1. Grid Width: The width of the section aligns with the maximum width that the store container grid has.
2. Full Width: The width of the section takes 100% of the browser's width.

Number of posts that will be displayed in the Instagram feed, between 6, 8 or 12. The main reason for this is to prevent your store’s loading speed from being negatively affected by displaying too many images.

Allows you to define the way in how posts will be displayed in the section:

1. Grid: Posts will be shown one next to the other in columns. In mobile devices they will stack vertically.
2. Carousel: Posts will be shown inside a Carousel.

Allows to define if posts will have a small separation between them or if they will be displayed together (without space).

Allows to hide or show the Instagram icon that goes along with the Title of the section.

By default the text "Follow us on Instagram” will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, Instagram posts will pass from one to the next automatically. This will only work if Display Type is equal to Carousel.

Time that takes to pass from one post to the next, in seconds.

Displays next and previous arrows for customers to navigate the Carousel. Will only be displayed if Display Type is equal to Carousel.

Displays navigational dots (points) for customers to navigate the Carousel. Will only be displayed if Display Type is equal to Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the title of the section.

Color for the Account name of the section. This is the name that will be visible once you sync your Instagram account.

Color for the account name of the section on hover state (when passing the mouse over).

Color for the Overlay element that appears when the customer places the mouse over a post and displays the text "View on Instagram".

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. URL of the Mailchimp's form, which you can find at the Embedded code section of your Mailchimp account, in the Audiences settings.

Mandatory. This is an alphanumeric code (ex. 4a44a2fa19) that needs to be included, in order to prevent spam emails from subscribing to your Mailchimp account. More info visit the following link: https://mailchimp.com/help/find-audience-id/

Allows you to define the width of the section, based on two options:

1. Browser Width: The width of the section takes 100% the browser's width.
2. Grid Width: The width of the section aligns with the maximum width that the store container grid has.

Allows you to select the type of form for the Newsletter, based on two options:

1. Full: Includes the email address, name and surname fields.
2. Simple (default): Includes only the email address field.

The option you choose will affect the position in which the Content (Title and Description) and the Form will display, as you can see in the images below:

Allows you to define the alignment of the Newsletter, which will affect all texts like the Title and the Description, as well as the texts that display inside the form fields.

By default “Subscribe to our Newsletter” will be displayed, which you can change at the Languages settings of your store or by filling this field.

By default the text “Sign up to receive the latest news and updates” will be displayed, which you can change at the Languages settings of your store or by filling this field.

It goes below the Title and its focus should be on detailing customers the benefits for subscribing.

Text that displays below the Newsletter form field(s). This is helpful to let customers know, for example, that they accept certain terms before subscribing.

Allows you to add a Link inside the Disclaimer text, for example to a page that details certain policies or provides information about what customers accept when subscribing.

This is the text that will be displayed within the [link] tag, inside the Disclaimer text.

By default the text "Subscribe” will be displayed, which you can change at the Languages settings of your store or by filling this field.

Background image for mobile and tablet devices. Width must have a minimum of 767px for optimal results and format should ideally be .jpg. If the image is in .png format, we suggest optimizing it as much as possible.

Background image for desktop devices. The image width must be considering the following:

• A minimum width of 1600px if Newsletter Width equals Browser Width or;
• A maximum width of 1296px if Newsletter Width equals Grid Width.

For optimal results, the format should ideally be .jpg. If the image is in .png format, we suggest optimizing it as much as possible.

The Overlay it's an element that positions itself between the content of the Newsletter and the background image and allows to generate contrast between both for easier readability. Will only display if at least one of the background images has been uploaded.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. Only visible if no image is added. This is the only color that can be modified without having to enable Customize Colors.

Color for the title of the section.

Color for the description of the section.

Color for the disclaimer text of the section.

Color for the Disclaimer Link on hover state (when passing the mouse over).

Color for the text of the button.

Color for the text of the button on hover state (when passing the mouse over).

Color for the background of the button.

Color for the background of the button in hover state (when passing the mouse over).

Background color for the Overlay.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Allows you to define how many articles will be displayed in Desktop devices. For small Tablets only 2 articles will be displayed and for Mobile devices only 1.

Allows you to define the maximum amount of articles that will be displayed in the section.

Optional. Subtitle of the section.

Title of the section. By default the text “Blog” will be displayed, which you can change at the Languages settings of your store or by filling this field.

Optional. Description of the section with a maximum amount of 125 characters.

Displays the link to the Blog page, which you can edit by going to Themes > Visual Editor > Edit Settings > Blog & Articles.

Text that displays in the link. By default “See more articles” will be displayed, which you can change at the Languages settings of your store or by filling this field.

If enabled, articles will pass automatically from one to the next based on the speed defined in the option below.

Time that takes to pass from one article to the next, in seconds.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Select the Category from which you want to show products. The component won't display if you don't choose something here.

Allows you to define the order in which elements display.

Image for Mobile and Tablet devices with a maximum width of 767px and in .jpg format.

Image for Desktop devices with a minimum suggested width of 800px and in .jpg format.

Allows to enable the Overlay element that positions itself between the content and the background images, to generate contrast between both for an easier readability:

1. Both Mobile and Desktop: will be visible on all devices.
2. Mobile only: will be visible just for Mobile devices up to 575px.
3. Desktop only: will be visible for Desktop and Tablet devices that are equal or higher than 576px.
4. Disable (default): won't be visible on any device.

Position of the content of the section (subtitle, title, description and link). For Mobile devices content will stretch to the entire available space.

Alignment of the content of the section (subtitle, title, description and link). For Mobile devices content will align to the center.

Optional. Subtitle of the section.

Title of the section. By default the name of the Category you selected will be displayed, which you can replace by filling this field. If you want the title to be in two or more lines, just press enter to create them.

Optional. Description of the section.

Allows to show or hide the link that takes to the Category page you have selected.

Text that will be displayed inside the link. By default “See more products” will be shown, which you can change at the Translations settings of your store or by filling this field.

Displays a right arrow inside the link.

Allows to define the style of the link:

1. Filled Button: It will have the default style like any other button of the store.
2. Bordered Button: Will have a border and its background will be transparent.
3. Normal Link: Will look like a normal link with a border at the bottom.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Background color for the Overlay element.

Background color of the content which contains the Subtitle, Title, Description and Link. If no image is added, this color will be visible.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Background color of the link. This won't be applied if Link Style is equal to Normal Link.

Background color of the link on hover state (when passing the mouse over). This won't be applied if Link Style is equal to Normal Link.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Allows you to define which of all the Collage Items you add will look bigger and stand out from the rest. Here you can see an example of how both options would look and affect items:

Enables the Heading at the start of the section, before the Collage. Even if this is enabled, it will only appear if at least one of these fields are filled: Subtitle, Title or Description.

Optional. Subtitle of the section.

Optional. Title of the section.

Optional. Description of the section.

Optional. Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if Link is added.

If enabled, you will be able to customize colors with the options you'll find below. This applies as well to all Collage Items. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Image for mobile devices with a recommended maximum width of 575px and in .jpg format.

Image for desktop devices with a recommended maximum width of 1000px and in .jpg format.

Mandatory. Choose any content of the store, like categories, pages, products, external links, etc. This will make both Image and Title clickable.

Optional. If you want a title to be displayed below the image fill this field. If not, the whole item will still be clickable if a link is added.

Displays a right arrow inside the Link.

Color of the title.

Color of the title on hover status (when passing the mouse over).

Allows to define how Blocks will be displayed.

How many Blocks will be shown in Desktop devices. For tablets devices will always be 2 and for Mobile devices only 1. This option will only work if Display Type is equal to Carousel.

If enabled, Blocks will pass automatically from one to the next based on the speed defined in the option below. Only works if Display Type is equal to Carousel.

Time that takes to pass from one block to the next, in seconds.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

Enables a Heading section at the start of the component and before the Block items. It will display if at least one of these fields are filled: Subtitle, Title or Description.

Optional. Subtitle of the section.

Optional. Title of the section.

Optional. Description of the section.

Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if Link is added.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Image for mobile devices with a minimum suggested width of 552px and in .jpg format.

Mandatory. Image for desktop devices with a minimum suggested width of 750px and in .jpg format.

Copy and paste here the embedded object from the source you need or the URL, for example Youtube or Vimeo.

This will make that when clicking the image or the link (if visible), the video will open in a Pop-up modal window.

Allows to define the alignment for the content of the Block on Mobile devices.

Allows to define the alignment for the content of the Block on Desktop devices.

Optional. Subtitle of the block.

Mandatory. Title of the block.

Optional, but ideal. Add a description for the block.

Allows to choose any content of the store, like a page, category, product or external link. Not applicable if the Block will be used for a Video.

Text that will be displayed on the link. If you leave this field empty and the block will be used for a Video with Enable Video Link enabled, the text "See Video" will be displayed by default.

Allows to make the Link that opens the Pop-up modal window visible. If not enabled, the Video will still be able to be opened when clicking on the block image.

Displays an icon along with the Link text. If a video it's defined, it will be a play icon before the text. If it's a link to a page, there will be a right arrow after the text.

Color for the subtitle of the block.

Color for the title of the block.

Color for the description of the block.

Color for the text of the Link.

Color for the text of the Link in hover state (when passing the mouse over).

How many testimonies will be visible in Desktop devices. For tablet devices it will always be 2 and for Mobile devices only 1.

Enables a Heading section before the Testimonies Carousel. Even if this is enabled, it will only appear if at least one of the following fields are added: Subtitle, Title or Description.

Optional. Subtitle of the section.

Optional. Title of the section.

Optional. Description of the section.

Optional. Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if Link is added.

If enabled, testimonies will pass automatically from one to the next based on the speed defined in the option below.

Time that takes to pass from one testimony to the next, in seconds.

Displays next and previous arrows for customers to navigate testimonies.

Displays navigational dots (points) for customers to navigate and choose testimonies to see.

If enabled, you will be able to customize colors with the options you'll find below. This applies as well for each testimony that's gonna be added. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Color for the Quote of each testimony.

Color for the Author name of each testimony, if added.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Add the client Testimony. Maximum 400 characters.

Optional. Upload an image to accompany the name of the Author. Image will be displayed at a maximum size of 50x50px.

Optional, but ideal. Add the name of the person who gave the quote. Can be the full name, just the first name, an alias, etc.

How many logos will be visible in Desktop devices. For large tablets devices 4 logos will be visible, for small tablets devices 3. For Mobile devices 2 logos will always be visible.

If enabled, logos will pass automatically from one to the next based on the speed defined in the option below.

Time that takes to pass from one logo to the next, in seconds.

Displays next and previous arrows for customers to navigate the Carousel.

Displays navigational dots (points) for customers to navigate the Carousel.

Enables a Heading at the start of the section, before the Carousel. Even if this is enabled, it will only appear if at least one of the following fields are filled: Subtitle, Title or Description.

Optional. Subtitle of the section.

Optional. Title of the section.

Optional. Description of the section.

Optional. Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if Link is added.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Upload a Logo or Image considering the following suggestions:

• Suggested width size: 200px.
• Suggested format: .jpg
• If you upload it in .png format, make sure to optimize it as best as possible without compromising its resolution or risk pixelating.

Choose any content of the store, like categories, pages, products, external links, etc. As it was explained at the beginning of the Logo Carousel component introduction, this will be probably a category of your store.

This text displays when the user hover (passes the mouse over) the Logo. It's useful to improve your store's SEO and also it can help enhance your store and make it compliance for people with hearing disabilities.

Enables a Heading at the start of the section, before the Lookbook gallery of items. Even if this is enabled, it will only appear if at least one of these fields are filled: Subtitle, Title or Description.

Optional. Subtitle of the section.

Optional. Title of the section.

Optional. Description of the section.

Optional. Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link. Mandatory if Link is added.

If enabled, you will be able to customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the subtitle of the section.

Color for the title of the section.

Color for the description of the section.

Color for the text of the link.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Image for mobile devices. We suggest you upload it with a maximum recommended width of 575px and in .jpg format.

Image for desktop devices. We suggest you upload it with a minimum recommended width of 700px and in .jpg format.

Allows you to define how much time will pass before the Pop Up displays.

Allows to select between two Pop Up ways in which this can be displayed, which will defer on what elements will be visible:

1. Image Only: Only the image will be displayed along with the close icon on top of it. A few points on this that need to be considered are:
   • If you have added a Title, it will display before the image.
   • If you have added Content, this will not display. For that, consider choosing the next option.
2. Image + Content: This option will display everything you have added to the Component.

If enabled, the Pop Up container will be transparent and therefore the option Background color will not be applied nor considered.

Allows you to define the maximum width size the Pop Up will have. This will adapt depending on the device type where it's being seen.

The width of the image will depend on the width of the Pop Up element you have defined. Next we leave you a table with estimated widths for you to choose what’s best:

Optional. If you don't add one, the close icon (x) will be positioned on top of everything, at the top right corner of the Pop Up.

Image that can be displayed along with the content or alone, if Type is equal to Image Only.

Allows you to define the position in which the image will be displayed:

1. Before the content (default): The image will be displayed before the content you add and after the Heading section.
2. After the content: The image will be displayed after all the content you add.

Here you can add the content of the Pop Up, which allows HTML markup that can be useful to emphasize certain texts. You can read more about how to add HTML tags in our Tips & Tricks section.

Allows you to define the alignment for the content:

1. Left: All content will align to the left side of the Pop Up window.
2. Centered: All content will align to the center of the Pop Up window.

Choose any content of the store, like categories, pages, products, external links, etc. A link (button) will be displayed at the end of the Pop Up container, after the content and the image, if any of these are added.

Text that displays in the link. Mandatory if a Link has been added.

Displays an arrow at the right side of the link text.

If an image has been added, this will make it clickable.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Color for the background of the Pop Up container.

The Heading is the section that contains the Title and the close icon (x).

This color also affects the close icon (x) when the Title has been added. If not added, the close icon will be white with a black background so it can be completely visible regardless of any content, image or colors you define.

Color for the content of the element.

Color for the "x” symbol of the close icon. Will only apply if Type is equal to Simple.

Background color for the close icon. Will only apply if Type is equal to Simple.

Allows to define the width for the section, where 100% will be the full width of the store's grid. This won't be applied if you have defined that items will be divided into groups.

For static pages (e.g. Terms and Conditions or Legal pages) even if you have defined that items are divided into groups, each accordion will stretch to the 100% available space of the container where it has been placed.

Optional. Allows to add a Title that will display before the accordion(s).

Optional. Allows to add a Description that will display below the Title (if added).

Optional. Choose any content of the store, like categories, pages, products, external links, etc.

Text that displays in the link.

Allows to group items based on topics or subjects. Each group will be displayed in different columns that will contain its respective items. In order to define groups, you just need to add the name for each one in this field and separate them with commas (,), like for example: Shipping,Payments,Other.

By default groups will be placed in 2 columns (if two groups exist) or in 3 columns (if more than two groups exist). With this option you can force that they stack one below the other and that each one take 100% of the available space.

If enabled, you can customize colors with the options you'll find below. If not enabled, it will consider the colors defined in Themes > Visual Editor > Edit Settings > Theme Colors.

Background color of the section. This is the only color that can be modified without having to enable Customize Colors.

Color for the title of the section.

Color for the description of the section.

Color for the link of the section.

Allows to add a margin at the top of the section to separate it from other components.

Allows to add a margin at the bottom of the section to separate it from other components.

Allows to add an inner margin at the top of the section to generate more space between the content and the background.

Allows to add an inner margin at the bottom of the section to generate more space between the content and the background.

Mandatory. Title for the accordion item.

Optional, but ideal. Content (or description) for the accordion item.

Allows to add an image along the content of the accordion item.

Allows to define where the image will display:

If you have defined that items will be grouped by enabling the option Group items, you need to add the Group name here. The item can only belong to one group.