Theme main settings

We recommend that you also visit the article about how components within our themes work.

This section which can be accessed on the top left sidebar panel of the Visual Editor contains several options for you to customize your theme, with sub-sections such as Design, Colors, Fonts, among several others.

Many of the options inside apply generally to components and subcomponents of the theme, and for some cases they can be overriden through additional options within them.

Next we detail all these sections, what they do and what you can achieve.

Colors

This section contains what we call Color Packs, which are groups of colors related and applied to multiple elements within the theme.

Next, we detail some aspects of them so you can know how to make the most out of this feature.

Packs

The theme comes with 3 pre-installed packs, that are applied across the multiple components available for you to use.

Content

The first one is called Content and it’s used -almost- on all components within the theme by default.

Therefore, if for example you wish to change the design of your store to have a very “dark look”, this is the pack you would need to modify and adapt colors in, so it applies across all sections.

Dark

This pack is used mainly on subcomponents of the theme such as the following:

Slide → subcomponent of Top Bar
Slide → subcomponent of Slider
Banner → subcomponent of Banners
Big Banner

Its main purpose within the theme is to provide a “dark” style, with its respective content contrast colors, which is the case for subcomponents such an Slide where there’s an image that acts as the background, with content on top of it.

Light

This pack it’s used for example in the Footer component of some themes and it’s also applied by default on the following components and/or sections:

Newsletter
Product Reviews
Breadcrumbs

Packs options

Within each Color Pack you will find the following options:

Background: Defines the background color of the section where it’s applied.
Main text: Defines the color for elements of higher relevance within the theme, such as titles.
Secondary text: Defines the color for elements of secondary relevance within the theme, such as descriptions, texts, among others.
Links: Defines the color for link elements, like for example one inside a page body text.
Main button background: Defines the background color for buttons with a higher priority within the theme, such as the Add to cart.
Main button text: Defines the text color for buttons with a higher priority within the theme.
Secondary button background: Defines the background color for buttons with a secondary relevance within the theme, like for example the one that’s visible on a product that has an Out of stock status, which displays the text “See details”.
Secondary button text: Defines the text color for buttons with a secondary relevance within the theme.

Suggested Colors

Also within each Color Pack, after all the their options, you will find a section with multiple predefined sets of colors that you can use, which we had manually created based on good use of color contrast and known standard practices within the E-commerce ecosystem.

Wishlist

Inside this group you will find other colors that are applied to different wishlist elements:

Icon: This color is applied when hovering the icon to add products to the Wishlist.
Icon (active): This color is applied when a product is already in the Wishlist.
Background: This color is applied to the background of the icon to add products to the Wishlist

Other colors

Inside this group you will find other colors that are applied to different elements across the theme:

Discount: This color is applied to all instances related to a discount (promotion) within the theme, such as for example the following:
- Product price with an applied discount on product blocks and product pages.
- Sale tag that displays over a product block image when it has a discount applied.
Discount tag text: This color is applied on the text of the Sale tag mentioned before.
Ratings: This color is applied to the rating stars for products that have customer reviews on the store.

Note: The Product Reviews feature on Jumpseller it’s only available for Pro plans and above. For more information about this feature, you can visit the following article.

Fonts

This section allows you to customize the fonts of the theme, that’s connected to the Google Fonts library and will allow you to have access to the entire set of more than 1.700 fonts.

Next, we explain in detail how each option is applied within the theme.

Font selection

Within this group you will be able to define the fonts for several general elements within the theme:

Main

This font is applied to all Titles within the theme. Examples of this are:

Component titles such as Slide, Banner, Featured products, Template heading, Testimonials, Media with text, etc.
The Product name which is inside the Product title subcomponent.

Secondary

This font is applied to all the remaining texts across the theme. Examples of this are:

Texts and links within the Header, Desktop menu and Mobile menu.
Description on a Slide and/or Banner subcomponent.
Text on a Media with text component.
Product description on the subcomponent with the same name.
Text or description available in components such as Featured products, Latest products, among others.

Store name

This font is applied to all places where the Store name is displayed, which will be visible if you haven’t uploaded a Logo either through the available options on the Header and Footer components or on your store’s admin panel at Settings > General > Branding.

Sections where the store’s name will appear are the following:

Header and Mobile menu.
Footer
Header of the Shopping process pages (e.g. Cart, Checkout), when no logo has been uploaded at the Branding section or within the Shopping process section.

Buttons font

This font it’s applied to all buttons across the theme.

Sizes

Font base size

This option allows you to define and modify the “general” font size of the theme.

Themes are designed using scalable units, meaning that once you increase or decrease the amount of pixels on this option, several elements will immediately be affected by it.

Design

This section allows you to modify and adjust several design settings of the theme.

Store name

Custom name

This option allows you to define and display a different name than the one defined within the store’s admin panel at Settings > General > Preferences > Store Name.

So, for example if you haven’t uploaded a Logo in any of the instances described before, what you add on this field will be displayed on all those sections.

Size

This option allows you to define the size for the Store name, which will be applied on all sections where it’s displayed.

Note: the size will be applied to the name added within this field or to the one within Settings > General > Preferences > Store Name.

Weight

This option allows you to modify and adjust the weight of the Store name.

Note: The weight will depend on the available variables of the font that you have defined for the Store name option, within Theme settings > Fonts.

Theme styles

Maximum container width

This option allows you to define the maximum width that the container of the theme will have.

The container is a section that wraps all the content from a page and/or component, and determines how the elements that are inside are gonna be displayed and arranged.

By changing the width of it, the dimensions of elements such as for example images will vary, which will have an effect on the -optimal- sizes that you will need to upload.

