How to setup General Settings and Branding for your website
From your admin panel, you can start configuring some basic settings for your online store. Select the branding colours for your business and link ...
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.
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:
arrow
icon at the left side of the name. That means that it has or it can have subcomponents inside.arrow
to close it.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.
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.
Category
Is intended to display the product’s collections of the categories that you can create within your store’s admin panel, which you can do by going to Products > Categories
. Here you can also create new templates and apply them to categories to differentiate them.
Page
Jumpseller themes come with 3 pre-installed page templates you can use, and as well as for Products
and Categories
, you can also create many more templates and apply them to your pages.
The pre-installed page templates within a theme are the following:
Blog
Displays all pages categorized as Post.
Note: You can create as many page categories as you like and relate different pages to them, like for example News, Tips and so on.
Post
Displays the information of a Post.
Default
This is the default template for your generic content pages. Legal pages such as Terms and Conditions, Privacy Policies and Shipping Policies will automatically use this.
Search
Displays all the products that are a match when clients perform a search on your store.
Contact
Can display several details about your store such as contact information, social media links, locations, a map and contact form.
Error
Used when your visitors reach a page that is not available, like for example by entering an incorrect URL or one that doesn’t exist anymore. It’s also used for example when there’s an issue within the purchasing process of your store.
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.
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:
Grid Width
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, Grid means that the content will stretch at the maximum available space of it, hence all 12 columns, which is approximately about 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:
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’.
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:
To see the individual customizations of each theme visit their documentation.
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:
To see the individual customizations for each theme, visit their documentation.
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:
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 accordion, in which you can add the following elements through their respective options:
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.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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:
Banner
will work as a background and the content (e.g. Title) will be placed on top.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:
16:9
.3:4
.4:3
.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 theContent 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 banners, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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 Bundle 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 aPortrait
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 withihn the x axis (horizontal).
Vertical content position
Allows to define how the content of the banners will position withihn the y axis (vertical).
Content options
Next, you will find several options for adding content to a banner:
Note: Subtitle, Title and Link as Button will only display and be visible if
Content type
it's equal toImage + Content
. For the case ofImage only
, you will only need to consider the optionsImage
(desktop and mobile),Link
andLink 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:
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 colors
Allows to choose the Color Bundle for the component. This will basically determine the colors for the texts inside of it, such as the Title.
Width
Allows to define the width for the entire component, based on the following options:
Height
Allows to define the height for the entire component, based on the following options:
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 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:
Top margin
Allows to control the upper margin of the section.
Bottom margin
Allows to control the lower margin of the section.
Note: The ideal suggested dimensions for the image(s) you can upload can be found this section of the page.
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:
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 contact form, in which you can add the following elements through their respective options:
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 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 contact details, in which you can add the following elements through their respective options:
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.
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 map, in which you can add the following elements through their respective options:
Map size
It allows you define the width of the Map
, based on the following options:
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.
This component allows you to add several items
or blocks
, which can be categories from your store, and you can customize attributes and options for each one of 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:
Subtitle
Optional. Allows to display a subtitle at the start of the section, before the Title.
Title
Allows to display a Title within the section.
Description
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, external links, etc.
Link text
Text that will show within the link.
Section type
Allows you to define how items will be displayed within the component, based on the following options:
Blocks to show
Allows to define how many items will be displayed for Desktop devices, which will vary based on what you have selected at the Section type
option. In both cases and for Tablet and Mobile devices, the display will change automatically to preserve a good and proper visualization of the content within them.
If you opt to choose Carousel
, items will be displayed based on the definitions of the following table:
Device width | Amount of items |
---|---|
Equal or greater than 1201px | Defined amount |
Equal or lower than 1200px | 6 items |
Equal or lower than 991px | 5 items |
Equal or lower than 767px | 4 items |
Equal or lower than 575px | 3 items |
Equal or lower than 414px | 2 items |
Equal or lower than 320px | 1 item |
If you opt to choose Grid
, items will be displayed based on the definitions of the following table:
Option value | Mobile (Equal or lower than 575px) | Tablet (Between 576px and 767px) | Small Desktop (Between 768px and 991px) | Large Desktop (Equal or greater than 992px) |
---|---|---|---|---|
Equal or greater than 5 | 1 column | 2 columns | 3 columns | 6 columns |
4 | 1 column | 2 columns | 4 columns | 4 columns |
3 | 1 column | 2 columns | 3 columns | 3 columns |
2 | 1 column | 2 columns | 2 columns | 2 columns |
Note: When choosing
Grid
within the component settings, values on this option higher than 7 will have no effect.
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Section type
option:
Subcomponent settings
The subcomponent for a Categories
component is called Category block
, and you can add as many as you want. The options for this subcomponent are the following:
Category
Here you must select the category
for the item, which will automatically add attributes such as the name and link.
Title
Allows to replace the original name of the select category.
Icon image
Allows to upload an icon image, which will be position within the square box that displays before the title.
Note: We suggest that you upload an image in formats such as
SVG
,WebP
orPNG
.
Background image
Allows to upload an image which will work as background within the square box of the block.
Note: This background image will position behind the icon.
Enable overlay
Allows to display an Overlay
element between the icon and the background image to generate contrast between both.
Color options
Next, you can find several options to customize the look of the item, based on the following:
hover
state.Overlay
element, if enabled.This component allows you to add a section which will display a Countdown clock or Timer, which can be very useful to for example:
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:
Counter Date
Mandatory. Here you need to define the Date
at which the timer will stop, for example: 2023/06/30 (year / month / day). When the counter reaches zero (0), the section will automatically hide and will not visible.
Note: Slashes (/) must NOT have spaces before nor after.
Counter Time
Optional. Here you can add, in addition to the Date
above, a time at which the timer will stop. Example: 23:59:59 (hour : minutes : seconds).
Note: Colons (:) must NOT have spaces before nor after.
Counter Title
Title that displays on top of the Countdown clock
. By default it will display the text "Offers end in".
Subtitle
Optional. Text that can be displayed before the Title of the section (not the Counter Title).
Title
Optional, but ideal. Text that can be displayed on the left side of the section, along and below the Subtitle.
Link
Allows to add a link (button) to any content of the store, such as categories, products, pages, external links, etc.
Note: Consider adding a link to a page, ideally a category, where offers are effectively available.
Link text
Text that displays within the link (button).
Note: Consider adding a text that invite users to click on it.
Background color
Allows to define the background color for the section.
Link - Background color
Allows to define the color for the background of the link (button).
Note: Both color options will automatically adapt the colors for the texts within the component, applying a proper contrast.
Use this for any external apps or your custom design, here you can include code, tools, plugins, app, etc. you need to display in the component.
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:
Custom Code
Within this field you can add the code you want to be displayed in your store.
Note: This field does not support the use of
liquid
tags.
(next-gen)
Note: This component it’s only available within
Next-Gen
themes, such as Simple.
Use this for any external apps or your custom design, here you can include code, tools, plugins, app, etc. you need to display in the component.
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:
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:
Top margin
Allows to control the upper margin of the section.
Bottom margin
Allows to control the lower margin of the section.
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:
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:
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:
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 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
Products > All products
to see the list of products of your store.Option 2
Products > Categories
and choose the one you want by clicking on its name.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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 products, in which you can add the following elements through their respective options:
Category
, which you can replace by filling this field.Category
on click.Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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
Products > All products
and chose a product from your store by clicking on its name and/or image.Featured product
.List of featured products
Products > All products
and before list of products you will find three options. Click on the one that’s far at the right side.Featured
.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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 products, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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:
Product Reviews
email, which can be done within your store’s admin panel by going to Settings > General > Emails
.Products > Reviews
to see the full list.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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
option:
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.
Review date format
Allows to define the format of the date for all reviews within the component, or to not show it.
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 Heading
Allows to display a Heading section before the reviews, in which you can add the following elements through their respective options:
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.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 products, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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.
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
orFull width
within theWidth
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 Bundle for the component, which will basically apply a color on the background.
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:
Settings > General > Preferences > Social Media
and click on the “Edit information” button that’s within this section.Instagram Login
button that’s further down at the end.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
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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:
Customization > Pages > All Pages
, you will notice at the left side a section called Categories
.Posts
.Next, we explain how you can link a page to a category, in this case, for the Blog:
store-domain.jumpseller.com/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:
Pages > All Pages
in your store's admin panel.Post
category name.Category order
will allow you to define how posts will be displayed within the component, which will also affect the Blog page.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
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 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 posts, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 products, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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:
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 Bundle 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.
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 locations, in which you can add the following elements through their respective options:
Locations to display
Allows to define which type of locations will be displayed within the component, based on the following options:
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 toSettings > 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:
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 Bundle for the component.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 logos, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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:
Account enabled
option enabled, within Settings > General > Emails > Transactional Emails
, the user will receive an email to confirm the subscription.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.New customer
option enabled, within Settings > General > Emails > Administrator Emails
, you will receive a notification when the user successfully confirms the subscription.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.
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 Bundle for the component.
This component allows you to highlight an specific or invidual product from your store with all its details such as name, options and variants, attributes like SKU and brand, stock, price, etc. It can be really useful for example to display a key product from your store or one that has an special offer.
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).
Note: This component can be added within any layout of the theme, with the exception of the Product layout.
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:
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 theGallery
.
Content alignment
Allows to define the alignment for the Content
of the component.
Gallery options
The following set group of options will allow you to customize certain aspects of the component's Gallery
:
Image dimension
Allows to define how images will be presented within the component, based on the following options:
16:9
.3:4
.4:3
.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:
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.
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.
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:
Selected product subcomponents
The Selected product 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 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:
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.
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:
lateral panel
that's opened when clicking on the button.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.
Wishlist
This subcomponent allows you to display the link 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 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:
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:
Main text
option of the Color Bundle from the component.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:
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:
Slide
will work as a background and the content (e.g. Title) will be placed on top.Note: When chosing
Image only
you will only need to consider the following options within aSlide
settings: Image (desktop and mobile), Link and Link text.
Height
Allows to define the height for the entire component, based on the following options:
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:
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/orHeight
.
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 withihn the x axis (horizontal).
Content options
Next, you will find several options for adding content to a Slide
:
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
:
Slide
will still be clickable as a whole.Note: Subtitle, Title, Description, Overlay and Link as Button will only display and be visible if
Content type
it’s equal toImage + Content
. For the case ofImage only
, you will only need to consider the optionsImage
(desktop and mobile),Link
andLink text
.
Content colors
Allows to choose the Color Bundle for each Slide
.
This component allows you to display variable content, similar to what can be done with the Dynamic content 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.
Images size
Allows to define how the images of each Feature
will be displayed, based on the following options:
520x300 px
.Section type
Allows to define how Features will be displayed within the component, based on the following options:
Carousel
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 toCarousel
.
Color options
The following options allow you to customize certains colors within the component:
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
The following options will only be considered and applied if you have selected Carousel
within the Section type
option:
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.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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:
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:
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 testimonies, in which you can add the following elements through their respective options:
Carousel settings
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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.
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 theWidth
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 Bundle for the component.
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
, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.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 |
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
The following options will only be considered and applied if you have selected Carousel
within the Display type
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.
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.
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:
16:9
ratio.3:4
ratio.4:3
ratio.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 theWidth
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 Bundle for the component, which will basically apply a background color behind the video.
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.
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:
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.
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 | 1296 x 420 | 551 x 420 |
Grid | Medium | 1296 x 560 | 551 x 560 |
Grid | Large | 1296 x 720 | 551 x 720 |
Grid | Browser | 1296 x (variable) | 551 x (variable) |
Grid | Fit to content | 1296 x (variable) | 551 x (variable) |
Medium | Small | 1440 x 420 | 575 x 420 |
Medium | Medium | 1440 x 560 | 575 x 560 |
Medium | Large | 1440 x 720 | 575 x 720 |
Medium | Browser | 1440 x (variable) | 575 x (variable) |
Medium | Fit to content | 1440 x (variable) | 575 x (variable) |
Large | Small | 1600 x 420 | 575 x 420 |
Large | Medium | 1600 x 560 | 575 x 420 |
Large | Large | 1600 x 720 | 575 x 720 |
Large | Browser | 1600 x (variable) | 575 x (variable) |
Large | Fit to content | 1600 x (variable) | 575 x (variable) |
Extra Large | Small | 2400 x 420 | 575 x 420 |
Extra Large | Medium | 2400 x 560 | 575 x 560 |
Extra Large | Large | 2400 x 720 | 575 x 720 |
Extra Large | Browser | 2400 x (variable) | 575 x (variable) |
Extra Large | Fit to content | 2400 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 theHeight
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 theHeight
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: 1296 | Maximum suggested: 551 |
Medium | Minimum suggested: 1440 | Maximum suggested: 575 |
Large | Minimum suggested: 1600 | Maximum suggested: 575 |
Extra Large | Minimum suggested: 2400 | 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 choosingImage 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 | 1296 x 300 px | 575 x 320 px |
Small | 1296 x 420 px | 575 x 420 px |
Medium | 1296 x 560 px | 575 x 560 px |
Large | 1296 x 720 px | 575 x 720 px |
Browser | 1296 x 850 px | 575 x 820 px |
Width: Medium
Height option | Desktop Image dimension | Mobile Image dimension |
---|---|---|
Fit to content | 1440 x 300 px | 575 x 320 px |
Small | 1440 x 420 px | 575 x 420 px |
Medium | 1440 x 560 px | 575 x 560 px |
Large | 1440 x 720 px | 575 x 720 px |
Browser | 1440 x 850 px | 575 x 820 px |
Width: Large
Height option | Desktop Image dimension | Mobile Image dimension |
---|---|---|
Fit to content | 1600 x 300 px | 575 x 320 px |
Small | 1600 x 420 px | 575 x 420 px |
Medium | 1600 x 560 px | 575 x 560 px |
Large | 1600 x 720 px | 575 x 720 px |
Browser | 1600 x 850 px | 575 x 820 px |
Width: Extra Large
Height option | Desktop Image dimension | Mobile Image dimension |
---|---|---|
Fit to content | 2400 x 300 px | 575 x 320 px |
Small | 2400 x 420 px | 575 x 420 px |
Medium | 2400 x 560 px | 575 x 560 px |
Large | 2400 x 720 px | 575 x 720 px |
Browser | 2400 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
andHeight
options we suggest that you can test how images look among different devices, to ensure that they don’t pixelate.
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.
Free trial for 14 days. No credit card required.