Jumpseller Theme components

General definitions

What’s a Component?

Components are the fundamental building blocks within a theme’s structure. They can include headers, footers, videos, banners, sliders, among other elements and sections that are used to build and design pages on a website. Components can be added, edited, and deleted at the Visual Editor’s Components panel, and they can be reused across different templates and layouts to keep consistency in both design and functionality.

By using Components, website designers can create complex layouts and features in an efficient way with zero to little coding knowledge, since individual components can be easily manipulated and rearranged. This also allows for an easier maintenance of the website, since changes to a component will be reflected across all templates where an specific component is being used.

You can easily adjust components with the help of the Theme Editor Helper, which allows you to edit settings, as well as duplicate, hide, delete and also reorder components directly in the live preview.

You can also click on the “Add component” button to add a component within the place and position you desire.

Each component has its own general settings and some of them have what’s called Subcomponents, which can allow to build a second level of content that can also be individually configured and customized.

All the layouts contains 2 mandatory components which cannot be removed nor hidden, these are Header and Footer. These are displayed at the beggining and at the end of each layout, respectively, which we cover in detail further down in this page.

What’s a Subcomponent?

A Subcomponent is an item that can be added within a Component. For example, the Subcomponent of a Slider is a Slide, while the subcomponent of a Logo gallery is a Logo, and so on with others within a Jumpseller theme.

They all have individual options for you to customize, you can also add as many as you want, re-order them, hide them or delete them. When you duplicate or reuse a component, its Subcomponents will be duplicated as well.

In order for you to understand how to manage them, check the following list:

There will be some Components in which you will see an arrow icon at the left side of the name. That means that it has or it can have subcomponents inside.
When you hover, the arrow will rotate and when clicking on it, the subcomponent’s list will open, allowing you to see all of them.
You can click again in the arrow to close it.
You will also see a button which will allow you to add subcomponents, like for example “Add new Slide”.

Within each subcomponent, when hovering over its name, 3 options will appear at the right side, which will allow you to perform the following actions:

Duplicate

Allows you to duplicate the subcomponent and create a new one, which will contain the exact same content and information.

Delete

Allows you to remove the subcomponent from the list.

Note: Changes won’t be applied on the storefront until you save the changes. So for example, if you deleted the subcomponent by mistake, you can click on the Undo button that’s available at the top right corner of the Visual Editor to add it back again.

Hide

Allows you to hide the subcomponent on the storefront, without the need to delete it.

Theme Templates

A Template is the container in which the entire design of a section is placed. The available templates on Jumpseller are the following:

Home

This is the main and initial page that’s displayed when a visitor enters the domain of your store, like for example your-domain.jumpseller.com or your-domain.com.

Product

Shows all the information from the products of your store. You can create as many templates as you wish to display the information in multiple ways for different types of products.

Basic concepts

Next, we explain some topics, words and concepts that will be used across this article.

Slider/Carousel

A Slider or Carousel it’s a type of element that’s widely used within Components, and it basically displays Items or Subcomponents in a section where these show less or more depending on the type of device where the store is being seen. Elements that become hidden -or not visible- within the browser window, will be able to get visualized through navigational objects such as arrows and/or dots, or by draging the content horizontally.

On the majority of Components within the theme you will find options to customize Carousels, commonly within a group called Carousel settings, which will include the following:

Enable autoplay: Allows for the Carousel to automatically move from one item to the next.
Blocks speed: Allows to define the time that it will take for the previous option to work.
Show arrows: Allows to display arrows below the Carousel for users to control it.
Show arrows on hover: if the previous option is enabled, this one will allow you to define that arrows only display when users “hover” inside the component area. On mouse out, they will hide. This behavior will only be applied on Desktop devices.
Show dots: Allows to display dots/points below the Carousel for users to control it.

Note: On components such as the Slider the group name may be different, but the options will still offer the same functionality, even when some option names may differ as well.

Color Packs

Most of the components have their individual configuration for color customization. With Color Packs you will be able to change the look of an entire component with just one click. These changes aplies to elements such as the background, texts, links and buttons. You can edit, reuse, clone or create as many packs as you want. When you change a color from a bundle, it will be applied to every place where that bundle is being used.

Note: Not all components are available in all Jumpseller themes, just as not all options for each component or subcomponent are the same in all themes. Still, the main behavior of them is quite similar and this documentation will help you to configure them successfully.

Devices

Across this article you will find very commonly the use of Desktop and Mobile concepts. Even when we refer mostly to just these two, it is important to also consider the existence of Tablet devices.

In the following table you can find the detail for the dimensions at which we consider each device:

Device	Width equivalence
Small Mobile	Equal or lower than 414 px
Mobile	Equal or lower than 575 px
Tablet	Between 575 px and 991 px
Desktop	Equal or greater than 992 px
Large Desktop	Equal or greater than 1200 px

Note: This considers mostly the vertical view for Mobile and Tablet devices. So, it may occur that when switching or turning a device horizontally, the width changes and the equivalence in pixel’s size will differ from the ones mentioned in the table above.

Width

Within the article you will see the word Width mentioned a lot and it’s because for several components you will have the ability to set and change the width of sections, so you can create very dynamic layouts. The most common naming conventions that you will find are for example the following:

Small

Themes are constructed and codified with a layout that constrains and adjusts the content of several sections to an specific width, so they can all look and behave similarly and have a solid design aspect. For this, we use a layout where all sections can be divided within 12 columns.

In this case, Small means that the content will stretch at the maximum available space of it, hence all 12 columns, which combined has an amount of 1320px.

Browser or Full Width

This means that the content will stretch, adapt and resize to the maximum available width of the browser where your store it's being seen or visited.

Other width sizes

Within several components you can find width options that allow to choose between:

Small: the content gets constrained to only 6 of the available 12 columns of the grid for Desktop devices, and 7 columns for smaller devices like a Tablet.
Medium: the content gets constrained to only 8 of the available 12 columns of the grid for Desktop devices, and 9 columns for smaller devices like a Tablet.
Large: the content gets constrained to only 10 of the available 12 columns of the grid for Desktop devices, and 11 columns for smaller devices like a Tablet.

Note: For some components you will find also the Extra Large option, which will vary and change the dimensions mentioned above depending on the use case, options and context of the component where it's available. For Mobile devices the content will expand to the entire available width.

Hover

Within this article we will use the terminology hover a lot, which basically means the action of a user by placing the mouse/cursor over an element, object or section.

Overlay

On several components you will find an option that makes reference to the Overlay. This element it’s basically a layer that it’s positioned between the content and the image of a section and allows to generate a higher contrast between both. You can find this option on components (or subcomponents) such as Slides, Banners, Big Banner.

Animations

Within most -if not all- components you will find an option called Enable animation which will allow you to modify and customize the transitions that will be applied. The options available are the following:

Animation type: it allows to define the position from which the component will be animated and appear.
Do the animation once: when enabled, the animation will only happen when you scroll down the page and the component appears. On the contrary, when disabled, the animation will occur when you scroll down and up on the page everytime.
Animation delay: it allows to define the time that will take (in miliseconds) for the animation to happen, once the component enters the viewport (browser window).

Headings

On the majority of Components you will find an option called Enable Heading, which when enabled will display a list of nested options that will allow you to customize elements that are a part of this section.

This section is positioned at the very beginning of components and the options for it are the following:

Subtitle: displays at the start of the Heading and before the Title.
Title: displays between the Subtitle and Description, and in most cases is mandatory.
Description: displays below the Title.
Link: allows to add a link to any content of the store, such as categories, products, pages, external links, etc.
Link text: text that will show within the link.

The appearance of Headings in terms of alignment, among other styles, is defined by several options which can be found in Themes > Visual Editor > Theme settings > Headings. You can read more about them on this article.

List of components and subcomponents

The Header component is present in most theme layouts, while some themes do not show it at the purchasing process pages (Cart, Checkout, Review order and Success).

This component is placed at the very start of the template design. The Header includes in all cases, a Search bar and the main Navigation menu.

Some themes have advanced seetings and options such as the following:

Secondary menus
The ability to display social media links
Contact information details
Sidebars
among others.

For more information about this component, please visit this article where it’s explained in detail.

The Footer component is present in most theme layouts, and like the Header, some themes do not show it at the shopping process pages.

This component is positioned at the very end of the template design, and is usually used to display some of the following elements:

the Logo (or name) of your store
the store description
navigation menus
social media links
a newsletter form
logos for payment methods
among other options that will vary within themes.

For more information about this component, please visit this article where it’s explained in detail.

Accordion

This component is used to display detailed and very diverse information that can go from subjects or topics such as descriptions for some of the features of your store, frequently asked questions, product details, etc.

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

It allows you define the width of the content for the component, based on the following options:

Small: the accordion will be constrained to just 6 of the 12 columns of the theme grid.
Medium: the accordion will be constrained to just 8 of the 12 columns of the theme grid.
Large: the accordion will be constrained to just 10 of the 12 columns of the theme grid.
Grid width: The accordion will cover the complete width of theme grid.

Content alignment

Allows you to define the horizontal position in which the accordion will be placed.

Note: There won't be any visible effect if Grid width has been defined within the previous option.