The available sizes for this option are the following:

Small: the container will have a maximum width of 1320px.
Medium: the container will have a maximum width of 1620px.
Large: the container will have a maximum width of 1920px.
Extra large: the container will have a maximum width of 2220px.
Browser width: the container will stretch to the maximum available width of the browser in which the store it’s being visualized.

All Components within the theme will be affected by what you choose here, but you will find some with its own Width configuration, which upon theme installation come with a Default option selected, in which case it will respect initially the value selected in here. You can change the Width option on them to make them behave differently.

Spacing

This option allows to define if components and their content will show a space or separation between them, or if you don’t want them to have any.

This will affect for example the right and left space between the component’s content and the browser’s sides.

Also, some blocks will also behave differently based on what you choose here. For example, if you define None, Banners, Products, etc., will look and appear very close together, allowing you to generate a different type of design.

Rounded corners

This option allows you to define if sections and elements will have rounded corners or not.

Examples of how this is applied can be noticed in:

A Slider component.
A Product block and Product page image.
A Media with text component image.
Banners and Big banner.

Buttons

Font size

You will find two options to define the size of the text for mainly all buttons within the theme, for both desktop and mobile devices.

Style

This option allows you to modify the style for the majority of the buttons within the theme.

Text format

This option allows you to define how the text for all buttons on the theme will be displayed, based on the following:

Original: texts will be displayed as they are originally written.
ALL CAPS: texts will be forced to be displayed in All caps or uppercase letters, e.g. BUTTON TEXT.
Capitalized Text: texts will be forced to be displayed with the first letter of every word in All caps or uppercase, e.g. This Is The Button Text.
lowercase: texts will be forced to be displayed always in lowercase/downcase, e.g. *this is the button text.

Transition

This option allow to enable a transition for all theme’s buttons, which will make visible new options to customize this:

Style: allows you to define which transition to apply:
- Border: the button will increase the border around it to make it look bigger.
- Width: the button will increase the left and right sides of it.
- Shadow: a shadow will be displayed at the back of the button.
- Ripple: the background color for the “hover” state will appear from the left side of the button.
Size: allows you to define the size of the transition, which will depend on the Style you choose first.

Borders

This group of options allows you to customize the design and appearance of lines within the theme. These can be found for example in the following sections and/or components:

Border that can be enabled within the Header and Desktop menu components.
Line divider component that can be added in any layout of the theme, as well as in the Footer.
Border styles than can be enabled in subcomponents such as a Banner or Trust block.

The options for you to customize these elements are the following:

Style

Allows to define the style for all lines, borders and separators within the theme.

Thickness

Allows to determine the thickness for all lines and borders within the theme:

Thin: will have a thickness of 1px.
Thick: will have a thickness of 2px.

Store Carousels

This group of option allows you to define the style for the navigational elements of a Carousel all across the theme.

Theme dots style

Allows to define the style for the “navigational dots” (or markers) with which users can navigate and control a Carousel within the theme.

Arrows and dots size

Allows to define the size for the arrows and navigational dots (or markers) for all Carousels within the theme.

Store icons

The icons used within Jumpseller themes from version 4.0.0 and above are from the Phosphor Icons library, which has more than 9.000 icons to choose from.

This group of options will allow you to control and define how they look and how they are applied within the theme.

Style

This option will allow you to define the style for mostly all icons used in the theme. Available styles are the following:

Cart icon

This option allows you to define the “Cart” icon that will be used across the theme. The sections in which this icon can be visible are the following:

At the right side of the Header, along with the products count number.
At the Cart Menu subcomponent that’s part of the Header, only if within its settings you have enabled to display the icon.
In the Add to cart buttons in product blocks and product page, if you have enabled to display the icon in the option that’s detailed below.

Show Cart icon in buttons

As it was mentioned above, this option allows you to display the Cart icon in the Add to cart buttons within product blocks and product pages.

Animations

This group of option allows you to enable an animation for most -if not all- sections and components within the theme, in order to provide movement to the design of your store and make it more appealing for your customers.

Enable animations

When enabling this, the following options will become available for you to customize them:

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

Also, you will find an option within components called Customize options, most likely inside the Appearance group, with which you will be able to customize the transitions specifically for them and they will override the ones within this section.

Note: If you disable the option Enable theme animations, it will affect all components within the theme. Therefore, even when in one or more components you have enabled the Customize animation options option, animations won’t have an effect at all, as the option here in Theme settings controls all of them.

Wishlist

Note: This feature is only available for stores subscribed to the Pro plan and above. For more information you can visit the following article.

By checking the Enable Wishlist option, the Wishlist feature will be enabled across the entire theme.

When doing so, the Show on group of options will become available to be used, so you can define in which sections it will be displayed:

Header

Displays the Wishlist’s links on the theme Header, so users can navigate directly to the respective section on their Customer account page.

Product blocks

Displays the Wishlist icon on product blocks. This will give users the ability to quickly add products to their Wishlist, without necessarily having to access the page of any of them.

Product page

Displays the Wishlist button (icon and text) on the product page.

This is part of the Wishlist subcomponent, which it’s a child of the Product template component, located on the Product layout of the theme.

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

You can read more about it on this article.

Breadcrumbs

The Breadcrumbs is the section that can be displayed at the start of layouts like for example Categories, Products, Pages and Contact page.

It allow users to know the path they have followed to reach a certain page. The options for you to customize it are the following:

Show on

This option allows you to define in which instances this section will be displayed:

All devices: on all types of devices.
Desktop only: on devices with a width equal or greater than 768px.
Mobile only: on devices with a width equal or lower than 767px.
Don’t display: it won’t show the section in any kind of device.

Alignment

You will find two options to define the alignment of the list for desktop and mobile devices.

Margins

You will find two options to define the inner upper and lower margin (space) of the section.

Content colors

Allows to choose the Color Pack for the Breadcrumbs.

Headings

The Heading is a section displayed in mostly all components within the theme, and it’s composed commonly by the following elements:

A subtitle
A title
A description
In some cases a button or link.

The options within this section of the Theme settings will affect all places where a Heading is present or available to be displayed:

Alignment

You will find two options to define the alignment of the list for desktop and mobile devices.

Titles

This group of options allows you to define the design and appearance of the titles for all Heading sections within the theme:

Size

Defines the size for all titles within the Headings of the theme, based on pre-defined calculations directly affected by the Font base size option located at Theme settings > Fonts > Sizes.

When choosing Custom, you will be able to manually adjust the size for desktop and mobile devices independently.

Weight

Defines the weight for all titles within the Headings of the theme.

Note: The weight will depend on the available variables of the font that you have defined for the Main font option within Theme settings > Fonts > Font selection.

Letter spacing

Allows to adjust the space between letters.

All caps

Allows to force all Heading’s titles to be displayed in uppercase letters, even when they weren’t written like that: e.g. TITLE.

Show line below

Displays a line or border below the titles, in order to generate a more clear division with the content that comes below.

Subtitles

This group of options provide the same design choices than the Titles.

The difference here is that the options to define the size of them will only be displayed if you choose Custom on the size option for Titles.

When doing so, two options to define the size for desktop and mobile devices will show. For any other option different than Custom, subtitles will be calculated based on percentages related to the size of titles, as follows:

40% of the title’s size on desktop devices.
30% of the title’s size on mobile devices.

Descriptions

Here you will only find the option to control the Size of the descriptions, which also displays options to control it on desktop and mobile devices by choosing Custom.

Aspects such as the weight and uppercase, can be added and adjusted through the respective fields in which you can add a description on a Heading section.

Note: The size for descriptions will also be directly affected by the Font base size defined at Theme settings > Fonts > Sizes.

Filters

This section provides several options for you to customize and define how Filters work within the theme.

To know more about how filters work in Jumpseller, please visit this link.

Note: The Filters feature it’s only available for Premium plans or above.

Display

Show on desktop

Defines if the list of filters should be displayed at the left side of the Product feed subcomponent, which is available to be used at the Category and Search results layouts, like it can be seen on the image at the start of this section.

This will only be reflected on Desktop devices that have a width equal or greater than 768px.

For devices that have a width equal or lower than 767px, filters will be available within a lateral panel, which can be opened through a button that will be displayed within the Heading section.

Note: If this option is disabled, the behavior would be the same as the one on Mobile devices.

Example of the Filters sidebar panel opened on a Desktop device, when it has been disabled to be displayed next to the Product feed.

Apply filters on click

This option will show when the previous one is enabled and allows to apply filters instantly when users click on them. Therefore, the page will automatically be reloaded.

By enabling this, there will be certain aspects that will change within the page that you need to know:

When clicking on a filter the page will automatically be reloaded.
The Apply filters buttons will hide.
A new button will display in the section where the Filter by price sub-section shows, which will only work for these ones.

Note: what’s mentioned on the list above will only occur on Desktop devices. For Mobile devices the functionality of the filters will remain the same, by having to click on the Apply filters button within the lateral panel.

Types

Within this group you will find options to show or hide different types of filters.

Show ‘Order by’ filter

This option allows you to show or hide the selector with which clients can re-order the list of products, based on the following:

Position: The order is determined by the position in which products are listed within a Category. In the case of the Search results page, it will be determined based on the order in which products match the search keyword that was used.
Name: A to Z: The order of products will be determined descendingly.
Name: Z to A: The order of products will be determined ascendingly.
Price: Low to High: It will show the products that have lower prices first. This will only consider original prices and not discounts.
Price: High to Low: It will show the products that have higher prices first. This will only consider original prices and not discounts.
Date: Newest first: It will re-order products showing the latest ones that have been added to a category. In the case of Search results, it will show first the latest products that were added to the store.

Note: for categories, you can choose the default option of this selector by going to the Properties section, inside their respective settings on Products > Categories.

Show subcategories

Defines if the subcategories (inner levels) of a category will be displayed along with the rest of the filters.

Note: This will only be reflected on Category layouts.

Show filter by price

Allows to show or not the fields with which clients can filter products based on a minimum and maximum price range.

The possible price ranges will be determined based on the collection of products listed within a Category and/or Search results layout.

Other options

Show filters counter

Allows to display the amount of products of each filter within parenthesis, e.g. Red (2).

Limit amount of filters items

This option allows you to limit the amount of items within all filters groups.

This is useful if the list within your filters it’s too long and you want to show just some of their items first.

When enabling this option a + Show more link will display at the end of each filter group.

Upon click, the group will expand showing all the remaining items, and the link text will change to - Show less. On a second click, the group will shrink back again and hide the items.

Note: this won’t affect the Order by filter.

Amount of visible items

When enabling the previous option, this one will appear.

It allows to define the initial amount of filters items to show within the groups.

So for example, if one of your filters has a total of 12 items, and within this option you define 5, the remaining 7 items will be hidden until the user clicks on the + Show more link.

Enable collapsible filters

This option makes that the entire list of filters to work as an Accordion, making them collapsible, and allowing them to be opened upon click.

