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
  • Links on Banners, Sliders, Buttons or Text
  • Subscription Forms
  • Favicon: Browser Icon
  • Sliders and Responsiveness
    • Responsiveness on Sliders with a Background and elements on top
    • Responsiveness on Sliders with no elements on top, just an image.
• Beyond Options: Theme Customization
  • Blocks
  • Partials
  • Files and Assets
  • Theme Options

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
• 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 Options
• name 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).