Support Center

How to Configure Starter Theme

Starter is a theme packed with new features. It’s a flexible theme that’s suitable for all stores, allowing you to quickly set up a store and start selling.

Features

  • New components
  • First theme with subcomponents
  • First mobile responsive theme
  • Different layouts provided for Header and Footer
  • Available in different languages

Install Starter from Our Theme Gallery

How to install Starter

Log in to your store and go to Themes > Gallery. Search for the Starter theme and install it.

How to install starter theme

Configure the Starter theme with a Visual Editor

Configure Starter with Visual Editor After installation, you can click on Customize to open our Visual Editor and configure your theme.

General Configuration

In this section you can select and configure different options for your store.

Disable Shopping features
If enabled, all Shopping features will be hidden, like ‘Add to Cart’ buttons, the ‘Header Cart icon’, etc.

Disable Product Prices
If enabled, all product prices will be hidden so customers won’t be able to see them.

Enable Repeat Order (Customer Account)
Enables or disables the option for customers to repeat orders from their order’s history.

Button Style
Choose a Rectangular (default), Radius, or Circular shape.

Choose which style of button you would like to use in the store.

Products per Page (Category)
40 (default), 36, 24, 12

How many products will be displayed per page on category pages.

Products per Page (Search Results)
40 (default), 36, 24, 12
How many products will be displayed per page on the ‘Search results’ page.

Shopping Process

In this section you can configure some options in the purchase process on the cart page. You can activate the breadcrumb, activate the number of steps or hide the country selector.

Enable Cart Logo
Allows you to display a Logo in all three shopping process pages: Cart, Checkout and Review Order.

Cart Logo
If empty, ‘Header logo’ will be displayed by default, unless you disable this in the previous option.

Cart Logo height
50 pixels (default)

Allows you to define the height (in pixels) that the Logo will have. This applies to ‘Cart Logo’ and ‘Header Logo’ if the first one is not uploaded.

Enable Cart Breadcrumbs
If enabled, a ‘Breadcrumbs’ list will be displayed after the Logo. These are the 4 pages (or steps) that customers need to go through in order to complete an order.

Enable Cart Breadcrumbs numbers
If enabled, a number will be displayed before each Breadcrumb item name.

Hide Country selector
If enabled, ‘Country’ selectors will be hidden from the ‘Estimate Shipping’ on the Cart page and from the ‘Shipping Address’ and ‘Billing Address’ on the Checkout page.

Store Information

This information will be used on some options of this theme as Store Message. Store Information

The following information will be shown in the Store Message

  • Contact Email
  • Sales Email (optional)
  • Phone (If you want to add more than one phone number, simply separate them with a comma.)
  • WhatsApp
  • Main Address
  • Link to Google Maps (If you need to display your store’s Main Address through a link to Google Maps, place the link here.)
  • Business Hours (You can place the days and hours your store is open for business.)

Store Message

This option is used when you want to leave a maintenance page or while configuring the theme. It’s useful when you don’t want to make your store available in situations like a price or design update. Store information will look like this

Enable Store Message
If enabled, displays a full-page section that blocks the store front-end preventing customers from shopping.

Background Color
The background color of the message.

Content Color
Color of the elements/content of the section, like Titles, Texts, Links, etc.

Content Color > Hover
Color of the links on hover transition (mouse over).

Enable Social Nets
Allows you to display the list of Social Networks (e.g. Instagram, Facebook) added to the store in ‘Settings > General > Social Media’.

Enable Contact Information
Allows you to display the list of Contact Information items (e.g. Email, Address) added to the store in ‘Themes > Visual Editor > Edit Settings > Store Information’.

Logo
Allows you to display a Logo in the message.

Logo height
40 pixels (default)
Allows you to define the height of the Logo for the section.

Title
Main Title of the section.
Example: “We are working on something special for you”

Text
Text that is shown below the title, to give more context about what the message is about.
Example: “We can’t wait for you to see it. Please check back soon”

You have the option to enable or disable this option, as well as customize the text in the search field. Store Search Settings

Enable Store Search
Allows you to enable/disabled all the functionalities related to search in the store.

Background Color
Background color of the search section.

Text and Button Color
Color of the text of the input (search input) and the button.

Search Text
Placeholder that is displayed in the search input.
Example “Search for products here…”

Theme Colors

