Customize your theme
Personalize your online store theme
Your theme reflects the identity of your brand. In Jumpseller our themes have distinct customization feature to create unique experiences to your customers. We call these options Theme Options
On this Guide
Theme Options
Technically a Theme Option is a field in a Jumpseller store that can contain information like images, texts, links, numbers, files, colors, boolean values, etc. They are used to customize the design of your store without the need of understanding HTML/CSS, that is the markup language used to design websites.
After selecting a Theme, in your Admin Panel: Themes > Theme Options, all options from the selected theme will be displayed.
On this guide we will show you general instructions and example on how to use options that are included in most themes.
Links on Banners, Sliders, Buttons or Text
Get the link to the page that you want to connect to the element. Links can be internal, or external and should follow this format:
- Correct: /page-name
will point to www.yourstore.com/page-name
- Correct: //www.yourstore.com/page-name
will point to www.yourstore.com/page-name
- Correct: //google.com
will point to google.com
- Incorrect: https://example.com
don't use HTTP://
or HTTPS://
on links, just use //
like in //example.com
Get the link to your store pages in the "Search Engine Optimization" settings: Product, Categories and Pages have these options.
For example on Category pages: Scroll down to the "Search Engine Optimization" where you can get the category's permalink. Then, by typing that permalink in the theme option "Banner Link", it will redirect the banner to the category page.
Subscription Forms
Some themes contain a subscription form that allows you to connect your store to Mailchimp, an easy to use email marketing tool. To install follow these steps:
- Step 1: Get the action code of a list on Mailchimp, use this guide, specially step (8) on how to obtain your code. It should look like the underlined text here:
- Correct:
https://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Correct:
//jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Incorrect:
http://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
- Correct:
- Step 2: Paste it on the Form URL Theme Option, it should be in the Footer or Other Options section on your Theme Options.
Favicon: Browser Icon
It is an icon that page visitors will see on next to your page name on their browsers. There is not a shared standard among all browsers for this, some might work on Firefox but not on Chrome, to make sure your favicon shows in all Browsers follow these instructions: - Use formats PNG or ICO - Resolution should not be higher than 64px*64px
Find the Favicon field in the General or Other section on your Theme Options.
Sliders and Responsiveness
Sliders are those big moving banners that started to become popular a decade ago, online stores wants to show most of their content at once.
There is a new trend suggesting that it is much better to have one image or a very little amount of images, most customers will only pay attention to the first image on a slider that had to load several, risking a blank screen if their internet connection are not fast enough. Use more than one image on your slider only if this is very important for your business.
Responsiveness on Sliders with a Background and elements on top
On these type of sliders, in order to make visible an readable the elements located over a background, the background image will keep its height once changing the screen to smaller size and rearrange buttons and other objects to fit the screen. This is the same Slider on different devices:
Responsiveness on Sliders with no elements on top, just an image.
In some themes such as Simple, there is an option to Activate Slider Autoheight.
Beyond Options: Theme Customization
With some HTML/CSS/Javascript knowledge, you can change every aspect of your theme visually in your Admin Panel: Themes > Code Editor.
Are you an expert? Create your own theme.
Blocks
- Layout: Changes on this block will affect all pages of the store.
- Home: Home Page
- Product: Product pages, can have multiple templates.
- Category: Product Category pages, can have multiple templates.
- Search: Product search results.
- Customer Accounts: Customer account pages, Login, Registration, Password Change, past orders, etc.
- Payment Pages: Cart, Checkout, Review order and Success page.
- Error Messages: All errors will show on this page.
Partials
Partials are files with the .liquid extensions that are used for elements that repeat on more pages, for example: Products lists. If you edit one partial, changes will take effect in all of the elements that are using it.
Files and Assets
Most CSS and Javascript files of your store are listed on the Files and Assets section on the left corner of the code editor.
Theme Options
The Theme Options are managed in a JSON file named options.json, with the following example structure:
Changing an element here will take effect on your Admin Panel: Themes > Theme Options. Use them to create simple ways to change elements on your theme.
{
"Social Networks": {
"icon": "archive",
"options": {
"enable_facebook": {
"name": "Enable Facebook Share Button",
"type": "checkbox",
"default": "1"
},
"facebook_url": {
"name": "Facebook URL",
"type": "input",
"default": "https://www.facebook.com/jumpseller"
},
"twitter_url": {
"name": "Twitter URL",
"type": "input",
"default": "https://twitter.com/jumpseller"
},
"number_tweets": {
"name": "Number of Latest Tweets to Display",
"type": "select",
"default": "10",
"options": [
{
"5": "5"
},
{
"10": "10"
},
{
"15": "15"
}
]
}
}
}
}
icon
The Font Awesome class for the icon you want to display associated with a group of Theme Optionsname
The Theme Option's name displayed at the Admin Panel.type
Defines the Option Type. Accepted values are: input, text, checkbox, select, file, color.default
The Default value of the Theme Option.options
Identifies the start of the Theme Options inside a group. It is also used to show the available options displayed at the Select List (only used when type=select).