Enable collapsible items

By enabling this option, when a user clicks on one accordion item the rest will close. On the contrary, when disabled, all items will remain open when clicking on them.

First item opened

Allows to define that the first item of the accordion is opened by default on page load. How or when this first item closes or not will depend on the behavior of the previous option.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

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.

Subcomponent settings

The subcomponent for an Accordion is called Accordion item and you can add as many as you want to provide the necessary information for your clients. The options for this subcomponent are the following:

Title

Title or name for the accordion item.

Note: This field is mandatory.

Content

Here you can add a text or description for the accordion item.

Note: This field is mandatory.

Image

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

Image size

Allows to define the width that the image will have from 10% to 100%. These percentages will depend on the width of the item, which is defined by the width of the entire accordion.

Image position

Allows to define if the image will be placed before or after the content of the item.

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:

Display type

Allows to define how Banners will be displayed within the component, based on the following options:

Carousel: Banners will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: Banners will be displayed within columns, one next to the other horizontally and vertically based on the amount of items per row you define. In mobile devices they will always stack vertically.

Content type

Allows to define the way each Banner will look and what options will be considered within their respective subcomponent settings. The available options are the following:

Image + Content: The image(s) for each Banner will work as a background and the content (e.g. Title) will be placed on top.
Image only: No content will be necessary for you to add, therefore, elements such as the Title will not be displayed. Based on that, any graphic you would like to add, such as texts, shapes, etc., will have to be added within the image construction through softwares like Photoshop, Illustrator, Canva, etc.

Image ratio

It allows to choose the shape of your banner images. This works based on what's known as Aspect ratio, which aims to make all images look proportionally the same so you can show a consistent style among them. The available options are the following:

Landscape: A very wide and not so tall shape, great for providing a panoramic style. It uses an aspect ratio of 16:9.
Portrait: A tall and narrow shape, ideal for providing a vertical display, like posters. It uses an aspect ratio of 3:4.
Rectangular: A balanced, slightly longer shape, which is suitable for most images. It uses an aspect ratio of 4:3.
Square: An equal height and width shape, perfect for images where both dimensions are the same. It uses an aspect ratio of 1:1.

Note: The images that you upload will adapt to the defined shape and fill the available space by positioning images on the center of it horizontally and vertically. This option will only be considered if you have chosen Image + Content within the Content type option.

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 the option 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.

Note: you can find the ideal dimensions in which you need to upload images for Banners on this section of the page.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

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:

Content colors

Allows to choose the Color Pack for each Banner.

Image (desktop)

Allows to upload an image for Desktop devices that have a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices that have a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Image overlay

Allows to define the opacity (transparency) for the Overlay element.

Horizontal image position

Allows to define the horizontal position for any of the images above, only when Content type it's equal to Image + Content within the main component settings.

Vertical image position

Allows to define the vertical position for any of the images above, only when Content type it's equal to Image + Content within the main component settings.

Note: Vertical and horizontal positioning is most noticeably visible when images are larger than the defined Image ratio, like for example if you opt for a Portrait ratio shape and the image you upload has a rectangular dimension.

Horizontal content position

Allows to define how the content of the banners will position within the x axis (horizontal).

Vertical content position

Allows to define how the content of the banners will position within the y axis (vertical).

Content options

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

Subtitle: Optional. Allows to display a small text before the Title of the banner.
Title: Allows to display a title for the banner. Try to make it brief so it doesn't collapse the available space.
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.
Show link as button: If enabled, the button will be displayed. If disabled, it will hide but the Banner will still be clickable as a whole.
Use outline button style: Allows to show the link button with a border around it.
Show arrow in button: Allows to display an arrow at the right side of the button text.
Enable as external link: If enabled, the link will open in a new browser tab.

Note: Subtitle, Title and Link as Button will only display and be visible if Content type it's equal to Image + Content. For the case of Image only, you will only need to consider the options Image (desktop and mobile), Link and Link text.

This component allows you to display a section where it’s purpose is to feature and stand out something about your store, like for example:

Showcase a feature of your store.
Feature a category of your store that has a very big relevance.
Feature a product that you want clients to take a look or perhaps it has a very good discount.

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 width for the entire component, based on the following options:

Default: the option defined at Theme settings > Design > Theme styles > Maximum container width will be applied.
Small: it expands the section to a maximum width of 1320px.
Medium: it expands the section to a maximum width of 1620px.
Large: it expands the section to a maximum width of 1920px.
Extra large: it expands the section to a maximum width of 2220px.
Full width: it expands the section to the maximum width of the browser where the store it’s being seen.

Height

Allows to define the height for the entire component, based on the following 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.

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

Image (desktop)

Allows to upload an image for Desktop devices with a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices with a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Image overlay

Allows to define the opacity (transparency) for the Overlay element.

Horizontal image position

Allows to define the horizontal position within the available space for any of the images above.

Vertical image position

Allows to define the vertical position within the available space for any of the images above.

Note: Vertical and horizontal positioning is most noticeably visible when images are larger than the section dimension.

Content type

Allows to define the way the component will look and which options will be considered within their respective settings. The available options are the following:

Image + Content: The image(s) will work as a background and the content (e.g. Title) will be placed on top.
Image only: No content will be necessary for you to add, therefore, elements such as the Title will not be displayed. Based on that, any graphic element that you would like to add, such as texts, shapes, etc., will have to be added within the image construction through softwares like Photoshop, Illustrator, Canva, etc.

Note: When chosing Image only you will only need to consider the following options within the component settings: Image (desktop and mobile), Link and Link text.

Content alignment

Allows to define the alignment for the content of the component.

Horizontal content position

Allows to define the position for the content of the component within the x axis.

Content options

Next, you will find several options for adding content to the component:

Subtitle: Optional. Allows to display a small text before the Title of the section.
Title: Allows to display a title within the section. Try to make it brief so it doesn't collapse the available space.
Description: Optional. Allows to display a text after the Title to provide more context on what the section is about.
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.
Show link as button: If enabled, the button will be displayed. If disabled, it will hide but the section will still be clickable as a whole.
Use outline button style: Allows to show the link button with a border around it.
Show arrow in button: Allows to display an arrow at the right side of the button text.
Enable as external link: If enabled, the link will open in a new browser tab.

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. This will basically determine the colors for the texts inside of it, such as the Title.

Note: The ideal suggested dimensions for the image(s) you can upload can be found this section of the page.

Contact form

This component allows you to display the store’s Contact form on different layouts and templates of the theme. There are a few considerations that you need to be aware of when using it:

It’s only possible to have 1 within each page. So for example, you cannot add it twice on the Home page of your store.
When users click on the Submit button of the form and the message is successfully sent, it will redirect them to the Contact page of your store, so make sure that this component is added and visible on that layout as well.

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:

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

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.

Contact information

This component allows you to display a section with contact details from the location set as Main/Default within your store’s admin panel, which you can configure by going to Settings > Checkout > Locations.

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:

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Content alignment

Allows to define the alignment for the contact details of the component. The alignment for the Heading section of the component is defined within your store's admin panel, by going to Themes > Visual Editor > Theme settings > Headings.

Show contact email

Allows to display the email from the location.

Show contact phone

Allows to display the phone number from the location.

Show WhatsApp number

Allows to display the WhatsApp number defined within your store's admin panel, by going to Settings > General > Preferences > Social Media.

Show store's main address

Allows to display the address from the location. This will be a link to Google Maps, which will open on a new browser tab for Desktop devices or the Google Maps app on mobile devices.

Show social media links

Allows to display the social media links that can be added within your store's admin panel, by going to Settings > General > Preferences > Social Media.

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.

Contact map

This component allows you to display a Google Maps’s styled Map, that will show the address from the location set as Default/Main within your store’s admin panel, which you can configure by going to Settings > Checkout > Locations.

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:

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Map size

It allows you define the width of the Map, based on the following options:

Grid width: The map will cover the complete width of theme grid.
Small: the map will be constrained to just 6 of the 12 columns of the theme grid.
Medium: the map will be constrained to just 8 of the 12 columns of the theme grid.
Large: the map will be constrained to just 10 of the 12 columns of the theme grid.

Map position

Allows you to define the horizontal position in which the Map will be placed.

Note: This will have no effect if Grid width has been defined within the previous option.

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.

Code

Within this field you can add the code you want to be displayed in the store.

Note: This field does not support the use of liquid tags.

Width

Allows to define the width for the content of the section, based on the following options:

Grid width: The content will stretch to the maximum width of the theme grid, which is of 1296px.
Full width: The content expands to the maximum width of the browser where the store it’s being seen.

Top margin

Allows to control the upper margin of the section.

Bottom margin

Allows to control the lower margin of the section.

Media with text

This component allows you to create dynamic layouts on your store through the use of images or video and content, in which you can define how these are gonna be displayed within the section.

To better understand how it works, we will refer to Content to the options Subtitle, Title, Text and Link; and we will refer to Media to the Images or the Video which you can add within the 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:

Columns order

Allows to define the order for the Content and Media, and how they will be presented within the component for Desktop devices, based on the following options:

Content / Media: Content will be positioned at the left, while Media on the right.
Media / Content: Media will be positioned at the left, while Content on the right.

Note: both sections will use 6 columns of the total of 12 columns within the grid of the theme.

Respect columns order in Mobile

Since the previous option defines the order for Desktop devices, this one allows to respect that order for Mobile devices as well.

Image (desktop)

Allows to upload an image for Desktop devices that have a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices that have a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Video

Allows to add a video from YouTube or Vimeo by copy/pasting the Embed Code within the sharing options on each platform.

Note: Once you add a Video it will have predominance, so even if you upload any of the images available above, they will not be displayed.

Video ratio

Allows to define the shape in which the video will be displayed, which is based on the following options:

4 / 3: This is basically a rectangular shape.
16 / 9: This is basically a landscape shape.

Content aligment

Allows to define the alignment for the Content of the component.

Vertical position

Allows to define how the Content and Media will align based on the y axis, in which the one that's taller will determine the position of the other.

Content options

Next, you will find several options for the Content of the component:

Subtitle: Optional. Allows to display a small text before the Title.
Title: Allows to display a title, which has more relevance than the rest in terms of size.
Text: Allows to add a text or description to provide more context on what the section is about.
Link button: Allows to add a button-styled link to any content of the store, such as categories, products, pages, etc.
Link text: Text that will be displayed within the button.
Use outline button style: Allows to show the button with a border around it.
Show arrow in button: Allows to display an arrow at the right side of the button text.

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.

Featured Category

This component allows to display products from any category of your store.

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:

Featured category

Mandatory. Here you must select a category in order for the component to display products.

Quantity of items to display

Allows to define the amount of products that will be displayed within the component. The order in which products will be shown it's gonna be based on the order they have within the category configuration, so you will need to edit the category's product list, considering the limit that you have defined within this option.

You can see the products that belong to an specific category by following any of the ways detailed next:

Option 1

Go to Products > All products to see the list of products of your store.
At the top of the list you will find three options, click on the middle one and use the filter that's available there.
Search for the category you want in order to display its products.
Then you can reorder them by clicking and holding the mouse in order to drag them up or down.

Option 2

Go to Products > Categories and choose the one you want by clicking on its name.
Inside the category page, at the right side of the upper toolbar click on the three dots.
A dropdown menu will open and you will see the View products link, which will take you to the same page of Option 1, but already filtered by the category you have chosen.

Display type

Allows to define how products will be displayed within the component, based on the following options:

Carousel: products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Featured image

This group contains several options to customize the image(s) that can be displayed within the component and along with the products.

Display featured image

It allows you to show the image of the category you have selected within the Featured category option. If the category doesn't have an image, you will need to upload at least one of the images available below.

Featured image (desktop & mobile)

These two options allow you to upload images for Desktop and Mobile devices, respectively, and they will be displayed based on the following conditions:

Desktop: will show for Desktop devices that have a width equal or higher than 768px.
Mobile: will show for Mobile devices that have a width equal or lower than 767px.

Note 1: Any of these two images will override the one from the category.

Note 2: if you upload just one of them, it will be displayed for all devices.

Show Category information

This option allows you to display information of the selected category on top the image(s). By enabling it the following ones will become available:

Image overlay: allows you to define the opacity (transparency) for the Overlay element that displays between the image(s) and the content.
Custom category name: allows you to replace the original name of the selected category.
Content desktop alignment: allows you to define the alignment for the content on desktop devices that have a width equal or higher than 768px.
Content mobile alignment: allows you to define the alignment for the content on mobile devices that have a width equal or lower than 767px.
Content vertical position: Allows you to define the position of the content on the "y" axis (vertical).
Featured Image Content colors: Allows to choose the Color Pack that will be applied to all the content.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Note: for this component the Link option allows to just enable the respective link that will automatically take to the selected Category.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Enable animation

By enabling this option you will be able to customize the transitions that will be applied to the component.

Note: You can read more about these options on the Basic concepts section within this page.

Featured Products

This component allows you to display products that have been marked as Featured within the store. Next, we explain how you can feature and reorder them:

Feature your products

Go to Products > All products and chose a product from your store by clicking on its name and/or image.
Once inside the product configuration page, at the right side panel you will find the option called Featured product.
Click on the available checkbox and save the change.

List of featured products

Go to Products > All products and before list of products you will find three options. Click on the one that’s far at the right side.
A dropdown menu will display and select the one called Featured.
The page will load and filter only the products that are marked.
In here you can reorder them by clicking and holding the mouse in order to drag them up or down.
To remove a product from this list, you just need to access its settings and disable the checkbox that was explained above.

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:

Quantity of items to display

Allows to define the amount of products that will be displayed within the component. The order in which products will be shown it's gonna be based on the order they have within the Featured products list that was explained above, so you will need to edit that list, considering the limit you have defined within this option.

Display type

Allows to define how products will be displayed within the component, based on the following options:

Carousel: products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Featured Reviews

Note: This component works in hand with the Request Product Reviews feature, which is only available for PRO plans and above. If you don’t have any of those plans it won’t work even when the component is added within your theme. You can read more about it in this article.

This component allows you to display reviews that your customers have added to your products and that have been marked as Featured. In order for this to properly work, follow the next steps:

First you need to have enabled the Product Reviews email, which can be done within your store’s admin panel by going to Settings > General > Emails.
Once that’s done and you already have received reviews, go to Products > Reviews to see the full list.
Click on any of them to access the settings, and once inside at the right side, you will find the checkbox that will allow you to feature them.

Note: Consider that for a featured review to display within the component, the status needs to be Published.

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:

Quantity of items to display

Allows to define the amount of reviews that will be displayed within the component. The order in which they show will be by showing the latest ones that were marked as Published and Featured.

Display type

Allows to define how reviews will be displayed within the component, based on the following options:

Carousel: reviews will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: reviews will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

Number on columns on desktop

Allows to define the amount of reviews per horizontal row that will be displayed on Desktop devices. The visible amount of reviews on smaller devices will vary based on what you have defined at the Display type option, as it follows:

Carousel

Device width	Amount of reviews (within view)
Equal or greater than 992px	Defined amount
Less than 992px	3 reviews
Less than 768px	2 reviews
Less than 576px	1 review

Grid

Device width	Amount of reviews (per horizontal row)
Equal or greater than 992px	Defined amount
Less than 992px	2 reviews
Less than 576px	1 review

Reviews alignment

Allows to define the alignment for the content of all reviews within the component.

Note: The review image will move accordingly to the selected option.

Display product image

Allows to show or hide the image of the product for all reviews within the component.

Show review date

Allows to display the date of the reviews, below the customer name (if enabled).

Review date format

When enabling the previous option, this one will become available and it allows to define the format of the date for all reviews within the component

Show customer name

Allows to display the name of the customer that gave the review.

Customer name

Allows to define how the name of the customer will be displayed, based on the following options:

Full name: will display both name and surname, which the customer added in his account.
First name: will display only the first name, omiting the surname.

Show Quote icon

Allos to display a "quote" icon along with the content of the review. The position of this icon will change based on what you choose at the Reviews alignment option.

By enabling this option the following ones will become available to be used:

Icon type: Allows to define which type of icon will be displayed: Opening or Closing.
Icon size: Allows you to define the size (in pixels) for the icon.

Apply Card style to reviews

Allows to apply a "card" or "boxed" style to all reviews. The following options will become available only if this is enabled:

Enable Card border: displays a border (or line) all around the reviews.
Card border opacity: allows to adjust the opacity (transparency) for the border.
Card content colors: allows to choose the Color Pack for all reviews.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

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.

Note: This won't affect the reviews if the option Apply Card style to reviews is enabled.

Handpicked Products

This component allows you to display any product from your store, regardless of attributes such as its status (e.g. Featured) or the relation to any category. It works by a subcomponent called Store product, which we explain further below.

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:

Quantity of items to display

Allows to define the amount of products that will be displayed within the component. The order in which products will be shown it's gonna be determined by the order in which you add them.

Note: If you add more products than the defined amount, they won't be visible at all within the component.

Display type

Allows to define how products will be displayed within the component, based on the following options:

Carousel: products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Subcomponent settings

As it was mentioned previously, the subcomponent for the Handpicked products is called Store product. You can add as many as you want, but only the ones that are within the defined limit at the Quantity of items to display option of the component will be visible.

Within the component list you will see the “Add new Store product” button, which will add a subcomponent. When clicking on its name you will only see one option inside its settings called Product, in which you will need to choose the product that you want to display.

Note: You can read more about Subcomponents on this section of the page.

Image

This component allows you to display an image, one for Desktop and another for Mobile devices, with some options to define how it looks:

Image (desktop)

Allows to upload an image for Desktop devices that have a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices that have a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Width

Allows to define the width at which the image of the component will be restricted to.

Note: You can read about how each option within this behaves on this section, under the Other width sizes part.

Horizontal content position

Allows to define the position in which the image will be placed on the “x” axis (horizontal).

Note: This won’t be visible if you have selected Grid width or Full width within the Width option.

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, which will basically apply a color on the background.

Instagram

This component allows you to display the latest posts from the Instagram account that can be connected to your store.