Set your theme colors. You can customize the color of titles, texts, buttons, prices and discounts. Theme Colors Settings

Main Color
Color used mostly in titles and certain elements of main relevance in the store.

Secondary Color
Color used mostly in subtitles, texts/descriptions and certain elements of secondary relevance in the store.

Tertiary Color
Color used in certain sections, details and elements of the store like backgrounds.

Default Button > Text Color
Color of the text of the ‘Default Button’.

Default Button > Background Color
Background color of the ‘Default Button’.

Default Button > Background Color (Hover)
Background color of the ‘Default Button’ on hover transition (mouse over).

Main Button > Text Color
Color of the text of the ‘Main Button’.

Main Button > Background Color
Background color of the ‘Main Button’.

Main Button > Background Color (Hover)
Background color of the ‘Main Button’ on hover transition (mouse over).

Secondary Button > Text Color
Color of the text of the ‘Secondary Button’.

Secondary Button > Background Color
Background color of the ‘Secondary Button’.

Secondary Button > Background Color (Hover)
Background color of the ‘Secondary Button’ on hover transition (mouse over).

Prices Color
Color used for all the elements that relate to a price in the store, except when it has a visible discount.

Discount Color
Color used for all the elements that relate to a discount in the store.

Theme Fonts (Sets)

You can setup a font family set to save time in your theme configuration process. Theme Fonts Sets Configuration

Enable Font Set
If enabled, your store will use the predefined ‘Font Sets’, from which you can select what set to use.

Font Set (Google Fonts)

  • Montserrat + Lato (default)
  • Oswald + Roboto Sans
  • Archivo + Archivo Narrow
  • Poppins + Lora
  • Source Serif Pro + Source Sans Pro
  • Playfair Display + Work Sans

Choose which Font combination from Google Fonts (fonts.google.com) you would like to use in the store.

Theme Fonts (Individual)

You can setup fonts individually if you don’t want to use the font set configuration. Theme Fonts Individual Configuration

Individual Font selection
If enabled, you can manually select the ‘Main’ and ‘Secondary’ fonts for your store.

Google Fonts - Main Font
Montserrat (default)
Choose which Font will be used as the ‘Main’ font for your store.

Google Fonts - Secondary Font
Roboto Sans (default)
Choose which Font will be used as the ‘Secondary’ font for your store.

Theme Header

Choose the version of the ‘Header’ you would like for your store. You can check how each version looks and works in the theme documentation. (Version 1 is the default)

Version 1 Theme Header Version 1 Version 2 Theme Header Version 2 Version 3 Theme Header Version 3 Header Versions

Header Width
Grid Width (default) - Browser Width: The width of the ‘Header’ takes 100% of the browser’s width; Grid Width: The width of the ‘Header’ aligns with the maximum width that the store’s grid has, which is about 1300px wide.

Header Fixed If enabled (suggested), ‘Header’ will be fixed at the very top of the browser and follow the user as they scroll through the store. If disabled, it will always stay at the top of the page.

Background color
Background color of the ‘Header’.

Texts color
Color of all the items available in the ‘Header’, like titles, texts, descriptions, links, etc.

Header Logo
Example: your_logo.svg or your_logo.png
Logo ideally in .svg format (vector). If not, we recommend that you upload it in .png format (with transparency).

Theme Header Logo

Header Logo > Mobile version
Example: your_logo.png
Optional. Logo that is displayed in Mobile devices that has a width less than 575px. If not uploaded, ‘Header Logo’ will be displayed for all devices.

Header Logo (ALT title)
Example: Your Company Name
Alternative (ALT) title for the logo. This is helpful for your Store’s SEO. If you leave this empty, the text ‘Logo Store Name’ will be placed by default.

Enable Header Login item
Allows you to show or hide the ‘Login/Register’ icon that opens the Sidebar panel for Customers to Login or Register in your store.

Header Navbar > Background color
Background color for the ‘Navbar’ menu, which is only visible and available in Header ‘Version 3’.

Header Navbar > Content color
Color of the elements and content in the ‘Navbar’, like links, texts, arrows, etc.

Header Navbar > Enable Social Media links
If enabled, ‘Social Media’ links will be visible in the ‘Navbar’ menu on the right side of it, and therefore, after the menu items added in ‘Navigation > Main Menu’.

In Starter you have 3 layout styles for the footer. You can choose the one that best suits your needs. Theme Header Configuration