By enabling it, a new option will show called Default collapsible display, which will have the following two options:

All opened: on page load, all filters will appear opened and users will be able to close them one by one.
All closed: on page load, all filters will appear closed and users will need to click on their titles to open them.

Product block

A Product block is the preview “block” -or also refered to as “card”- of a product that can be displayed in multiple layouts of your theme. It contains several information about each product, for clients to know details about them -hence, preview them-.

Next, we explain all the possible options for you to customize them.

Appearance

Within this group you fill find options to customize the general design and look of all product blocks within the theme and across the different sections and components that display them.

Content order

Defines the order of the elements that display within the content area, which is the one that goes just below or after the product image.

Here you can reorder the options by dragging them up and down, to define the position that feels better for you.

Some things to consider are:

The Attributes will be displayed if a product has an SKU and/or Brand defined, and if both are enabled within the Information group that can be found further down.
The Price will be displayed as long as the Disable product prices is unckeched.
Colors will be displayed if a product has options or variants of type color.
Rating will be displayed if your store has the plan that allows Reviews and if a product has more than one published review.

Products per row on desktop

Defines the amount of products per horizontal row that will be displayed for Desktop devices.

The way in which this affects products, will be based on the details from the following table:

Option value	Device width	Products per row
5	≥ 1200px	5
5	≥ 991px	4
5	≥ 768px	3
5	≥ 576px	2
4	≥ 1200px	4
4	≥ 991px	4
4	≥ 768px	3
4	≥ 576px	2
3	≥ 576px	3

Products per row on mobile

Defines the amount of products per horizontal that will be displayed for Mobile devices with a width equal or lower than 575px.

Note: when choosing 2 products, the size of content elements such as name, price, etc., will slightly decrease to preserve the design of the information on smaller mobile devices.

Content alignment

Example of different alignments: Left, Center and Right respectively

Defines the alignment for all elements within the content area of blocks.

Space between

Allows to define if product blocks will have a space or gap between them.

The amount of space will be determined based on what you choose within Theme settings > Design > Theme styles > Spacing.

Note: This option won’t be visible if Spacing it’s equal to None.

Rounded corners

Allows to define if product blocks will have rounded corners or not. The way in which this is applied will vary based on:

If Card style for product blocks is enabled, the corners will apply to the entire block.
- If the Image padding option is disabled the image will also present rounded corners.
If Card style is disabled, corners will only be applied to the image.

Enable Quick view

Allows to enable the Quick View feature, which is explained in this section.

By enabling this, an icon will be displayed on the product blocks image area, which will be revealed when users “hover over it on desktop devices. For mobile devices, it will always be visible.

Name options

This group provides options to customize how the name of products look within blocks.

Size

When choosing Base size, the size of the name will be determined by what’s defined on the Font base size option.

When choosing Custom, you will be able to manually adjust the size for desktop and mobile devices, respectively.

Weight

Allows to adjust the weight of the product name within blocks.

Note: The weight will depend on the available variables of the font that you have defined for the Main font option within Theme settings > Fonts > Font selection.

Letter spacing

Allows to adjust the space between letters for all product block names.

All caps

Allows to force all product block names to be displayed in uppercase letters, even when they weren’t written like that: e.g. PRODUCT NAME.

Image options

Dimension

Defines the dimension for all product block images across the theme. The available options are defined based on aspect ratios, which are exemplified below:

Option	Aspect ratio	Example of image in pixels
Landscape	16:9	527 x 296
Portrait	3:4	527 x 702
Rectangular	4:3	527 x 395
Square	1:1	527 x 527

Display

Defines how the product images will adapt to the available space related to the dimension selected above.

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

Transition

Allows to define if a transition will be applied to the product block image, when users hover (mouseover) over them:

Grayscale on hover: image will be presented with its original color on start, and will transition to a black & white version on hover.
Grayscale on start: image will be presented with a black & white style on start, and will transition to its original colors on hover.
Show second image: The first image added to each product will be presented at the initial state. When hovering over the product block, it will show the second image within the list of product images.
Zoom: image will increase 10% of its original dimension.
None: Products won’t have any transition at all on hover state.

Note: Show second image will only work if the product has at least 2 images added. If not, when a user hovers on a product there will be no transition at all.

Information

The following group of options allows you to define which product details will be displayed in the content area of blocks.

SKU

Displays the SKU of products. It won’t be displayed if the SKU field is empty within a product configuration.

Brand

Displays the Brand of products. It won’t be displayed if the Brand field is empty within a product configuration.

Note: The order for these two attributes will be first SKU and then Brand, and they will be separated by a vertical line. This line won’t show if a product doesn’t have one of the two.

Ratings

Displays the rating stars and rating average score for products that have customer reviews.

Note: The Product Reviews feature on Jumpseller it’s only available for Pro plans and above. For more information about this feature, you can visit the following article.

Color options

Displays the first option of type Color along with its variants.

Note: If a product has 2 or more options of type Color, only the first one from the list of options will be displayed.

When enabling this a secondry group of options called Colors styles will show with the following options inside of it:

Position: defines the position in which colors will be displayed.
Corners: defines the styles of the color boxes.
Show image instead of color: allows to decide to show the image of each color (if assigned), instead of the “color box.

Actions & Buttons

This group of options includes one option called Show 'Add to cart' button, that when enabled will display the button to add products to the cart from any page of the store, without the need to access their individual pages (product page) to do so.

Products will be able to be added to the cart as long as they:

Don’t have status of Not available or Out of stock.
Don’t have options, e.g. size, color, etc. For the ones that do, a button with the text “See options” will be displayed, that will take users to the product page.