If you don’t have it connected yet, please follow the next steps to achive it:

First, make sure that you are logged in to the Instragram you want to connect in the same browser where you have your store’s admin panel opened.
On your store’s admin panel go to Settings > General > Preferences > Social Media and click on the “Edit information” button that’s within this section.
Inside the new page you will be taken, click on the Instagram Login button that’s further down at the end.
You will be redirected to a new page where you need to accept and authorize the connection.
Once the connection is approved, your posts will be displayed automatically on the component.

Note: It may happen that at times you Instagram account can be disconnected, which is mostly for security purposes. Whenever that occurs, you can just follow the steps above and connect it back again.

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:

Number of Instagram posts

Allows to define the maximum amount of posts to show within the component.

Display type

Allows to define how posts will be displayed within the component, based on the following options:

Carousel

Posts will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it. The quantity of visible posts for this option will change depending on the browser width, based on the definitions from the following table:

Device width	Amount of visible posts
Equal or greater than 1201px	6 posts
Equal or lower than 1200px	5 posts
Equal or lower than 991px	4 posts
Equal or lower than 767px	3 posts
Equal or lower than 414px	2 posts

Grid

Posts will be displayed within columns, one next to the other horizontally and vertically. The way columns arrange for this option will change depending on what you choose within the Number of Instagram posts option and the browser width, based on the definitions from the following table:

Nº of Instagram posts	>= 992px (Desktop)	>= 768px (Tablet)	>= 576px (Small tablet)	<= 575px (Mobile)	<= 414px (Small mobile)
6 posts	6 columns / 1 row	3 columns / 2 rows	3 columns / 2 rows	3 columns / 2 rows	2 columns / 3 rows
8 posts	8 columns / 1 row	4 columns / 2 rows	4 columns / 2 rows	2 columns / 4 rows	2 columns / 4 rows
12 posts	6 columns / 2 row	4 columns / 3 rows	3 columns / 4 rows	3 columns / 4 rows	2 columns / 6 rows

Remove space between posts

Allows to define it posts will have a space between them, which can provide a way to make them look different depending on the style your looking to apply to the theme.

Title

Text that shows before the Instagram account name that's automatically displayed within the component (before the posts) once you connect it.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Latest Blog Posts

This component allows you display a collection or grouped pages from your store. Even when we will refer to this mainly for a “Blog”, in reality you can extend and use this to basically show anything you want.

To understand how this component is connected to the pages within the store, you must be aware of the following:

By going to the store’s admin panel within Customization > Pages > All Pages, you will notice at the left side a section called Categories.
Here you can create as many categories as you want, but upon creation, Jumpseller stores comes already with two: Blog and Post.
Blog for the purposes of the component isn’t relevant.
Post is the category that allows you to link several pages, so they all display within the same layout (Blog page).
At the right side you will find the list of pages, which also comes with two already created: Blog and Blog post.
Blog is the page that will group and display all Posts.
Blog post is the one used to display the content of the post or article.

Next, we explain how you can link a page to a category, in this case, for the Blog:

Go to the list of pages and either create a new page or enter one that you already have.
Inside the page settings add its respective content, such as Title and body.
Then, scroll down the page until you find the Properties section, in which you will need to focus on two options:
1. Categories: Here you need to choose the one called Post.
2. Template: Here select the template that has the same name than the category, so it inherits the necessary style and layout components.
Then save your changes and you can click on the “View” link at the top right corner to see how it looks.
Additionally, if you haven’t changed the permalink of the Blog page, you can view it either by going to its settings and clicking on the “View” link or by openening a new browser tab and write the page URL, like for example store-domain.jumpseller.com/blog.
Once there you will be able to see all Posts that are linked to your Blog.

Note: You can perform these actions and follow the same steps to achieve something similar to any other page you may want to create, like for example a “News” page.

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:

Page category

Allows to define the category based on which pages (posts) will be displayed within the component. This dropdown menu will show all categories that you have created at your store's admin panel.

Quantity of items to display

Allows to define the amount of posts that will be displayed within the component. The order in which posts will be shown it's gonna be determined by the order defined within the Blog page settings. To know how to control this follow these steps:

Go to Pages > All Pages in your store's admin panel.
On the Categories panel at the left side, place your mouse over the Post category name.
Two icons will show at the right side of the category name. Click on the first one and a pop up window will open.
There you will find two options. The one called Category order will allow you to define how posts will be displayed within the component, which will also affect the Blog page.
Choose the option you want and click on the Update button to save the change, or on the Cancel button to dismiss it.

Display type

Allows to define how posts will be displayed within the component, which will be affected by the options Number of columns on desktop and Number of columns on mobile, based on the following options:

Carousel

Device width	Amount of visible posts
Equal or greater than 992px	`Number of columns on desktop`
Equal or lower than 991px	2 posts
Equal or lower than 575px	`Number of columns on mobile`
Equal or lower than 414px	1 post

Grid

Posts will be displayed within columns, one next to the other horizontally and vertically. The way columns arrange for this option will be according to the definitions from the following table:

Desktop (Equal or greater than 992px)	Tablets (Equal or greater than 576px)	Mobile (Equal or lower than 575px)	Small mobile (Equal or lower than 414px)
`Number of columns on desktop`	2 columns	`Number of columns on mobile`	1 column

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Note: for this component the Link option will automatically be filled with a link to the Blog page of your store. You can change it so it takes to another one you want.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Latest Products

This component allows you to display the most recent products that have been created and/or added. The order in which they display is automatic, and will be based on the order you created them within your store’s admin panel.

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:

Quantity of items to display

Allows to define the amount of products that will be displayed within the component.

Display type

Allows to define how products will be displayed within the component, based on the following options:

Carousel: products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Line Divider

This component allows you to add a line in order to create a more notorious division between components and sections within the theme. The options for this component are the following:

Width

Allows to define the width that the line will have, based on the following options:

Default: the option defined at Theme settings > Design > Theme styles > Maximum container width will be applied.
Small: it expands the section to a maximum width of 1320px.
Medium: it expands the section to a maximum width of 1620px.
Large: it expands the section to a maximum width of 1920px.
Extra large: it expands the section to a maximum width of 2220px.
Full width: it expands the section to the maximum width of the browser where the store it’s being seen.

Remove right and left space

Allows to define that the line doesn't present a space at the right and left sides of the section. By doing so, the line will reach to both edges of the browser.

Line thickness

Allows to adjust the thickness of the line, so you can make it more notorious if necessary.

Line opacity

Allows to control the opacity (transparency) of the line. The color for this will consider the Main text option of the Color Pack from the component.

Top margin

Allows to control the upper inner margin of the section.

Bottom margin

Allows to control the lower inner margin of the section.

Content colors

Allows to choose the Color Pack for the component.

Locations

This component allows you to display the Locations that you have added in your store’s admin panel within Settings > Checkout > Locations. The options for you to customize this component are the following:

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Locations to display

Allows to define which type of locations will be displayed within the component, based on the following options:

All locations: the entire list of locations you have added will show.
Pickup locations: only the ones marked as Pickup will show.

Note: The Local Pickup feature it’s only available to be used when using the Checkout version 2, which you can check by going to Settings > Checkout > Preferences > Checkout version within your store’s admin panel.

Amount of locations per row

Allows to define the amount of columns for locations to be displayed within the component. The way in which they arrange on the different devices will be based on the definitions of the follow table:

Device / Option value	3 columns	2 columns	1 column
Desktop (Equal or greater than 992px)	3 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically
Tablets (Equal or greater than 576px)	2 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically
Mobile (Equal or lower than 575px)	1 column, stacked vertically	1 column, stacked vertically	1 column, stacked vertically

Content alignment

Allows to define the alignment for the content of all locations within the component.

Location's information options

The following options allow to define which locations details will be visible within the component:

Show location email: show or not the email of all locations.
Show location phone: show or not the phone of all locations.
Show location address: show or not the address of all locations.
Show location details: allows to show a “See more details” link at the end that will open a pop up window, which will display all the details of the location.
Show location map: allows to show or not a Google Map inside the pop up window, based on the address of each location.

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.

Logo Gallery

This component allows you to display a collection of images, which can be for example logos from brands you sell on your store, partner companies, featured products or basically whatever you want to communicate through the use of images.

It works by adding a subcomponent called Logo, for which you can add as many as you need.

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:

Display type

Allows to define how Logos will be displayed within the component, based on the following options:

Carousel: logos will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: logos will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Number on columns on desktop

Allows to define how logos will be displayed on Desktop devices, which will consider the ones that have a width equal or greater than 768px, based on what you have defined at the Display type option, as it follows:

Carousel

This option will consider the amount of logos within the view of the Carousel:

Device width	Amount of logos
Equal or greater than 1201px	Defined amount
Equal or greater than 992px	4 logos
Equal or greater than 768px	3 logos

Grid

This option will arrange logos on columns within horizontal rows, based on the selected amount:

Option value	Desktop (Equal or greater than 992px)	Tablets (Equal or greater than 768px)
8	8 columns	4 columns
7	7 columns	4 columns
6	6 columns	4 columns
5	5 columns	4 columns
4	4 columns	4 columns
3	3 columns	3 columns
2	2 columns	2 columns