Footer Version
Choose the version of the Footer you would like for your store. Each version relates to the ones available at ‘Themes > Navigation’.

Version 1 Theme Footer Version 1 Version 2 Theme Footer Version 2 Version 3 Theme Footer Version 3 Footer Versions

Available Versions: Version 1 (default), Version 2 or Version 3

Background color
Background color of the ‘Footer’.

Texts color
Color of all the items available in the ‘Footer’, like titles, texts, descriptions, links, etc.

Footer Logo
Example: your_logo.png
Logo ideally in .svg format (vector). If not, we recommend that you upload it in .png format (with transparency).

Footer Logo (ALT title)
“Your company name” Alternative (ALT) title for the logo. This is helpful for your Store’s SEO. If you leave this field blank, ‘Logo Store Name’ will be placed by default.

Remove ‘Powered by Jumpseller’
Allows you to remove the ‘Powered by Jumpseller’ text that is displayed in the Footer of your store.

Enable Social Networks
Allows you to show/hide the list of Social Networks of the store in the Footer.

Social Networks Title
“Follow us” Title that will be displayed alongside the list of Social Networks.

Enable Contact Information
Allows you to show/hide the list of Contact Information details of the store in the ‘Footer’. Only available for Footer’s versions 2 and 3.

Contact Information Title
“Contact us” Title that will be displayed along with the list of Contact Information details.

Footer Newsletter Configuration To use the newsletter features you must create an account in mailchimp and use the data from it.

Enable Newsletter (with Mailchimp) Allows you to show/hide the Newsletter section in the Footer. Only available for “footer version 3”.

Newsletter Title
“Join our Newsletter” Title that will be displayed in the Newsletter section of the Footer.

Newsletter Description
Description that appears after the title of the section.

Newsletter URL
Mandatory. URL of the ‘Mailchimp Form’ which subscribers will join.

Audience ID number
Mandatory. This is an alphanumeric code that needs to be included, in order to prevent bots/spam emails from subscribing to your Mailchimp account.

Newsletter Disclaimer
Text that is displayed below the Newsletter form. This is helpful to let customers know they accept terms before subscribing.

Newsletter Field - Text
Your email here
Text that is displayed in the field where customers will type their email.

Newsletter Field - Text Color
Color of the text that goes inside the input where customers will type their emails.

Newsletter Field - Background
Background color of the input where customers will type their emails.

Newsletter Button - Text
Subscribe
Text that is displayed in the button of the form.

Newsletter Button - Text Color
Color of the text of the button of the Newsletter form.

Newsletter Button - Background
Background color of the button of the Newsletter form.

Theme Custom Codes
Newsletter Field - Color of the text that goes inside the input where customers will type their emails.

<head> custom code
Allows you to place any custom code you need at the end of the <head> tag of your store. This is useful for any plugins and/or tools you wish to install.

<body> custom code
Allows you to place any custom code you need at the end of the <body> tag of your store. This is useful for any plugins and/or tools you wish to install.

Configure Starter with Visual Editor If enabled, all payment methods you enable will be displayed in the Footer of your store.

Theme Custom Codes

Add custom code to head or body Allows you to place any custom code you need at the end of the ‘<head>’ tag of your store. This is useful for any plugins and/or tools you wish to install.

This sidebar is visible on mobile devices, and when you use version 2 of the header. You can configure colors, logo and information. Sidebar Menu Configuration

Sidebar Alignment
How elements of the sidebar will be aligned: left or centered.

Sidebar Menu Logo
You can upload a Logo that is displayed at the top of the Sidebar.

Enable Social Networks
Enable Social Networks icons below the main menu inside the Sidebar Menu.

Social Networks - Title
Title of the ‘Social Networks’ section.

Enable Secondary Menu
Enables the ‘Secondary Menu’ which is available to use in ‘Themes > Navigation > Secondary Menu’.

Secondary Menu - Title
Title of the ‘Secondary Menu’ section.

Enable Contact Information
Allows you to display the list of ‘Contact Information’ details available in ‘Themes > Visual Editor > Edit Settings > Store Information’ like email, phone, etc.

Contact Information - Title
Title of the ‘Contact Information’ section.

Store WhatsApp

Add a WhatsApp button to your home page and products for your customers to contact you.