Also, a set of additional options will become visible for you to customize this section further:

Show Quantity selector

Displays the selector (or field) with which clients can choose the units they want to add to the cart for any given product.

Show status buttons

Displays a button for products that have a status of Not available or Out of stock at the bottom part of the block, which also takes to the respective product page.

Show ‘Buy now’ link

Displays a Buy now link below the Add to cart button.

This option it’s useful to streamline the purchasing process, allowing users to quickly complete their purchase with minimal steps, enhancing the experience and potentially increasing conversions.

This link works differently than the button, as it has its own funcionality which is explained next:

It will take users directly to the Cart or Checkout page, depending on what you have defined on your store’s admin panel at Settings > Checkout > Preferences > After adding a product to the cart.
If a user has products already added to cart, this link will create a new ID of the Checkout with just the product that was clicked.
If the user goes back to any other page (e.g. Home page) before finising the shopping process, the previous products that were added will still be there.

Show ‘Add to cart’ button on hover

This option allows to show the Add to cart button, along with the other elements that can be enabled, only when users “hover” over the product block.

Note: This will only be applied on Desktop devices. On Mobile devices, the button will always be visible.

Price options

This group of options allows you to define how prices will be presented on product blocks.

Alignment

Defines how prices will be displayed within blocks based on the following conditions:

when there’s an available and visible discount (promotion) applied and/or;
when a product has variants and a Range option has been defined.

The available options are the following:

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

Show ‘from/until’ text for variants

Displays a text before prices when a product has variants (e.g. Color, Size), like for example: from $200.

Variants price display

Defines how prices will be displayed for products that have variants and when these variants have different prices.

Minimum: It will display the lowest price across all variants.
Maximum: It will display the higher price across all variants.
Range: It will simultaneously display the lowest and highest price. The way in which they display will be defined by the Price alignment option mentioned above.

Show tax indicator

Displays a text next to the price indicating that the final price is “plus tax”. If the checkout tax settings indicate that the products already include tax, this text will not be displayed.

When enabled, the following options will become visible too:

Show label in all caps: forces the “tax text” to be displayed in uppercase letters, e.g. + TAX.
Show label only in max price: If Variants price display it’s equal to Range, the label will be displayed only for the higher price.

Labels appearance

The options within this group allow you to define how labels within product blocks will be presented. This will only apply for the following ones:

New, if enabled.
Out of stock or Not available statuses

Options are the following:

Size

When choosing Base size, the size of the labels text will be determined by what’s defined on the Font base size option.

When choosing Custom, you will be able to manually adjust the size for desktop and mobile devices, respectively.

Position

It allows you to define where product labels will be positioned over the image. The labels that this option considers are:

Shape

Defines the shape that labels will be presented with.

Discount label

This group of options allows to define how the Discount label will be presented, which will only display in the following cases:

If a product has a visible promotion.
If the promotion is not conditioned by a Code. In case it is, the label will show if the client has entered the code at the cart page.
If the label is not conditioned by customers groups. In case it is, the label will show when the client is logged in.

Display

Defines the way in which the label will be presented, as follows:

None: it won’t be displayed in any case.
Both: it will display both the text and the discount percentage, e.g. -10% OFF.
Percentage: it will display only the percentage, e.g. -10%.
Text: it will only display the text, disregarding the percentage, e.g. OFF.

If you wish to change the text of this label, you can do so on the Theme translations group, on the Discount label text field.

Note: This text will also be applied for the label that can be displayed within product pages, next to the price. If you don’t want to display a text, just leave the field empty.

Shape

Defines the shape that this label will have on product blocks.

Status label

When checking the Show option, two options to define the background and text color will be available.

This label will display for products that have a status of Not available or Out of stock.

‘New’ label

This group of options allow you to customize a label for products considered as “new”.

When enabling the Show option, the following ones will become available:

Threshold

Defines the amount of days at which a product will be considered as “new”.

Colors

You will find two options to define the background and text color of the label.

Card options

By enabling Card style all product blocks within the theme will be presented with a “card” or “box” style. Also, the following options will become available:

Shadow on hover

Applies a shadow at the back of the blocks when hovering on them.

Image padding

Creates a separation between the edge of the block’s background and the image.

Border

Displays a border on all sides of the block, to create a more visible difference between products, as well as with the content around them.

Border opacity

Allows to adjust the opacity (transparency) of the border, if enabled.

Content colors

Allows to choose the Color Pack for all product blocks.

Action buttons style

This group of options apply for the Quick View and Wishlist buttons that can be enabled within product blocks.

Font size

Allows to define the size of the buttons, with the following optinons:

Base size: the size will be based pre-defined calculations directly affected by the Font base size option located at Theme settings > Fonts > Sizes.
Custom: allows to manually adjust the size for desktop and mobile devices.

Product Quick View

This feature lets your customers preview product details without leaving the page they’re at, making the browsing experience faster and easier.

It will work and be visible as long as:

The Enable Quick view option is enabled at the Product block settings.
The Enable Quick view option is enabled on the Product mapping component settings.

The option to customize how this will look and behave are the following.

Display

Defines how and where the product details will be displayed, based on the following options:

Side bar: details will be presented on a lateral panel that will appear from the right side of the browser.
Modal: details will be presented within a Popup/Modal window on top of the store’s content, centered vertically and horizontally.

Show SKU

Displays the SKU of the product. It won’t be displayed if the SKU field is empty within a product configuration.

Show Brand

Displays the Brand of the product. It won’t be displayed if the Brand field is empty within a product configuration.