Number on columns on mobile

Allows to define how logos will be displayed on Mobile devices, which will consider the ones that have a width equal or lower than 767px, based on what you have defined at the Display type option, as it follows:

Carousel

This option will consider the amount of logos within the view of the Carousel:

Device width	Amount of logos
Equal or lower than 575px	Defined amount
Equal or greater than 414px	Always 2 logos

Grid

This option will arrange logos on columns within horizontal rows, based on the selected amount:

Option value	Mobile (Equal or lower than 767px)
3	3 columns
2	2 columns
1	1 column

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Subcomponent settings

As it was mentioned before, the subcomponent for the Logo Gallery is called Logo and you can add as many as you want. The options for this subcomponent are the following:

Image

Allows to upload the image or logo.

Link

Allows to add a link to any content of the store, such as categories, products, pages, external links, etc., in which case the Logo will be clickable.

Link text

Text that will be visible when a user "hovers" on the image.

Enable as external link

If enabled, the link will open in a new browser tab.

This component allow users to subscribe to your store, which will create them as Customers within your store’s admin panel database. You can review the full list by going to Customers > All Customers.

Once a user subscribes there can be a few actions that will trigger or occur:

The customer will be created within the database just with the email.
If you have the Account enabled option enabled, within Settings > General > Emails > Transactional Emails, the user will receive an email to confirm the subscription.
Users will be able to create a customer account by clicking on the Reset My password link available at the Login page of your store (e.g. your-domain.jumpseller.com/customer/login). They will be provided with this link once they confirm the subscription.
If you have the New customer option enabled, within Settings > General > Emails > Administrator Emails, you will receive a notification when the user successfully confirms the subscription.
If you have the CAPTCHA in customer registration option enabled, within Settings > General > Spam Protection, users will mandatory have to complete a task that they will be asked by the Google reCAPTCHA tool in order to subscribe.

Note: Even when it’s a bit obvious, a user won’t be able to subscribe more than once with the same email, as customer’s accounts are managed by that value.

If you want to do more and take advantage of what this component provides, you can for example install the Mailchimp App to sync your customer’s list and send marketing emails. You can read more about it on the following links:

The available options for you to customize this component are the following:

Content alignment

Allows to define the alignment for the content of the component (Title, Description) and the newsletter form.

Note: This will affect the placement in which the form is positioned.

Title

Allows to add a title for the component, which displays at the start of the section.

Description

Allows to add a text or description below the title. Can be useful to give context and/or incentivize users to subscribe by, for example, providing some key benefits for doing so.

Email field placeholder

Allows to define the text that’s visible within the email field.

Button text

Allows to set the text for the button of the form.

Disclaimer text

Allows to display a text below the form, which can be useful for example to provide information to users that they’re accepting the terms of your store by subscribing, or anything you want.

Enable Background image

Allows to display a background image behind all the component content. When enabled, the following options will be come available:

Background image (desktop)

Allows to upload an image for desktop devices with a width equal or higher than 576px.

Background image (mobile)

Allows to upload an image for mobile devices with a width equal or lower than 575px.

Image overlay

Allows to change the opacity for the Overlay element that's placed between the background image and the component content.

Note: If you don't want the Overlay to be displayed, just set the opacity to zero (0).

Horizontal image position

Allows to define the position of the image within the "x" axis (horizontal).

Vertical image position

Allows to define the position of the image within the "y" axis (vertical).

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.

Product template

This component is the one that allows you to display and customize the main section of the page of your Products within the theme. It works by using several subcomponents that display different information and details of each product, in which you can reorder, hide (1) or delete (2) them.

Note (1): All subcomponents within this component have the ability to be hidden.

Note (2): Some subcomponents have the ability to be removed or deleted, while others cannot, as they are required for the product page funcionality.

For the purposes of this component, we will refer as Content to the column that contains all the details of the product, such as the Name, Price, Form, etc.; On the other hand, we will refer as Gallery to the one that displays the product image(s).

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:

Content alignment

Allows to define the alignment for the Content of the component.

Image Gallery options

The following set group of options will allow you to customize certain aspects of the component's Image Gallery:

Image dimension

Allows to define how images will be presented within the component, based on the following options:

Landscape: A very wide and not so tall shape, great for providing a panoramic style. It uses an aspect ratio of 16:9.
Portrait: A tall and narrow shape, ideal for providing a vertical display, like posters. It uses an aspect ratio of 3:4.
Rectangular: A balanced, slightly longer shape, which is suitable for most images. It uses an aspect ratio of 4:3.
Square: An equal height and width shape, perfect for images where both dimensions are the same. It uses an aspect ratio of 1:1.

Image display

Allows to define how the images of your products will adapt to the available space related to the dimension selected above, based on the following options:

Resize: Images will adapt as much as possible to the dimension of the available space.
Crop: It will fill the entire area space available with the majority of the product image.

Image desktop width

This option allows you to define the width at which images within the gallery will Resize or Crop.

The dimension that can be set up here has a direct relation to the Maximum container width that you define within Theme settings > Design, as you will need to increase the amount within this option if you choose a container's width higher than Grid width.

Show Gallery thumbnails

Allows to display a secondary Gallery with thumbnails of all the product's images along with the main one, with which users will be able to click in order to view them. It will have left and right arrows to control it as well.

Note: If this option is disabled, the main Gallery will display arrows inside of it, for users to control it and see more images.

Gallery thumbnails desktop position

Allows to define the position for the Gallery thumbnails on Desktop devices that have a width equal or greater than 992px. For devices width a width lower than that it will automatically be placed below the main one.

Enable zoom on images

Allows for users to be able to zoom images of the product when "hovering" over them. For this is important that you consider uploading images in a bigger dimension that the one displayed on the storefront.

Zoom amount

Allows you to define the amount of zoom applied to your product images, if the previous option is enabled.

Sticky product image

Allows for the image to stick at the top of the theme Header (if fixed as well) and/or to the Browser, so it follow users as they scroll down the page.

You can read more about the proper size and dimensions for images in this section of the page.

Design options

The following group of options will allow you to customize certain design aspects of 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.

Note: This will be applied to the entire section and all of the product details.

Enable animation

By enabling this option you will be able to customize the transitions that will be applied to the component.

Note: You can read more about these options on the Basic concepts section within this page.

Product template subcomponents

The Product template component works by allowing you to choose which content you want to display in it, through several subcomponents that are the details of the product. For each one of them you will have the ability to edit, move, hide and/or delete. The ones available to be used are the following:

Note: Some of these subcomponents won’t have any options inside their settings, because they are mainly used to display information. Therefore, the way they look and/or behave can be managed within the Theme settings section of the Visual Editor, as they are general options that affect other pages, components or layouts within the theme.

Attributes

Allows to display the product SKU and Brand, along with other options to customize how they will look and behave:

Note: If a product does not have any of these attributes, nothing will be displayed. On the contrary, if a product have both attributes and you have opted to display them, they will be separated by a vertical line. The order will always be first SKU and then Brand.

Show before product image on Mobile

By default the Attributes will be positioned below/after the product Gallery on Mobile devices. This option allows to change the behavior and place them before.

Show product SKU

Allows to define if the product SKU will be displayed or not.

Show text before SKU

Allows to display a text before the product SKU, like for example "SKU: 1234".

Show product brand

Allows to define if the product Brand will be displayed or not.

Title

This subcomponent allows to display the product name, which has the following options to customize it:

Show before product image on Mobile

By default the Name/Title will be positioned below/after the product Gallery on Mobile devices. This option allows to change the behavior and place it before.

Show title in uppercase

Allows to force the title to be displayed in All Caps (uppercase), even when it wasn't written nor defined like that. e.g. PRODUCT NAME

Price

This subcomponent allows to display the price of the product, which has the following options to customize it:

Show before product image on Mobile

By default the Price will be positioned below/after the product Gallery on Mobile devices. This option allows to change the behavior and place it before.

Price display

Allows to define how the prices will be displayed when the product has a visible discount (promotion), based on the two following options:

Horizontal: Prices will align one next to the other, horizontally.
Stacked: Prices will stack one below the other, vertically.

Show discount label

Allows to display a discount "tag" or "label" at the right side of the price. The colors for this tag will be from the ones you can define at Themes > Visual Editor > Theme settings > Colors.

Note: the discount tag will also be affected by the Price display option.

Show promotions's date limit message

Allows to display a message below the price(s) mentioning that there's a date at which the discount (promotion) expires or ends. It will only work if the promotion has a Date Limit defined on its settings.

Product review stars

This subcomponent allows to display the rating review score along with the rating stars for a product that has customer reviews.

Note: the Request Product Reviews feature it's only available for PRO plans and above. So, even when you have this subcomponent added but you don't have the necessary plan, it will display nothing. Same will happen for a product that doesn't have any reviews.

Stock

This subcomponent allows to display the Stock of the product. How this will look and behave is explained on this article.

Product form

This subcomponent allows to display the Form with which users can add the product to the cart.

How it will look and behave, and which are its options and elements is explained on this article.

Wishlist

