Liquid HTML - Products
Snippets/portions of code you can use to customize your theme in the most common ways our customers ask us. You can show products from a single cat...
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.
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.
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.
The Visual Code Editor interface consists of the following sections:
Contains the components and settings that you can add, modify, or delete within your theme.
From top to bottom, these are the elements:
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:
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.
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.
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:
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.
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 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:
|Product search results.
|Error page. This page will show when your customer land in a page that does not exist or for similar errors.
|Allows customers to reset their password.
|Allows customers to log in to their account.
|Allows customers to create a new account.
|Allows customers to edit their address.
|Displays information about the customer’s account.
|Provides a form for customers to contact the store.
|Payment Success for Checkout v1.
|Allows customers to review their order for Checkout v1.
|Displays a form for customers to checkout for Checkout v1.
|Displays the customer’s cart.
|Used for custom pages on the website.
|Displays details about a specific product.
|Displays a list of products of a category.
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.
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.
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:
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.
Free trial for 14 days. No credit card required.