Note: The order for these two attributes will be first SKU and then Brand, and they will be separated by a vertical line. This line won’t show if a product doesn’t have one of the two.

Show reviews

Displays the rating stars and rating average score for products that have customer reviews.

Note: The Product Reviews feature on Jumpseller it’s only available for Pro plans and above. For more information about this feature, you can visit the following article.

Show stock

Displays the stock availability or status that a product has.

Show wishlist button

Displays the Wishlist feature. You can read more about it in this section.

Note: This feature is only available for stores subscribed to the Pro plan and above. For more information you can visit the following article.

Show description

Displays the product description with all its content.

Button text

Text that displays on the button that opens the Wishlist. This text won’t be presented next to the icon, but it’s useful for the browser and assistive technologies.

Content colors

Allows to choose a Color Pack for for the Quick View.

Product form

The options in this section apply mostly to the Product form subcomponent that’s available within the Product template and Single product components of the theme.

It also applies to the Quick View feature, for either of its Display options.

Form actions

Quantity selector

If enabled, the product quantity selector will be visible along with the form buttons.

‘Buy now’ button

Displays a Buy now button next to the Add to cart one, within the product form.

This option it’s very useful to streamline the purchasing process, allowing users to quickly complete their purchase with minimal steps, enhancing the experience and potentially increasing conversions.

It works differently than the Add to cart one, as it has its own funcionality which is explained next:

It will take users directly to the Cart or Checkout page, depending on what you have defined on your store’s admin panel at Settings > Checkout > Preferences > After adding a product to the cart.
If a user has products already added to cart, this link will create a new ID of the Checkout with just the product that was clicked.
If the user goes back to any other page (e.g. Home page) before finising the shopping process, the previous products that were added will still be there.

By enabling this option, the following ones will become available:

Set ‘Buy now’ as main: makes this button to be more relevant than the Add to cart, therefore, styles will switch between both.
Hide ‘Buy now’ when disabled: hides automatically the Buy now button when the action is not possible to perform, like for example when a product has variants and one of them is Out of stock.

Options & variants

This group of options allow to control aspects related to product options and their variants within the form.

Start on first gallery image

If enabled, the product gallery will start on the first image instead of the image associated with the first or selected product variant.

Options display

Defines how product variants of a Product option of type option will be displayed:

Buttons: Variants will be displayed with a “button” or “pill” style. The style will vary depending on the status of each variant:

Not selected: will have a border around.
Selected: will have a fill background color.
Out of stock: will show a diagonal line across and on top of the variant name, along with a decreased opacity.

Select

Variants will be displayed within a list selector.

Note: Options of type Color will always be displayed with “button” style.

Available tag for Product stock

This option is related with the Stock subcomponent that’s available within the Product template and Single product components.

Allows you to show or hide the label that can be displayed mentioning the “availability” of a product. The text in it will be as follows:

Available in stock for variants that have stock.
Out of stock for products with stock equal to zero (0).

Exact stock amount

Changes the behavior of the Stock label mentioned above and instead of a text, the stock amount for the variant will be displayed, like for example: 10 units in stock.

Note: For variants where Unlimited stock is enabled, it will always show the text “Available in stock”.

Hide variants without stock

Hides all the variants that don’t have stock, from the list of product options on the theme, therefore, they will not be able to be selected by users.

Hide locations without stock

Hides all Locations that don’t have stock, which are visible within the Stock locations panel that’s displayed when clicking on its respective button.

Note: For more information about the Stock Locations feature, you can read the following article.

Statuses

Contact button

Displays a button that takes to the Contact page of the store, within the message that show for products with Out of stock or Not available statuses.

WhatsApp button

Displays a button that takes to the WhatsApp app on mobile devices and to WhatsApp web on desktop.

This button displays within the message that show for products with Out of stock or Not available statuses as well.

Note: The WhatsApp number connected to this button will be the one added in your store’s admin panel, within Settings > General > Preferences > Social media.

Price & taxes

Show tax indicator

Displays a text next to the price indicating that the final amount considers tax.

If the checkout tax settings indicate that the products already include tax, this text will not be displayed.

When enabled, the Indicator in all caps option will show allowing you to force the text to be displayed in uppercase text, e.g. + TAX.

Show price without tax

Allows to show the product price without including taxes.

Appointments

The following options will only work for products of type Appointment.

Show duration

Displays the Duration details defined at the appointment settings, before the calendar.

Show location

Displays the Location details defined at the appointment settings, before the calendar and after the Duration (if enabled).

WhatsApp button

This section allows you to display a floating WhatsApp button across all layouts of the theme.

By enabling the Enable button option, the following settings will be displayed for you to customize it.

Note: The button will display as long as you enable it here and if you have defined a WhatsApp number in your store’s admin panel at Settings > General > Preferences > Social media.

Appearance

Position

Defines the position in which the button will be displayed within the browser window.

Animation

Shows a “tilting” animation on the back of the button, based on the background color that was defined for it.

Colors

You will find the following color options to customize how the button looks:

Icon color: Color for the WhatsApp icon or logo.
Background color: Color for the background of the button.
Background color (hover): Color for the background of the button on “hover” state (when passing the cursor over).

Call to action

This group of options allow you to display a message next to the button to encourage clients to click on it or so it has more presence.

When filling the Message option field the following ones will become available.

Note: The placement of this text will depend on what you choose at the Button position option.

Days to remain closed

Defines the amount of days for this message to not be visible once users opt to close it.

Colors

You will find two options to define the color of the background and text.

Messages

This group of options allow you to define predefined texts that will appear on the WhatsApp app (mobile) and WhatsApp web (desktop), depending on the page users are when they click on the button.