This subcomponent allows you to display the button with which users can wishlist a product to their customer account list.

Note: Users will only be able to wishlist a product once they are logged in.

Product Stock Locations

This subcomponent allows to display a button, which on click will open a lateral panel from the right side of the browser. This panel will show the list of locations and their respective stock statuses.

The options to customize it are the following:

Title: allows to define the title that is visible on the lateral panel that's opened when clicking on the button.
Button icon: allows to define the icon at the left side of the button text.
Button text: text that displays inside the button that opens the panel.

Other options for this subcomponent are handled within Themes > Visual Editor > Theme settings > Product form, which are explained in detail on the following article.

Description

This subcomponent allows to display the product Description that can be added to all products on your store.

The options to customize it are the following:

Title

Allows to display a title before the description.

Collapse description

Allows to restrict the height of the product description, based on the threshold of the option below. This is useful if your products have long descriptions that for example generate a noticeable blank space between the Gallery and Content columns.

When enabled, a link with the text "Read more" will be displayed at the bottom end of the description. On click, the description will expand to its maximum available height, in which case the link text will change to "Read less". On a second click, the description will collapse again.

Collapse height threshold

Allows to define the height at which the description will be collapsed, only if the previous option is enabled.

Product Accordion

This subcomponent it's similar to the Accordion component mentioned previously in this page. It allows to add different items with information, but in this case, specifically for the product page. It has less option than the other, because all its attributes like colors and spaces are obtained from the Product template parent component.

The options for you to customize it are the following:

Enable collapsible items

By enabling this option, when a user clicks on one accordion item the rest will close. On the contrary, when disabled, all items will remain open when clicking on them.

First item opened

Allows to define that the first item of the accordion is opened by default on page load. How or when this first item closes or not will depend on the behavior of the previous option.

For each subcomponent called Product Accordion item you will find the following options to customize them:

Icon

Allows to add an icon which will display at the left side of the item title.

Title

Mandatory. Allows to define a title for the item.

Content

Allows to add a text or description to the item, which will be visible when it's opened.

Link

Allows to display a link to any page of the store.

Link text

Text that will be displayed within the link.

Show arrow in Link

Allows to display an arrow at the right side of the link text.

Enable as external link

If enabled, the link will open in a new browser tab.

Image

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

Image size

Allows to define the size of the image based on its width, on percentage ranges from 10% to 100%.

Image position

Allows to define the position in which the image will be displayed within the item.

Product custom fields

This subcomponent allows you to display all the enabled custom fields that you have added to the products of your store. The options to customize it are the following:

Title

Allows to define the title that will come before all the fields and their content.

Display type

Allows to define how the fields and their content will be displayed, based on the following options

List: Fields will be displayed one below the other in a list.
Table: Fields will be displayed within a table-styled section, with borders around them.

Attachments

This subcomponent allows you to display all the files that you have uploaded to a product, within a table-styled section, for users to download them. The options for you to customize it are the following:

Title

Allows to define the title that will come before all the attachment's links.

Product share

This subcomponent allows to display a list of links that will allow users to share the product.

The options to customize it are the following:

Title: allows to define the title that goes along with the links, and for the button that displays on Mobile devices.
Show Facebook: allows for the product to be shared on Facebook.
Show 𝕏: allows for the product to be shared on 𝕏 (formerly Twitter).
Show WhatsApp: allows for the product to be shared through WhatsApp.
Show Email: allows for the product to be shared through Email, which will open the app or software on the device the user it's visiting the store.
Show Copy to clipboard: allows for users to copy the product URL to the device clipboard, so they can share it however they want.

Important: On Mobile devices this will change to a single button, which upon click will open the user's device native options for sharing.

Line divider

This subcomponent allows to add a divisory line, which can be useful to generate a clearer separation between the content of the main component.

The options to customize it are the following:

Line thickness: Allows to adjust the thickness of the line, so you can make it more notorious if necessary.
Line opacity: Allows to control the opacity (transparency) of the line. The color for this will consider the Main text option from the component's Color Pack.
Top margin: Allows to control the upper inner margin of the section.
Bottom margin: Allows to control the lower inner margin of the section.

Custom code

This subcomponent allows you to add custom code within the product page, which can be useful for external apps or your custom design, tools, plugins, etc.

Selected product

This component it’s pretty much similar to the Product template component, with the key difference that it allows you to highlight an specific or invidual product from your store. Some considerations that you need to be aware when using it are:

It can be added on any layout of the theme, with the exception of the Product layout.
You can only add this component once on a theme layout.

Component settings

The settings for this component are almost the same as the Product template, with a few additional ones that offer more customization, which are the following:

Note: next, we are just listing the options that are specific for this component. For the remaining ones, you can see the details on the Product template component.

Product

In this field you must select the product you wish to highlight.

Invert columns order on Desktop

Allows to revert the order of the columns of the component, in which case the Content will move to the left side of the section, while the Gallery will move to the right.

Note: This change will only apply for devices that have a width equal or greater than 768px. For devices less than that, the Content will automatically be positioned below the Gallery.

Design options

The following group of options will allow you to customize certain design aspects of 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.

Note: This will be applied to the entire section, but won't affect the product and its details if Apply Card style is enabled.

Apply Card style

Allows to apply a "card" or "boxed" style to the main wrapper that contains all the product information. The following options will become available only if this is enabled:

Enable Card border: displays a border (or line) all around the section main wrapper.
Card border opacity: allows to adjust the opacity (transparency) for the border.
Card content colors: allows to choose the Color Pack for the product, which will be applied inside the main wrapper.

Selected product subcomponents

The list of available subcomponents for the Selected product it’s almost the same than for the Product template component, with the exception of the following ones:

Description
Product Accordion
Product custom fields
Attachments
Product custom code

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 section will have, based on the following options:

Default: the option defined at Theme settings > Design > Theme styles > Maximum container width will be applied.
Small: it expands the section to a maximum width of 1320px.
Medium: it expands the section to a maximum width of 1620px.
Large: it expands the section to a maximum width of 1920px.
Extra large: it expands the section to a maximum width of 2220px.
Full width: it expands the section to the maximum width of the browser where the store it’s being seen.

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 of the page.

Content type

Allows to define the way each Slide will look and what options will be considered within their respective subcomponent settings. The available options are the following:

Image + Content: The image(s) for each Slide will work as a background and the content (e.g. Title) will be placed on top.
Image only: No content will be necessary for you to add, therefore, elements such as the Title will not be displayed. Based on that, any graphic you would like to add, such as texts, shapes, etc., will have to be added within the image construction through softwares like Photoshop, Illustrator, Canva, etc.

Note: When chosing Image only you will only need to consider the following options within a Slide settings: Image (desktop and mobile), Link and Link text.

Height

Allows to define the height for the entire component, based on the following 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.

Note 1: We refer to a minimum, because the height of the section 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 within each Slide will vary depending on the option you chose here. These are explained in detail on this section of the page.

Slider settings

The following options allow you to customize certain attributes of the component:

Enable 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.
Show arrows: Allows to display arrows below the Carousel for users to control it.
Show dots: Allows to display dots/points below the Carousel for users to control it.
Show arrows on hover: if the previous option is enabled, this one will allow you to define that arrows only display when users ***hover*** inside the component area. On mouse out, they will hide. This behavior will only be applied on Desktop devices.
Arrows and dots size: Allows to adjust the size for the arrows and dots.

Top margin

Allows to control the upper margin of the section.

Bottom margin

Allows to control the lower margin of the section.

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:

Image (desktop)

Allows to upload an image for Desktop devices that have a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices that have a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Image overlay

Allows to define the opacity (transparency) for the Overlay element.

Horizontal image position

Allows to define the horizontal position for any of the images above, only when Content type it's equal to Image + Content within the main component settings.

Vertical image position

Allows to define the vertical position for any of the images above, only when Content type it's equal to Image + Content within the main component settings.

Note: Vertical and horizontal positioning is most noticeably visible when images are wider or large than the defined Width and/or Height.

Content alignment

Allows to define the aligment for the content of the slides.

Horizontal content position

Allows to define how the content of the slides will position within the x axis (horizontal).

Content options

Next, you will find several options for adding content to a Slide:

Subtitle: Optional. Allows to display a small text before the Title.
Title: Allows to display a title. Try to make it brief so it doesn't collapse the available space.
Description: Allows to display a text after the title and before the link button (if visible), in order to provide more context on what the Slide is about. Try to make it brief so it doesn't collapse the available space.

Link options

Next, you will find several options for customizing the Link of the Slide:

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.
Show link as button: If enabled, the button will be displayed. If disabled, it will hide but the Slide will still be clickable as a whole.
Use outline button style: Allows to show the link button with a border around it.
Show arrow in button: Allows to display an arrow at the right side of the button text.
Enable as external link: If enabled, the link will open in a new browser tab.

Note: Subtitle, Title, Description, Overlay and Link as Button will only display and be visible if Content type it’s equal to Image + Content. For the case of Image only, you will only need to consider the options Image (desktop and mobile), Link and Link text.

Content colors

Allows to choose the Color Pack for each Slide.

Store Features