Enable WhatsApp Button
Enables a Whatsapp button that follows users as they scroll through the store. We recommend not enabling this feature if you’re going to use a plugin or integration that will also display a button.

Store WhatsApp Button Configuration

Enable on Product Page
Allows you to display a WhatsApp button in the message that will appear for products that have a status of ‘Not available’ or ‘Out of stock’. This button will be displayed below the ‘Contact us’ button, if enabled as well. In order for this button to work, you need to add your WhatsApp number in ‘Settings > General > Business Information > Social Media’.

WhatsApp Button position
Allows you to select the position of the WhatsApp Button, which will be in one of the corners of the store.

WhatsApp Button margins
Allows you to define the margin (separation) that the button will have with the browser corner you define.

WhatsApp Button > Background color
Background color of the WhatsApp button.

WhatsApp Button > Background color (hover)
Background color for the WhatsApp button on hover status (mouse over).

WhatsApp Button > Icon color
Color of the icon (logo) for the WhatsApp button.

Store Currencies

If your store uses more than one currency, or you want to show the value of your products in other currencies, you can activate this function. You must have an ‘Open Exchange Rates’ account for this to work.You must have created an ‘Open Exchange Rates’ account first in order for this to work. You can read more here

Store Store Currencies

Enable Additional Currencies
Enables the feature to display different currencies in your store. Note: Customers will ultimately pay in the currency you have defined in ‘Settings > General’.

List of Additional Currencies
Allows you to add additional currencies for your store, like USD, EUR, etc. Add the 3 letter codes for each currency you want to display, separated by a comma (,).

Open Exchange Rates App ID
Here you need to paste the ‘App ID’ token that you can find in your ‘Open Exchange Rates’ account.

Add to Cart Notification

Add to Cart Notification

Enable Add to Cart Notifications
If enabled, a message will be displayed in the right side of the browser to notify customers that a product has been added to cart.

Notification Backgroud Color
Background color of notifications.

Notification Text Color
Color of the text for notifications.

Notification Position
Allows you to select if the notification will be displayed at the ‘top’ or ‘bottom’ of the browser, on the right side.

Informative Slider

Add a bar with information or promotions at the beginning of your store. You can configure the amount of notices, bar color and text. Informative Slider

Enable Slider
Enables the Slider at the top of the page.

Enable in Shopping Process
Enables the Slider on the Shopping Process pages like Cart, Checkout and Review Order.

Enable Fixed Position
If enabled, the ‘Slider’ will be fixed at the top of the browser and before the Header, on desktop devices. If disabled, the ‘Slider’ will not be fixed and will be placed between the Header and the store’s content. This will be default and also work for Mobile devices.

Background color
Background color of the Slider.

Texts color
Color of the texts and links of the Slider.

Slides Order
1,2,3
Allows you to reorder the ‘Slides’ without the need to copy/paste information from one field to the other.

Slides speed
4 seconds (default)
Time that takes to pass from one ‘Slide’ to the next, in seconds.

Enable Slide 1

  • Slide 1 - Text
  • Slide 1 - Link to page
  • Select one Link
  • Optional. Add a link to a page of the website. If you leave this field blank no link will be added.

Slide 1 - Link Text
Text that will be displayed on the link.

Enable Slide 2

  • Slide 2 - Text
  • Slide 2 - Link to page
  • Select one Link
  • Optional. Add a link to a page of the website. If you leave this field blank no link will be added.

Slide 2 - Link Text
Text that will be displayed on the link.

Enable Slide 3

  • Slide 3 - Text
  • Slide 3 - Link to page
  • Select one Link
  • Optional. Add a link to a page of the website. If you leave this field blank no link will be added.

Slide 3 - Link Text
Text that will be displayed on the link.

Enable Slide 4

  • Slide 4 - Text
  • Slide 4 - Link to page
  • Select one Link
  • Optional. Add a link to a page of the website. If you leave this field blank no link will be added.

Slide 4 - Link Text
Text that will be displayed on the link.

Category Page - Carousels

Here you can configure options for Carrousels on the Category Page. If you have subcategories it will display more carousels. Category Page - Carousels Configuration

Product Block

Here you can configure how your product blocks will be displayed across the store. Product Block - Configure how will display your products blocks on the store

Product Page - General Configuration

Here you can configure the breadcrumbs display option, as well as Product Information alignment, Show Product Brand, Brand in uppercase,Show Product SKU, Product SKU in uppercase, Show Product Stock, Colors, Contact button and more. Product Page Configuration