Contact

This text will be displayed when users click the button on any page, with the exception of the product page.

Product page

This text will be displayed when users click on the button while they in store’s product page.

Add to cart notification

This section allows you to display a message notifying clients that the products they add were effectively added to the cart.

This message will override any behavior and/or redirection options that are defined in the store’s admin panel at Settings > Checkout > Preferences.

By checking the Enable option notifications will show when a client adds a product.

If disabled, it will consider the following options from the admin panel:

Stay on the same page: the page will reload and the product will be added to the cart.
Redirect to Cart: the page will load and take the customer directly to the Cart page of your store (first step of the purchasing process).
Redirect to Checkout: the page will load and take the customer directly to the Checkout page of your store (second step of the purchasing process).

When enabled, the Position option will show allowing you to choose the placement at which notifications will be displayed. This will always be on the right side of the browser window.

This section allows you to display a popup message that will be vertically and horizontally centered within the browser.

Even when its name relates to the usual age verification messages, you can eventually use it for anything you want.

By checking the Enable option, the following ones will become available for you to customize it.

Content options

Within this group you will find two options to add a Title and a Text, which will display at the start of the message.

Buttons

This group provides options for you to customize the buttons of the message.

Accept button

Text for the button with which clients can accept.

Reject button

Text for the button with which clients can reject or decline.

Redirect link

Allows you to add a link for clients to be redirected once they click on the Reject button.

Appearance

The following group provides color options for you to customize the message.

Accept button color: background color for the Accept button.
Reject button color: background color for the Reject button.
Popup background color: background color of the message.

Note: The text color for the buttons will be automatically adjusted based on contrast.

Articles

This section allows you to customize certain settings regarding Articles (pages) within the theme.

Articles are the preview blocks that display the image and content of a page.

Note: we will refer as Content to the information such as Date, Title, Excerpt and Link/Button.

Appearance

Within this group you will find options to customize the design and look of them within the theme.

Content order

Defines the order of the elements that display within the content area, which is the one that goes just below or after the article image.

Here you can reorder the options by dragging them up and down, to define the position that feels better for you.

Some things to consider are:

The Date and Excerpt will be displayed if you have enabled their respective options within the Information group that can be found further down.
Categories will be displayed if you have enabled the Show categories option within the Categories group that can be found further down.
Link (or button) will be displayed if you have enabled the Show option within the Link group that can be found further down.

Style

Defines the style for all Articles within the theme, based on the following options:

Classic: The content for all articles will stack vertically, one below the other and after the post image.

Minimalist: The content for all articles will be placed on top of the image. Also, an Overlay element will be displayed between the image and content to generate a contrast between both.

Show image

Defines if the image of articles should be displayed or not.

For the case of the Minimalist style, the color of the the background and elements will be determined based on the Color pack you choose within the Content colors option.

Space between

Allows to define if articles will have a space or gap between them.

The amount of space will be determined based on what you choose within Theme settings > Design > Theme styles > Spacing.

Note: This option won’t be visible if Spacing it’s equal to None.

Rounded corners

Allows to define if articles will have rounded corners or not. The way in which this is applied will vary based on:

For the Classic version it will be applied just on the image.
- If Card style is enabled, it will apply to both the card and the image.
- If Card style is enabled and Image padding is disabled, it will only apply to the card.
For the Minimalist version it will be applied to the entire block, as well as to the Overlay element.

Card style

By enabling this option all articles within the theme will be presented with a “card” or “box” style.

Also, the following options will become available:

Shadow on hover: Applies a shadow at the back of the blocks when hovering on them.
Image padding: Creates a separation between the edge of the block’s background and the image.
Border: Displays a border on all sides of the block, to create a more visible difference between articles, as well as with the content around them.
Border opacity: Allows to adjust the opacity (transparency) of the border, if enabled.

Content colors

Allows to define a Color Pack for all the Articles within the theme.

Title

This group of options allow you to customize the design of all article’s titles.

This group of options allows you to define the design and appearance of the titles for all Heading sections within the theme:

Size

Defines the size for all titles based on pre-defined calculations directly affected by the Font base size option located at Theme settings > Fonts > Sizes.

When choosing Custom, you will be able to manually adjust the size for desktop and mobile devices independently.

Weight

Defines the weight for all titles.

Note: The weight will depend on the available variables of the font that you have defined for the Main font option within Theme settings > Fonts > Font selection.

Letter spacing

Allows to adjust the space between letters.

All caps

Allows to force all titles to be displayed in uppercase letters, even when they weren’t written like that: e.g. TITLE.

Information

Date

Displays the date on which articles were created.

It will also show the Date format option, so you can define the one that’s best for you:

Abbreviated: e.g. Mar 9, 2025
Basic: e.g. 3/9/2025
Date & Time: e.g. March 9, 2025 at 4:05 am
On Date: e.g. on March 9, 2025
Standard: e.g. March 9, 2025

Excerpt

Displays a shorter version of the article’s content.

By enabling it, the Characters length option will become visible with which you can define the amount of characters the description will be limited to.

Link

Show as button

Displays the link of each article as a button within the content area of each article.

If disabled, the image and title will still be clickable for customers to go and read it.

The following options will become available as well:

Outline style: the button will be presented with a border around it. If disabled, the button will have a filled background color.
Enable arrow in button: displays an arrow next to the text of the button.

External link

When clicking on an article, the link to their single page will be opened in a new browser tab.

Shopping process

This section allows you to customize the design and certain settings that are applied to the Shopping process pages: Cart, Checkout, Review and Success.