This component allows you to display variable content, similar to what can be done with the Media with text component, but with the key difference that the Image and Content will always be stacked vertically, one below the other, when choosing Grid on the Section type option of the component settings.

It works by adding multiple subcomponents, called Feature, in which you can add images and content (e.g. Title, description).

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:

Heading options

The following options and elements can be displayed within the Heading section that goes before the content of the component. If all of them are empty the section will not be visible.

Subtitle: Displays at the start of the Heading and before the Title.
Title
Description: Text that displays below the Title.
Link: Allows to add a link to any content of the store, such as categories, products, pages, external links, etc.
Link text: Text that will show within the link.

Images size

Allows to define how the images of each Feature will be displayed, based on the following options:

Original: images will be displayed with the original dimension in which you uploaded them.
Resize: images will be resized or adapted to a format of 520x300 px.

Section type

Allows to define how Features will be displayed within the component, based on the following options:

Carousel: features will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: Features will be displayed within columns, one next to the other horizontally and vertically based on the amount of items per row you define. In mobile devices they will always stack vertically.

For the Grid option, the Image(s) will be positioned at the left side, while the Content on the right. This behavior will change to the opposite on even blocks (e.g. 2, 4, 6, etc.) and only for Desktop devices. For Mobile devices the Image(s) will always be shown first.

Number of columns on desktop

Allows to define how many Features will be displayed on Desktop devices, based on the definitions of the following table:

Device width	Amount of columns
Equal or greater than 992px	Defined amount
Equal or greater than 768px	2 columns
Less than 767px	1 column

Note: This option would only apply if Section type is equal to Carousel.

Color options

The following options allow you to customize certains colors within the component:

Background color: allows to define the color for the background of the comoponent.
Block button - Background color: allows to define the color for the background of all block's buttons.
Block button - Background color (hover): allows to define the color for the background of all block's buttons on hover state.

Note: The color for the text of the buttons will be automatically adjust based on the proper contrast they will need.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

Subcomponent settings

As it was mentioned before, the subcomponent for the Store Features component is called Feature, which we will refer to as Block, and you can add as many as you want to provide the necessary information for your clients. The options for this subcomponent are the following:

Image (desktop)

Allows to upload an image for Desktop devices that have a width equal or greater than 576px.

Image (mobile)

Allows to upload an image for Mobile devices that have a width equal or lower than 575px.

Note: If you upload just one of the two images, it will be displayed on all devices.

Title

Allows to define the Title of the block, which will display after the image(s).

Description

Allows to add a text to provide more context on what the block is about. Displays after the title.

Link to page

Allows to add a link to any content of the store, such as categories, products, pages, external links, etc.

Link text

Text that will show within the link.

Testimonials

This component allows you to add custom and manual Testimonies from clients, which can be used to build trust among your customers by providing feedback and/or comments you have already received about several topics.

It works by adding multiple subcomponents, called Testimony, which we will refer to as Block for practical purposes.

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:

Display type

Allows to define how blocks will be displayed within the component, based on the following options:

Carousel: blocks will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: blocks will be displayed within columns, one next to the other horizontally and vertically based on the amount of items per row you define. In mobile devices they will always stack vertically.

Content alignment

Allows to define the alignment for all blocks within the component.

Avatar image size

Allows to define the size for the avatar image that you can upload on each subcomponent, based on the following options:

Small: image will display at 50x50 px dimension.
Medium: image will display at 75x75 px dimension.
Large: image will display at 100x100 px dimension.

Show quote icon

Allows to display a quote icon before each block text.

Apply Card style to testimonies

Allows to apply a "card" or "boxed" style to all blocks. The following options will become available only if this is enabled:

Enable Card border: displays a border (or line) all around the blocks.
Card border opacity: allows to adjust the opacity (transparency) for the border.
Card content colors: allows to choose the Color Pack for all blocks.

Number of columns on desktop & mobile

Allows to define the amount of columns in which blocks will be displayed for Desktop and Mobile devices, which will vary depending on the option you chose within Display type, based on the definitions of the following tables

Carousel (all devices)

Device width	Amount of columns
Equal or greater than 992px	Defined amount for Desktop
Equal or greater than 768px	3 column
Equal or greater than 415px	Defined amount for Mobile
Equal or lower than 414px	1 column

Grid

Number of columns on desktop will apply to devices with a width equal or greater than 576px, while Amount of columns on Mobile will apply to devices with a width equal or lower than 575px.

Desktop Device / Option value	4 columns	3 columns	2 columns	1 column
Desktop (Equal or greater than 992px)	4 columns per horizontal row	3 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically
Tablets (Equal or greater than 576px)	3 columns per horizontal row	3 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically

Mobile device / Option value	2 columns	1 column
Mobile (Equal or lower than 575px)	2 columns, stacked vertically	2 columns, stacked vertically	2 columns, stacked vertically
Small mobile (Equal or lower than 414px)	1 column, stacked vertically	1 column, stacked vertically	1 column, stacked vertically

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this section of the page.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Subcomponent settings

As it was mentioned before, the subcomponent for the Testimonials component is called Testimony and you can add as many as you want to provide the necessary information for your clients. The options for this subcomponent are the following:

Quote

Within this field you can add the comment from your customers.

Author

Optional. Allows to add the customer name, or practically anything you want.

Avatar image

Optional. Allows to upload an image (avatar) to each block.

Note: the dimension for you to upload the image it's gonna be based on what you choose within the option Avatar image size on the main component settings. We suggest you don't upload an image larger than that to avoid page speed issues.

Text Block

This component allows you to display a section with basically just text and a link. It can be useful as a complementary section that goes along with other components of the theme or for example as a Heading section. The options for you to customize this component are the following:

Width

Allows to define the width at which the content of the component will be restricted to.

Note: You can read about how each option within this behaves on this section, under the Other width sizes part.

Content alignment

Allows to define the alignment for all the content within the component.

Note: This will be applied for all devices.

Horizontal content position

Allows to define the position on the “x” axis (horizontal).

Note: This won’t be visible if you have selected Full width within the Width option.

Subtitle

Allows to add a text before the Title of the component, which will have a smaller size.

Title

Allows to add a title for the component.

Note: The size for this title will be determined on the option defined within Theme Settings > Headings > Titles size.

Text

Allows to add a description or text to provide more context on what the section is about.

Link

Allows to add a link button to any content of the store, such as categories, products, pages, external links, etc.

Link text

Text that will show within the link button.

Use outline button style

Allows to show the link button with a border around it.</li>

Show arrow in button

Allows to display an arrow at the right side of the button text.</li>

Enable as external link

If enabled, the link will open in a new browser tab.</li>

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.

Trust bar

This component allows you to display information about your store that you want to highlight or that’s relevant for your customers, which can be used for example on topics such as your Payment methods, Shipping options, among other content that could be necessary for you.

It works by adding multiple subcomponents called Trust block, which we will refer to -for practical purposes- as Block.

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:

Display type

Allows to define how blocks will be displayed within the component, based on the following options:

Carousel: blocks will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
Grid: blocks will be displayed within columns, one next to the other horizontally and vertically based on the amount of items per row you define. In mobile devices they will always stack vertically.

Number of columns on desktop & mobile

Carousel (all devices)

Device width	Amount of columns
Equal or greater than 992px	Defined amount for Desktop
Equal or greater than 768px	3 column
Equal or greater than 415px	Defined amount for Mobile
Equal or lower than 414px	1 column

Grid

Number of columns on desktop will apply to devices with a width equal or greater than 576px, while Amount of columns on Mobile will apply to devices with a width equal or lower than 575px.

Desktop Device / Option value	4 columns	3 columns	2 columns	1 column
Desktop (Equal or greater than 992px)	4 columns per horizontal row	3 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically
Tablets (Equal or greater than 576px)	3 columns per horizontal row	3 columns per horizontal row	2 columns per horizontal row	1 column, stacked vertically

Mobile device / Option value	2 columns	1 column
Mobile (Equal or lower than 575px)	2 columns, stacked vertically	2 columns, stacked vertically	2 columns, stacked vertically
Small mobile (Equal or lower than 414px)	1 column, stacked vertically	1 column, stacked vertically	1 column, stacked vertically

Content alignment

Allows to define the alignment for all blocks within the component.

Note: If you choose Center and the block has an icon, this will be placed on top/before all the content.

Show icons

Allows to define if icons will be available to be displayed within all blocks.

Note: If this option is disabled, it won't matter if you have added an icon on any block.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this section of the page.

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.

Subcomponent settings

As it was mentioned before, the subcomponent for the Trust bar component is called Trust block and you can add as many as you want to provide the necessary information for your clients. The options for this subcomponent are the following:

Icon

Allows to add an icon to the block. Its position will be determined based on what you choose on the Content alignment option within the component settings.

Title

Allows to add a title to the block.

Text

Allows to add a text below the title to provide more context on what the block is about.

Link

Allows to add a link to any content of the store, such as categories, products, pages, external links, etc.

Link text

Text that will show within the link.

Show arrow in link

Allows to display an arrow icon at the right side of the link text.

Enable as external link

If enabled, the link will open in a new browser tab.

Video

This component allows you to display a video from YouTube or Vimeo within a single section, with multiple options for you to customize it, which are the following:

Embed video code

On this field you need to add the embeded code that each platform provides, within the video sharing options. If you leave it blank it will show a “fake” image.

Video ratio

Allows to define the shape or dimension that the video will have, based on the following options:

Landscape: An horizontal or wide format, commonly used for traditional video and TV screens, which applies a 16:9 ratio.
Portrait: A vertical or tall format, ideal especially for mobile screens, which applies a 3:4 ratio.
Rectangular: A taller variation of the Landscape option, which applies a 4:3 ratio.
Square: A perfect square format, often seen on social media platforms like Instagram, which applies a 1:1 ratio.

Width

Allows to define the width at which the video will be restricted to within the component.

Note: You can read about how each option within this behaves on this section, under the Other width sizes part.

Horizontal content position

Allows to define the position in which the video will be placed within the “x” axis (horizontal).

Note: This won’t be visible if you have selected Full width within the Width option.

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, which will basically apply a background color behind the video.

Use of images within themes

In this section we explain several aspects about the use of images within the theme, from topics such as formats, sizes, among other things that could be useful for you to know.

When it comes to sizes and dimensions, this will vary depending on the component and the options they offer within their settings. Next we provide, with as much detail as possible, the definitions for ideal sizes of images for several components and sections within the theme.

Image formats

For any of the images that you can upload, for example within a Slide or Banner, we recommend a few formats that you can consider using to improve the experience for your store’s visitors:

WebP

Using WebP image format can significantly improve both the performance of your website and the user experience. Among its benefits we can highlight the following:

Smaller File Sizes with High Quality: the format offers superior compression compared to traditional image formats like JPEG and PNG. This means that WebP images are typically smaller in file size while maintaining similar or even better image quality. Smaller file sizes result in faster page load times, improving the overall user experience.
Improved Page Speed and SEO: these type of images load faster due to their reduced file sizes, they contribute to improved page speed, which is a critical factor for SEO. Faster-loading websites tend to rank higher in search engine results, which can drive more traffic to your site.
Transparency and Animation Support: they support transparency (like PNG) and animation (like GIF) within the same format. This means you can use WebP for a wide range of image needs, from static images with transparent backgrounds to animated images, all while maintaining smaller file sizes.
Cross-Browser Compatibility: they are now widely supported by most modern browsers, including Chrome, Firefox, Edge, and Safari. As a result, you can confidently use WebP images on your store, knowing that most users will benefit from the performance improvements without compatibility issues.
Better User Experience on Mobile: Since WebP images load faster and consume less data, they provide a smoother experience on mobile devices. Faster loading times and reduced data consumption are especially important for mobile visitors, who may have slower internet connections or data caps.

If you don’t have a software that allows you to edit or export your images to WebP, you can use free online services like TinyPNG to compress or convert them in just a few clicks.

JPG / JPEG

JPG is a solid choice for web images, especially for complex photos with lots of colors and gradients. It is widely supported and offers decent compression for good quality and smaller file sizes. However, its lossy compression, lack of transparency support, and potential for quality degradation make it less suitable for certain use cases, especially when compared to newer formats like WebP.

If you’re primarily dealing with photos, JPG can still be a great option. But for other types of images or when you need the best performance, you might want to explore other alternatives.

PNG

PNG is an excellent choice for images that require high quality, sharpness, and transparency, such as logos, icons, and simple graphics. Its lossless compression ensures that your images retain their original detail without any degradation. However, the larger file sizes and inefficiency for photos make it less suitable for all types of web images, especially when optimizing for speed and performance.

If you need transparency or perfect quality, PNG is the go-to format. But for other use cases, especially where file size and loading speed are critical, you may want to consider alternatives like WebP or JPG.

SVG

SVG is an incredibly versatile and powerful image format, especially for web design. It’s perfect for logos, icons, illustrations, and any graphics that need to be scalable and resolution-independent. The ability to edit, animate, and style SVGs with code makes it a favorite among developers.

However, SVG is not ideal for complex images like photos and requires a bit more technical knowledge to work with them effectively. If you need crisp, scalable images with small file sizes and the potential for interactivity, SVG is a fantastic choice. For detailed images or simpler use cases, traditional formats like JPG or PNG might be more suitable, depending on what you want to achieve.

Slide sizes

For the case on a Slide, subcomponent of Slider, the suggested dimensions listed below will vary depending on what you choose within the Content type option of the component settings:

Image + Content

The following table provides the optimal image dimensions when choosing Image + Content within the Content type option on the Slider settings.

Width	Height	Dimension for Desktop (in pixels)	Dimension for Mobile (in pixels)
Grid	Small	1320 x 420	551 x 420
Grid	Medium	1320 x 560	551 x 560
Grid	Large	1320 x 720	551 x 720
Grid	Browser	1320 x (variable)	551 x (variable)
Grid	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)
Full Width	Small	Width: 2400 px minimum suggested / Height: 420 px	575 x 420
Full Width	Medium	Width: 2400 px minimum suggested / Height: 560 px	575 x 560
Full Width	Large	Width: 2400 px minimum suggested / Height: 720 px	575 x 720
Full Width	Browser	Width: 2400 px minimum suggested / Height: variable	575 x (variable)
Full Width	Fit to content	Width: 2400 px minimum suggested / Height: variable	575 x (variable)

Note 1: When choosing Browser within the Height component 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 component option, the necessary dimension should be considering the height of the tallest Slide.

Image only

The following table provides the optimal image dimensions when choosing Image only within the Content type option on the Slider settings.

Also, we only refer to the Width of the image on this table, as its Height will depend on how tall you want your images to be.

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

Note: The Height option within the Slider settings will not be considered at all when choosing Image only, therefore, you won’t see any visible change at all when choosing any of its values.

For the case on a Banner, subcomponent of Banners, the suggested dimensions on the tables below will vary depending on the combination of what you choose within the Content type, Numbers of columns on desktop and Numbers of columns on mobile options of the component settings:

Image + Content

When choosing this option the dimension for images will also have a dependancy based on what you choose at the Image ratio option of the component settings. 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

Image only

When chosing this option we are only specifying the minimum suggested Width, as the Height for each Banner will depend on how you want them to be presented and look like:

Desktop

Ratio / Number of columns	4 columns	3 columns	2 columns	1 column
Landscape	306 px	416 px	636 px	1296 px
Portrait	306 px	416 px	636 px	1296 px
Rectangular	306 px	416 px	636 px	1296 px
Square	306 px	416 px	636 px	1296 px

Mobile

Ratio / Number of columns	2 columns	1 column
Landscape	366 px	527 px
Portrait	366 px	527 px
Rectangular	366 px	527 px
Square	366 px	527 px

For the case of the Big Banner component, the suggested minimum dimensions on the tables below will vary depending on the combination from the options Width and Height within the 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 option	Desktop Image dimension	Mobile Image dimension
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 option	Desktop Image dimension	Mobile Image dimension
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 option	Desktop Image dimension	Mobile Image dimension
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 option	Desktop Image dimension	Mobile Image dimension
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 option	Desktop Image dimension	Mobile Image dimension
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.

Product Page image sizes

For the case of the sizes for images within the product layout (or page), these will vary based on what you choose on the Image dimension option, which can be found within the Product template component. Also, the theme will automatically load different image sizes depending on the browser viewport width where the store it’s being visited, so they can be optimized for each different type of device.

Additionally, you need to consider that when enabling the Zoom option, you might need to upload images a bit bigger than the suggested sizes mentioned below, so they don’t pixelate when they are zoomed.

Next, we detail the minimum suggested dimensions in which you can upload you product images. The values of the following table consider only the Desktop device dimension, as it’s gonna be the one that has the larger dimension of all:

Dimension option	Normal image size	Zoomed image size
Landscape	719 x 404 px	1000 x 563 px
Portrait	719 x 959 px	1000 x 1333 px
Rectangular	719 x 539 px	1000 x 750 px
Square	719 x 719 px	1500 x 1500 px

Note: Images will be automatically resized or cropped based on what you choose at the Image display option, within the component settings.

Jumpseller Theme components

General definitions

What’s a Component?

What’s a Subcomponent?

Theme Templates

Basic concepts

Slider/Carousel

Color Packs

Devices

Width

Hover

Overlay

Animations

Headings

List of components and subcomponents

Header

Footer

Accordion

Banners

Big Banner

Contact form

Contact information

Contact map

Categories

Counter

Custom Code

Custom Code (next-gen)

Media with text

Featured Category

Featured Products

Featured Reviews

Handpicked Products

Image

Instagram

Latest Blog Posts

Latest Products

Line Divider

Locations

Logo Gallery

Newsletter

Product template

Selected product

Slider

Store Features

Testimonials

Text Block

Trust bar

Video

Use of images within themes

Image formats

Slide sizes

Banner sizes

Big Banner sizes

Product Page image sizes

Related Articles

How to setup General Settings and Branding for your website

How to customize your Jumpseller theme

Guide on How to Customize Your Store with the Visual Theme Editor

Our guidelines to create Custom HTML Theme

Create a Custom Online Store

Start your journey with us!

Custom Code `(next-gen)`