Customize Your Store with the Visual Theme Editor

The Jumpseller Visual Theme Editor is an intuitive and powerful tool designed to help you easily customize your online store theme. Use this comprehensive guide to learn about various features and functions of our visual theme editor and create the perfect theme for your store.

You can access the Visual Theme Editor through the “Themes” section from the admin side menu or by clicking the Actions button on any theme in your theme gallery.

Find the Visual Theme Editor

You can edit your current theme or a secondary theme you want to work on without putting it online. For the current theme, go to your Admin Panel > Themes > Visual Editor or click the Customize button on your current theme within the Theme Gallery.

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

Structure of the Visual Editor

Structurally, the visual editor is composed of 3 areas or sections:

1. Top bar
2. Side bar
3. Preview area

Top Bar

Theme Identification

• Back to theme gallery: Direct link to return to the theme gallery in your store’s admin.
• Theme name and status: The current name of the theme, which you can rename within the theme gallery using the “Actions” button. Next to the theme name is an indicator of its status, whether it is the Current theme or an unpublished Draft. You can change the status of your theme in the theme gallery in your admin panel.
• Theme actions: Along with the name and status of the theme, there is a button with three dots that opens the following items:
  • Theme version: Number indicating the current version of your theme.
  • Link to view live theme: This link opens your theme in a new browser tab for preview. You can preview a main theme or a draft theme.
  • Link to code editor: Direct link to your theme’s code editor. We recommend accessing the code editing only if you know liquid programming, HTML, CSS, or JavaScript.
  • Theme documentation: Link to view the theme documentation.

Template Manager

In this selector, you can perform the necessary actions on your theme’s templates.

Change Template

Choose which template you need to preview, including:

• Homepage: The cover of your theme, the initial page displayed when entering the main domain of your store.
• Product: This template shows how each element will be displayed within the product page.
• Category: The category template is intended to show the product collections you have categorized in your product manager.
• Page
  • Blog: Template that displays posts categorized as Post.
  • Post: Template dedicated to the posts that will be shown in the Blog template.
  • Default: This is the default template for your generic content pages. Legal pages, Terms and Conditions, Privacy Policies, and Shipping Policies automatically use this template.
• Search: This template is where the search results of your theme are displayed.
• Contact: This template shows your contact information, social networks, addresses, map, and contact form.
• Error: When your visitors reach a page that does not exist, for example by entering an incorrect URL, this page is displayed.

Create a New Template

For the Product, Category, or Page templates, there is an option to create a new custom template. To do this, follow these steps:

1. Click on one of the templates mentioned above.
2. Click the “Create New Template” button.
3. Choose the name of the new template.
4. Select the base template from which this new template will be created.
5. Associate a product, category, or page - as applicable - with this new template so it can be previewed.
6. Click confirm and the new template is ready to design. The template will be available for editing within the list.

Preview Actions

• Hide side bar: If you need more viewing space, you can hide the side bar.
• Mobile or desktop view: These buttons allow you to preview your theme in both versions.
• Refresh: To reload the preview of your theme.
• Activate editing: Allows you to enable or disable component editing through the preview.
• Visual editor theme: You can choose between Light or Dark view.
• Zoom: To enlarge and shrink the preview size of your theme.
• Undo or redo: These buttons allow you to revert changes or reapply changes you have made to your theme.
• Save: The save button saves all changes made to your theme in the visual editor.

Side Bar

In the side bar of your visual editor, you will find all the graphic tools that allow you to design your store’s themes to your liking. Below we describe the basic elements that form the design of your theme.

Theme Settings

At the beginning of the side bar, you will find a direct access to this subsection where you can find the general settings that apply to your theme and its templates, such as colors, typography, product blocks, custom codes, blog, add to cart notification, checkout customization, and more. In this link you can see a list of the documentation for specific themes.

Header and Footer Settings

In your theme, two sections are automatically present in all the templates that make up your store:

• Header: The header displays elements such as the search bar, store logo, currency and language selectors, user account access, shopping cart, main menu, and other elements that depend on each theme.
  
• Footer: In the footer, we place custom menus, social network links, contact information, and payment methods.

Template Component Settings

In this link you can find the documentation for the available components within a theme.

The components of a theme are the content blocks that make up your store: for example, sliders, banners, product galleries, headers, and many others. Each component has its general settings and some have sub-components that build a second level of content that can also be individually configured.

To explain the structure of the components and sub-components, we will use the Slider component highlighted in the above image as an example.

1. Slider: The Slider is a component that has its settings, such as color changes, actions on individual sliders, spacing, alignment, and more.
2. Slide: The Slide is a sub-component of the main Slider component, in each of these you can modify individual settings, such as images, colors, links, and more.
3. Add sub-component: You can add multiple sub-components to your main component. In the example in the image above, these are Slides. This same example can apply to many components of your theme, such as Banners, Logo Gallery, Trust Bar, and more.
4. Add component: In this section, you can add a new component under some criteria detailed below:
   
   • New: You can create a completely new component and configure it from scratch.
   • Duplicate: Quickly create copies of components you have already created in this Theme. Reuse designs and functionalities, and modify the copy without affecting the original.
   • Reuse: Efficiently reuse content by incorporating existing components from another template within this Theme. Incorporate designs and functionalities without starting from scratch. Note that modifications will affect both templates.

Figure 1:

• Home: Indicates the name of the current template where the components are being edited.
• Slider: Component name.
• Welcome: Sub-component name.
• Add new Slide: Button to add a new sub-component. In this case, a Slide to the Slider.

Figure 2:

• Arrow: Button to show or hide sub-components.
• Trash bin: Button to delete the component and its sub-components.
• Eye: Button to hide the component and its sub-components.

Figure 3:

• Dark gray circle: Indicates unsaved changes.
• Light gray circle with crossed-out eye: Indicates the component or sub-component is hidden.
• Green circle: Indicates a new unsaved component or sub-component.

Preview

In this area of your visual editor, you can preview the changes you make to your theme. Modifications you make in the side bar will be shown in this window.

Hovering over the theme preview, you can see some quick access elements for editing your content.

1. Component name: This element identifies the name of the component.
2. Add component: This button allows you to add a component above or below the previewed component. After clicking this button, the visual editor will display a pop-up window with the available component options to create.
3. Component actions:
   
   • Edit: The pencil opens the component for editing in the side bar.
   • Duplicate: Allows you to make an identical copy of the component.
   • Visibility: Allows you to show or hide the component from your theme. This option allows you to continue editing the component without deleting it.
   • Delete: Action to delete the component from your theme. This option cannot be undone after saving.
   • Reorder: The buttons with up and down arrows allow you to reorder the components of your theme.

---

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.