The options within this section will have an effect on all the process pages if you have selected Classic within Checkout > Checkout form.

For the case of the Standard version, the options here will only be applied to the Cart page.

Content colors

This option allows you to choose a Color pack for the shopping process pages.

Logo

This group allows you to add a logo especifically for these pages through the Custom logo option. Which will override the one added on Settings > General > Branding, if one is uploaded there.

If no logo it’s uploaded, the Store name will be displayed.

Heights

You will find two options to adjust the height of any instance of a logo for desktop and mobile devices.

The Cart sidebar it’s a lateral panel that displays the summary of a customer’s order, which includes the following:

Products list that customers add to cart, where they can change the quantity and/or delete them.
The Summary of the order, such as Subtotal, Shipping, Discounts, etc.
Actions buttons, such as Go to Checkout and Go to Cart.

When enabling the Show sidebar option, the following ones will become available:

Show icon: Allows to display an icon next to the sidebar’s title.
Buttons priority: Defines which of the buttons available in this section will have top priority. The one you choose will have a filled background style, while the other will have an outlined style.

Success page

The options within this group allow you to define aspects of the final page of the shopping process.

Note: Will take effect only for the Classic checkout form version.

Show message

Adds an additional message below the main one that’s already displayed by default.

By enabling this option, the following ones will become available:

Text: Defines a text for the message.
Link: Displays an action after the text for clients to interact with, based on the following options:
- Default location email: It will display the email of the Location defined as the Main/Default within ***Settings > General > Locations***.
- General email: It will display the email defined in the store’s admin panel within ***Settings > General > Emails***, at the end of that section.
- Link to contact page: It will display a button-styled link that will take clients to the contact page of your store upon click.
- Don’t show anything: It won’t display nothing after the message text.

Product table at success page

Displays the list of products that a customer purchased, at the very end of the page.

Note: in some countries this is mandatory to be displayed by laws and regulations.

Custom codes

This section and its options allows you to add custom and/or external codes to the theme, so you don’t necessarily have to edit the code of it.

This is useful and most used for scripts or tools like:

Google Analytics
Google Tag Manager
Mailchimp manual integration
Facebook Pixel
TikTok Pixel
Other tools for performance and/or metrics such as Hotjar, CrazyEgg, etc.

Note: For installing, adding and/or using tools such as Google Analytics, Google Customer Reviews, Facebook pixel and TikTok pixel, Jumpseller already has the necessary fields within the store’s admin panel at Settings > General > Preferences > Analytics Settings.

The available options are the following:

Top head code

It allows you to add an external code at the start opening <head> tag of the theme code.

Bottom head code

It allows you to add an external code at the end/closing <head> tag of the theme code.

Top body code

It allows you to add an external code at the start opening <body> tag of the theme code.

Bottom body code

It allows you to add an external code at the end/closing <body> tag of the theme code.

Note: these fields don’t support the use of liquid tags. So if you need to use something like that, it will necessarily have to be done directly within the theme code through the Code Editor.

Disable shopping features

This section allows you to control the behavior of some features across the theme, which are related to shopping options for your customers.

Disable product prices

Hides the prices for all products across the theme.

Note: If you don’t disable the next option, merchants could still be able to purchase products even when prices aren’t visible.

Disable all shopping features

This option allows you disable all the shopping features across the theme, such as the following:

Header Cart item: the one that’s available at the right side on the Header of the theme.
Add to cart buttons: on the product page, as well as product block buttons, even when they’re enabled to be displayed within its respective settings.

Message

When enabling the previous option, a message will be displayed on all store’s Product pages, which you will be able to customize with the options found below.

Title: defines the title of the message.
Text: defines the text of the message.
Show contact button: Shows a button that will take customers to the contact page of the store upon click.
Show WhatsApp button: Shows a button that will open the WhatsApp app on a Mobile device or WhatsApp web on a desktop device.

Note: The WhatsApp number connected to this button will be the one added in your store’s admin panel, within Settings > General > Preferences > Social media. If no number is added there, this button won’t be displayed.

Theme translations

Within this section you will find several groups and fields that will allow you to translate texts within the theme.

This can go from texts in messages, to texts within buttons and links.

These are divided into groups, like for example the following:

Shopping actions: contains fields related to purchasing contexts, like for example the Add to cart button and Buy now link.
Information & status messages: contains fields related to prices, information and product statuses.
Account related: contains fields related to customers.
Cart & order: contains fields related to the cart shopping process.
Error or empty states: contains fields related to messages when for example there’s no match in a search result, a category or the wishlist it’s empty.

For Every Business

Sales Channels

Design & Customization

Payments & Shipping

Apps

Support

Theme main settings

Colors

Packs

Packs options

Wishlist

Other colors

Fonts

Font selection

Sizes

Design

Store name

Theme styles

Buttons

Borders

Store Carousels

Store icons

Animations

Wishlist

Breadcrumbs

Headings

Alignment

Titles

Subtitles

Descriptions

Filters

Display

Types

Other options

Product block

Appearance

Name options

Image options

Information

Actions & Buttons

Price options

Labels appearance

Discount label

Status label

‘New’ label

Card options

Action buttons style

Product Quick View

Product form

Form actions

Options & variants

Statuses

Price & taxes

Appointments

WhatsApp button

Appearance

Call to action

Messages

Add to cart notification

Age verification popup

Content options

Buttons

Appearance

Articles

Appearance

Title

Information

Categories

Link

Shopping process

Content colors

Logo

Cart sidebar

Success page

Custom codes

Disable shopping features

Disable product prices

Disable all shopping features

Theme translations

Related Articles