Add zoom to your product page and also define the zoom type, tooltip text, autoplay option, image corner style. Product Page Configuration

Product Page - Custom Fields

At the Custom Fields section you can, for instance, include information about product attributes such as brand, design (for example super heroes, music bands, etc) and any kind of information that won’t generate a product variant.

Note: Remember to add your custom fields on the page product from your admin panel. Product Page - Custom Fields Configuration

Product Page -Admin Product Custom Fields

Product Page - Accordion

Add relevant information about your products, including characteristics, shipping times or guarantees. This information can be displayed in a minimalist format. Product Page - Accordion Configuration

Contact Page

Set up your contact page here. You can modify colors, add your address or your social networks. You can also display a map from Google Maps. This information comes from the general settings of the theme. Contact Page - Configuration

Customer Forms

Here you can add or modify the text on the login or registration pages. Contact Forms - Configuration

Blog & Articles

If you want to use the Blog component, you must configure the category of your articles here. Remember not to add categories to your content pages, for example about us, or terms and conditions. Only use the categories for content related to your blog. Blog & Articles - Configuration

Components

Slider

One of the most used components, which allows you to use a full image or a background image with a title, description and the option to add a button. You can configure different images for desktop and mobile. Check all the options and create an attractive slider. Remember to optimize your images and use the recommended sizes for this component.

Content Color
Color for the Subtitle, Title and Description of the ‘Slide’.

Button Text Color
Color of the text that is displayed inside the Button of the ‘Slide’.

Button Background Color
Background color of the button of the ‘Slide’.

Image (desktop) Alternative Text
Image for Desktop and Tablet devices with a minimum suggested width of 1600px and in .jpg format.

Image (mobile) Alternative Text
Image for Mobile devices with a maximum width of 575px and in .jpg format.

Content Alignment
Select Right, Center or Left
Position (or alignment) of the content of the ‘Slide’ (subtitle, title, description and button). For mobile devices the content will be center aligned by default.

Subtitle
Insert your subtitle text
Subtitle of the ‘Slide’. Only necessary if ‘Slider Type’ is ‘Image + Text’.

Title
Insert your title
Title of the ‘Slide’. Only necessary if ‘Slider Type’ is ‘Image + Text’.

Description
Description of the ‘Slide’.
Only necessary if ‘Slider Type’ is ‘Image + Text’.

Enable Link (button)
Displays a button that works as a link.

Link
Page to where customers will be redirected to when clicking. This can be a page, category or even a product.

Link Text
View More
Text that will be displayed inside the link (button). It should be brief, direct and attractive.

Enable Link Arrow
Displays a right arrow inside the link (button).

Trustbar

This component lets you display important information related with your store.
Configure how many ‘blocks’ will be shown in Desktop devices. For tablet devices it will always be 2 and for Mobile devices only 1.
You can change the margin, colors and icons.

Display your featured products on a grid or carousel. You can add a title, description and link to a category.

Blog

If you have a blog in your store, the blog component will help you display your content in a more attractive way. You can display your content through a grid, multiple carousels or a single carousel. You can configure the speed of your carousel or add a title, subtitle, description and link to your content. You can also change the margin, padding and colors.

Video

The purpose of this component is to allow you to add videos from YouTube or Vimeo in a simple way. To do this you must use the embed code generated by these platforms. Make it more attractive by adding an image as a title and description, inviting viewers to take a look at your content.

Image Sizes

We suggest you optimize images before uploading them. To do so, you can use tools such as https://tinypng.com or https://compressjpeg.com/.

Slider Component

  • Slider Desktop Size - Recommended sizes 2048 px (width) x 1024 px (height).
  • Slider Mobile Sizes - Recommended sizes 960 px (width) x 1200 px (height).

Banner Component

  • Banner Size (Desktop and Mobile) - Recommended sizes 570 px (width) x 878 px (height).

Categories Component

  • Category Block Icon - Recommended sizes 50 px height.
  • Category Block Background Image - Depends on your content: you can use a pattern or full image.

Logos slider Component

  • Logo sizes - We recommend a maximum of 220px width and a proportional height.

Testimonial Component

  • Author Image - Recommended size 100x100px.

Start your journey with us!

Free trial for 14 days. No credit card required.