Customize Your Store with the Visual Theme Editor

The Jumpseller Visual Theme Editor is an intuitive and powerful tool designed to help you customize your online store’s theme with ease. This comprehensive guide will walk you through the various features and functions of our visual theme editor, enabling you to create the perfect theme for your store.

---

Themes Structure

A theme layout is composed of templates, and templates are composed of components. Components can further be divided into subcomponents. This structure allows for easy customization and organization of a theme’s design and functionality.

For instance, consider a Product Page like in the following image, that features a header with a Logo, a navigation menu, and a cart icon. Below this header is a section containing an image gallery of the product, the product name, customer ratings, an “Add to Cart” button, and a description. Further down, there is a featured products component, followed by a footer that includes additional information, a secondary menu, and a logo representing a payment method supported by the store. This hierarchical structure ensures an intuitive and easily adaptable design.

The Store Layout consists of elements that appear on most pages of the store, such as the header and footer.

The Product Template includes essential items like the “Add to Cart” button, product title, images, and description.

In the following example, we’ve incorporated a component that displays related products. However, additional components can be added, such as a YouTube video or products from a specific category that is currently on sale. This flexibility allows for diverse and engaging content across the store’s pages.

By customizing the components, all different templates of your store will get an unique design sitewide.

---

Find the Visual Theme Editor

You can either edit your current theme or a secondary theme that you want to work with without placing it online. For the current theme access in your Admin Panel > Themes > Visual Editor or in the Customize button of your current theme inside the Themes Gallery.

For secondary themes, click on the actions button and then on customize.

---

Get familiar with the Visual Editor Interface

The Visual Code Editor interface consists of the following sections:

Sidebar

Contains the components and settings that you can add, modify, or delete within your theme.

From top to bottom, these are the elements:

1. Jumpseller Logo: This is a clickable icon that takes you back to your Admin Panel.
2. Mobile/Desktop: This option allows you to switch between the Mobile and Desktop version of the Preview area.
3. Refresh: This button updates the Preview area to display any changes that have been made.
4. Help: This option provides access to documentation that describes all the options of the selected theme.
5. Store: Clicking this button opens a new tab with your store.
6. Editor: This option redirects you to the code editor.
7. Auto/Light/Dark: This option allows you to change the color scheme of the interface. The Auto setting will use your system default.

Components Menu

Contains the elements and settings that you can add, modify, or delete within your theme.

This section is where you can add, edit, and delete template components. The options in the Components Menu are as follows:

1. General Settings: These parameters allow you to set up items that are general to the theme and the templates, such as colors, promotion tag styles, and other items that are not directly related to a specific component.

2. Components: Here you can edit the components of the selected template and any subcomponents. You can also add new components from the Gallery or delete them. Some themes include two special components called Header and Footer that allow you to customize those parts of your theme specifically.

Top Bar

The Top Bar in the Visual Editor interface provides controls for selecting which template to modify, undoing and redoing changes, and saving your work. It also includes a Collapse Button that allows you to hide or show the Components Menu.

Here are the elements of the Top Bar:

1. Template Selector: This dropdown menu allows you to select the template you want to customize.
2. Collapse Button: This square button allows you to hide or show the Components Menu.
3. Undo/Redo/Save: These buttons control the changes you have made to your templates. In order to preview General Settings, you will need to click the Save button.

---

Editing the Design of your Store

Customizing the design of your online store is an essential part of creating a unique and memorable brand identity. With the Visual Editor in Jumpseller, you can easily modify your store’s design without any coding knowledge. From adjusting colors and fonts to rearranging elements on the page, the Visual Editor gives you complete control over the look and feel of your store.

In this section, we’ll provide an overview of the elements of the Visual Editor that allow you to customize your store’s design.

Store Layout

The store layout is the backbone of a website, as its elements and rules are present in every template of the theme. The store layout typically includes the header and footer of the website, as well as other elements that are consistent across all pages, such as the website’s logo and navigation menu. Edit the layout of your theme in the General Settings, Header and Footer sections of the Components Menu.

Templates

Templates define the basic structure of a website and determine which components are used. They can be customized for different pages on a website to maintain consistency and simplify the design process. Choose your template in the Top Bar. This is a list of all of the templates of a store:

Template	Description
Home	Your homepage.
Search Results	Product search results.
Error	Error page. This page will show when your customer land in a page that does not exist or for similar errors.
Reset Password	Allows customers to reset their password.
Customer Login	Allows customers to log in to their account.
Customer Creation	Allows customers to create a new account.
Customer Edition	Allows customers to edit their address.
Customer Account	Displays information about the customer’s account.
Contact	Provides a form for customers to contact the store.
Success	Payment Success for Checkout v1.
Review Order	Allows customers to review their order for Checkout v1.
Checkout Form	Displays a form for customers to checkout for Checkout v1.
Cart	Displays the customer’s cart.
Pages	Used for custom pages on the website.
Product	Displays details about a specific product.
Category	Displays a list of products of a category.

Components

Components are the fundamental building blocks of a theme’s structure. They can include headers, footers, videos, banners, sliders, and other elements that are used to construct pages on a website. Components can be added, edited, and deleted in the Visual Editor’s Components Menu, and they can be reused across different templates to maintain consistency in both design and functionality.

By using components, website designers can create complex layouts and features efficiently with zero to little coding knowledge, since individual components can be easily manipulated and rearranged. This also allows for easier maintenance of the website, since changes to a component will be reflected across all templates that use that component.

You can easily adjust components with the help of the Theme Editor Helper, which allows you to edit settings, as well as duplicate, hide, delete and also reorder components directly in the live preview. You can also click on the “Add component” button in the desired position and define the type of component you wish to add.

Subcomponents

In the context of the Visual Editor, subcomponents are the smaller elements that make up a component. For example, a Banners component might include one subcomponent for each image in the banner area, while a Slider component would have a separate subcomponent for each slide.

---

Frequently asked questions

• Can I customize the code of my theme?

  Yes, you can edit the code of your theme using the code editor accessible through the Visual Editor. However, it’s important to note that any changes you make can have a significant impact on the functionality of your store and may require advanced technical knowledge. We highly recommend that you consult our support team before making any modifications. Simply tell us about your goals and share your code, and we’ll be more than happy to assist you in achieving the desired result. Our team of experts will guide you through the process and ensure that your store remains fully functional and optimized.

• Can I import themes from a different platform?

  While it is technically possible to copy/paste the code of every template from an external theme, you will need to modify the necessary elements to make them work in Jumpseller. This includes buttons such as “add to cart” and “proceed to checkout,” which will need to be modified according to our technical guide at www.jumpseller.com/support/liquid.

• How can I update my theme to a newer version?

  To update your theme to a newer version, you can follow these steps:

  • Go to Themes > Gallery.
  • Search for the name of your current theme in the Gallery.
  • Install the newer version of the theme. A popup will appear, offering you the option to copy the content of your current version to the new version.
  • The updated theme will be saved as a secondary theme in the “Other Installed Themes” section.

  If you have made extensive customizations to your theme’s code, we recommend that you contact our support team before updating to ensure that your customizations are compatible with the new version.

• Can I create my own template?

  Yes, you can create your own template using the code editor. Simply go to: Themes > Code Editor > Templates section > Select the type of template and click on “Add Template”. A copy of the default template will be created and you can add your own code. Depending on the type of template, you can select which one to use in the settings of each element. For example, Product Templates will show as an option in the Product Settings, Category Templates will show as an option in the Category Settings, and so on.

We are here to help you, so if you have any questions, you can contact us at any time.