Centro de Ayuda

Configuring the Templates of a Theme

En esta página

We recommend that you also visit the following articles to have a full understanding to make the most out of your Theme Templates:

💡 Introduction

When customizing your store’s theme, it’s important to understand the different templates that are available. Each one controls the structure and design of a specific section (or page) of your online store. This guide will help you understand what each template is for, and how it can be customized to fit your business needs.

Previewing Templates

In order to preview each one of the templates of a theme, you first need to access the Visual Editor of your store, which you can find in the Main menu under Customization > Themes > Visual Editor.

Once there, the respective dropdown element can be found with which you will be able to switch between different templates, as shown in the following video:

Each template will also have several Components that are unique and can only be used within them, as well as being –in most cases– mandatory, which means they cannot be deleted as they are key for the proper functionality and behavior of the template. To summarize, it can be defined like this:

  • Specific: components that can only be used and belong to an especific template.
  • General: components that can be used in the majority of templates, which can be duplicated or reused from other templates.
  • Shared: components that are used and share across templates. Usually they are “connected”, which means that when changing and/or modifying one option within them, it will also affect other templates where the component it’s also being used.

Unlinking Components

One thing worth mentioning about the Shared components, is that you can unlink or “disconnect” them, by clicking on the icon that’s placed and appears at the right side of the component name when you hover over it, as you can see in the image below.

Disconnect shared component

When doing that, any change made to the component and its options will not take effect on other templates where the same component is being used. This becomes useful if you don’t want to apply changes (e.g. design, texts, margins) to all templates.

Next, you can find the list of all templates, along with the details of their respective components and its options.

🏠 Home

This is the main template your visitors see when they first arrive at your store. It’s the most customizable and visual template, often featuring banners, featured products, collections, testimonials, or promotional sections.

Your Home template sets the tone for your entire storefront—it’s your brand’s first impression. Whether you’re aiming for bold visuals, minimal design, or content-heavy storytelling, this is where you make it happen. Many themes allow you to reorder, show/hide, or completely remove content blocks to adapt the homepage to your style.

Note: within this template you can use the majority of the available Theme Components.

🛒 Product

This template controls how individual product pages are displayed. It defines the structure of elements like product images, title, price, description, variants, “Add to Cart” button, and more. You can customize this template to highlight key product information, enable cross-sells, reviews, among other.

When accessing it you will be able to add and use specific components, which are listed below, as well as other general components:

Product template

It displays the “main section” of the product page, which consists of the Image Gallery (at the left side) and the Product Details (at the right side). For the last one, it uses several subcomponents to display the information of a product, like for example the Title, Price, Form, Description, etc. You can find the entire list of subcomponents and its options within this article.

Product tabs

Product Tabs component

It allows you to display three subcomponents that are also available in the Product template component, with the same options within them:

  • Description
  • Product custom fields
  • Attachments

The difference in this case has to do with how each one of them look, as they are constrained within a “tabs” section in which the first item (e.g. Description) is always opened and visible.

As for the options of the main component, you will find the following ones to customize it:

  • Width: allows to define the width for the content within the section.
  • Horizontal content position: allows to define the position within the “x” axis, which will only take effect and be noticeable when the Width is any but Full width.
  • Appearance: in this group you will find several options to customize the look of the component:
    • Top margin: allows to define the margin at the top part of the component.
    • Bottom margin: allows to define the margin at the bottom part of the component.
    • Content colors: allows to choose the Color Pack for the component.
    • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: Tabs items will only be displayed if the product has information within them. So for example, if a product doesn’t have a description, this item won’t be displayed. Therefore, the following one with content will be the first and become opened by default as well.

Product reviews

Product Revies component

Note: This component works in hand with the Request Product Reviews feature, which is only available for PRO plans and above. If you don’t have any of those plans it won’t work even when the component is added within your theme. You can read more about it in this article.

This component allows you to display reviews that your customers have added to your products. In order for this to properly work, you need to have enabled the Product Reviews email, which can be done within your store’s admin panel by going to Settings > General > Emails.

Note: Consider that for a review to display within the component, its status needs to be Published.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Display type

Allows to define how reviews will be displayed within the component, based on the following options:

  • Carousel: reviews will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: reviews will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Quantity of items to display

Allows to define the maximum amount of items to display within the component.

Amount of reviews on Desktop

Allows to define the amount of reviews per horizontal row that will be displayed on Desktop devices. The visible amount of reviews on mobile devices will always be one.

Reviews alignment

Allows to define the alignment for the content of all reviews within the component.

Note: The review image will move accordingly to the selected option.

Customer name

Allows to define how the name of the customer will be displayed, based on the following options:</p>

  • Full name: will display both name and surname, which the customer added in his account.
  • First name: will display only the first name, omiting the surname.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Apply Card style to reviews

Allows to apply a “card” or “boxed” style to all reviews. The following options will become available only if this is enabled:

  • Enable Card border: displays a border (or line) all around the reviews.
  • Card border opacity: allows to adjust the opacity (transparency) for the border.
  • Card content colors: allows to choose the Color Pack for all reviews.

Heading options

Allows to customize the elements of the Heading section before the component content. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: The option Content colors won’t affect the reviews if the option Apply Card style to reviews is enabled.

Frequently bought together

This component uses optimized data, by working with Jumpseller’s algorithm which analyses your store’s recent order history to create sets of products that customers are likely to be interested in buying together.

Note: This feature it’s only available for Premium plans or above. Therefore, even if you have added the component to the Product template, it won’t be displayed if your plan doesn’t support it.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Amount of packs to display

It allows you to define the maximum amount of product packs (or sets, groups) to show within the component.

Display type

It allows you to define the way in which packs will displayed, always within a Carousel, based on the following options:

  • Multiple: packs will be displayed in columns, one next to the other, based on the amount of packs the algorithm manages to serve for each product. If there’s only one suggested pack, it will display as the next option.
  • Single: packs will be displayed by always showing one at a time.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

Allows you to customize some settings to define how the component will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

This component allows you to display products based on one of the categories assigned to the product which is being viewed.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Product category

This option allows you to define from which of the categories assigned to a product, the products within the component will be displayed:

  • First category: it will consider the first category assigned on each product’s category list.
  • Last category: it will consider the last category assigned on each product’s category list.

Quantity of items to display

Allows to define the amount of products that will be displayed within the component. The order in which products will be shown it’s gonna be based on the order they have within the selected Category list of products, so you will need to edit that list, considering the limit you have defined within this option.

Display type

Allows to define how products will be displayed within the component, based on the following options:

  • Carousel products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

This component allows you to display products based of what other customers had also visited. Therefore, the order in which these products will show will be random, meaning you won’t be able to define an order.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Quantity of items to display

Allows to define the amount of products that will be displayed within the component. The order in which products will be shown it’s gonna be based on the order they have within the selected Category list of products, so you will need to edit that list, considering the limit you have defined within this option.

Display type

Allows to define how products will be displayed within the component, based on the following options:

  • Carousel products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid products will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define. In mobile devices they will always stack vertically.

Note: The amount of products per horizontal row for Desktop and Mobile devices can be modified within the store’s admin panel, by going to Themes > Visual Editor > Theme settings > Product block. For more details about it you can read this article where it’s fully explained.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

📂 Category

This consists of several templates that determine how the categories that you have in your store display the products within them.

All these templates have and can share the following components:

Category heading

It allows to display the name of the category where this template is applied. It also has the following options to customize it further:

Show description

By enabling it the description of the category will be displayed, as long as the field for that isn’t empty.

Use image as background

By enabling it and if the category has an image, this will be used as background at the back of the section.

Also, it will display a nested option called Background image overlay that will allow you to control the opacity of the Overlay element. You can read more about in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.

  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

  • Default: The main template used when a specific template isn’t selected.
  • All Categories: Displays all the main categories in a grid or list format.
  • Brands: Used to showcase products by brand, often filtered or grouped accordingly.
  • Show Subcategories: Designed for categories that contain nested subcategories, helping users explore product families more easily.

Template image

This component allows to display the image of the category, as long as it has one. The following options inside of it will allow you to customize it further:

Width

It allows to define the width that the image will occupy within the section, based on the following options:

  • Grid width: It will adapt its width based on what was defined in Theme settings > Design > Maximum container width.
  • Small: the image gets constrained to only 6 of the available 12 columns of the grid for Desktop devices, and 7 columns for smaller devices like a Tablet.
  • Medium: the image gets constrained to only 8 of the available 12 columns of the grid for Desktop devices, and 9 columns for smaller devices like a Tablet.
  • Large: the image gets constrained to only 10 of the available 12 columns of the grid for Desktop devices, and 11 columns for smaller devices like a Tablet.
  • Browser width: it expands the image to the maximum width of the browser where the store it’s being seen.

Note: You can read more about how the Width works and behaves within themes in this article.

Next, you can find the full list of templates available within themes, along with their specific components and its options:

Category - Default template

This is the template that will be applied by default when you create a category in your store. It works by using an specific component called Product feed that takes care of displaying the full list of products that belong to a category.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Products per page

Allows to define the amount of products to show on each page of the category. In Jumpseller stores category pages display a maximum amount of 40 products, which is useful to make sure a proper loading speed on this type of pages.

A Pagination section will be displayed at the end of the list of products, if the amount of products within a category is higher than has been defined here.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: Product blocks will be affected by what you chose in the Content colors option, only if Apply Card style hasn’t been enabled within Theme settings > Product block. You can read more about this in this article.

Additional: Filters

This template allows to display the list of Filters within the category pages. You can read more about how it works in this article.

Category - All categories template

Category - All categories template

This template works by using a component called Subcategories accordion that displays all the subcategories of a category in which the template is applied in an accordion-style structure, as it can be seen on the image above.

It’s useful for displaying subcategories that also have deeper levels of categories inside of them, often called “sub-subcategories”. So, in order for this to work properly in your store, we suggest that you use it for a category that has at least 3 levels inside of it.

The options within the component settings are the following:

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Category - Brands template

This template applies the same logic as the previous one, in terms of displaying the subcategories that belong to the category in which is applied. It works by using a component called Category Brands content, which has the following options to customize it:

Categories per row (desktop)

It allows you to define the amount of columns in which categories will be displayed on Desktop devices that have a width equal or higher than 992px.

Note: The amount of columns in Tablet devices will decrease depending on each option.

Categories per row (mobile)

It allows you to define the amount of columns for Mobile devices that have a width equal or less than 575px.

Display category image

It allows you to show or not the image of each subcategory. When enabled, the following options will become available:

  • Image dimension: allows to choose a dimension that will affect all subcategory images.
  • Image display: allows to choose the way in which images will be presented, where:
    • Resize: will adapt the image of each category within the space of the defined dimension.
    • Crop: will cut the image of each category to make it fit the available space of the defined dimension, vertically and horizontally.

Show link as button

It allows you to display a visible link button after the title of each category. When enabled, the following options will become available to customize it:

  • Link text: allows to define the text that will be added before the category name inside the button.
  • Apply outline button style: allows to apply a border around the button.
  • Show arrow in button: allows to show an arrow icon next to the button text.

Appearance

This group contains the following options to customize the component:

  • Content alignment: allows to define the alignment for the content of each subcategory block, which will affect the title and the button link.
  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Category - Show subcategories template

This template applies the same logic as the previous ones, in terms of displaying the subcategories that belong to the category in which is applied.

In this case works by using a component called Subcategories products, that displays all subcategories in different horizontal sections, with their products inside. The options to customize it are the following:

Quantity of items to display

Allows to define the maximum amount of products that will be displayed on each subcategory carousel.

Display type

Allows to define how products will be displayed within each subcategory, based on the following options:

  • Carousel: products will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: products will be displayed within columns.

Note: the amount of products per horizontal row can be defined on Theme settings > Product block > Appearance. You can read more about it in this article.

Heading options

Within this group you will find the following options:

  • Category description: allows to display the description of each category below the title, as long as they have one.
  • Category link: allows to enable and show the respective link to the category page.
  • Link text: when the previous options is enabled, this will be displayed and you can define the text for the links, which will be applied to all sections.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Content alignment: allows to define the alignment for the content of each subcategory block, which will affect the title and the button link.
  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

📄 Page

This consists of several templates that determine how the pages that you have in your store display the information within them.

All these templates have and can share the following components:

Template heading

It allows to display the name of the page where this template is applied. It also has the following options to customize it further:

Width

It allows to define the width of it within the section, based on the following options:

  • Grid width: It will adapt its width based on what was defined in Theme settings > Design > Maximum container width.
  • Small: the section gets constrained to only 6 of the available 12 columns of the grid for Desktop devices, and 7 columns for smaller devices like a Tablet.
  • Medium: the section gets constrained to only 8 of the available 12 columns of the grid for Desktop devices, and 9 columns for smaller devices like a Tablet.
  • Large: the section gets constrained to only 10 of the available 12 columns of the grid for Desktop devices, and 11 columns for smaller devices like a Tablet.

Note: the alignment of the content within this section will be based on what’s defined at Theme settings > Headings. To know which options are available there, visit this article.

Horizontal content position

It allows to define the position of the content (e.g. Title) on the horizontal axis, which will be visible only if what’s selected within the Width option is different than Grid width.

Show page date

It allows to show the date in which the page was published. The format of the date can be defined in Theme settings > Articles > Display date on articles > Date Format, which you can find in this article.

Show page categories

It allows to show the categories related to a page below the title. The way in which they look will be based on the options available within Theme settings > Articles, which you can find in this article.

Appearance

This group contains the following options to customize the component:

  • Use image as background: it allows to use and apply the image of the page (if it has one) as a background, behind all the content of the section like for example the Title.
    • Background image overlay: When the previous options is enabled, this one will be displayed with which you can control the opacity or transparency of the Overlay element that gets positioned between the content and the image.
  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Template image

This component is the same used within the Category templates.

Page body

This component allows to display the content or description that can be added within the pages administration interface. It has the following options to customize it further:

Width

It allows to define the width of it within the section, based on the following options:

  • Grid width: It will adapt its width based on what was defined in Theme settings > Design > Maximum container width.
  • Small: the section gets constrained to only 6 of the available 12 columns of the grid for Desktop devices, and 7 columns for smaller devices like a Tablet.
  • Medium: the section gets constrained to only 8 of the available 12 columns of the grid for Desktop devices, and 9 columns for smaller devices like a Tablet.
  • Large: the section gets constrained to only 10 of the available 12 columns of the grid for Desktop devices, and 11 columns for smaller devices like a Tablet.

Content aligment

It allows to define the alignment for all the content within the component.

Horizontal content position

It allows to define the position of the content on the horizontal axis, which will be visible only if what’s selected within the Width option is different than Grid width.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Page share

This component allows you to display a section with links with which users can use to share the page (or pages) of your store. It has the following options to customize it further:

Content alignment

It allows to define the alignment for all the content of the component, which includes the title and links.

Title

It allows to change or modify the title of the component.

Links

The following links are the ones you can enable or not for users to share the page:

  • Facebook
  • X (Twitter)
  • WhatsApp
  • Pinterest
  • Email
  • Copy to clipboard: this option allow users to copy and save the page URL into their device in order to share it as they see fit.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Article pager

This component allows to display the previous and next pages related to the Page categories of an specific page. For example, let’s say you have a “Blog” page with 3 articles in it (Posts), and you access the second article (the middle one). Once a user visits that article it will find a section showing the respective links for both, like you can see on the image below.

Article pager component

Note: You need to consider that if the visited article is the first on the list, it will only display the next article link. On the other hand, if the visited article is the last on the list, it will only display the previous article link.

The options for you to customize this component are the following:

Show article image

Allows you to show or not the images related to each article.

Show previous and next article text

It allows to display the “Previous article” and “Next article” texts before the title of each page.

When this is enabled, it will show the option Show left and right arrows to define is you want to display or not arrows along with these texts.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Page category related articles

This component displays all the pages (articles) that are related to an specific page (article) through the linked categories it has. It comes added by default on the Post template.

The options for you to customize it are the following:

Display type

Allows to define how articles will be displayed within the component, based on the following options:

  • Carousel: articles will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: articles will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define.

Quantity of items to display

Allows to define the maximum amount of articles to display within the component.

Number of columns on desktop

Allows to define the amount of articles per horizontal row that will be displayed on Desktop devices that have a width equal or higher than 768px.

Number of columns on mobile

Allows to define the amount of articles per horizontal row that will be displayed on Mobile devices that have a width equal or less than 575px.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: the look and design of the articles will be based on what you define at Theme settings > Articles. You can find more information in this article.

Page - Default template

This template is the one that will be applied by default when you create a Page in your store. It comes with the following components immediately added upon theme installation:

Page - Post template

This template is the one used to display the content of a page or article within the theme. It comes with the following components immediately added upon theme installation:

🗃️ Page Category

This consists of several templates that determine how the Page categories that you have in your store display the information within them.

Page Category - Default template

This is the template that will be applied by default when you create a Page category in your store. It works by using the following specific components upon theme installation:

Category heading

This component is the same used within the Category templates.

Template image

This component is the same used within the Category templates.

Page category template

This component allows you to display all the pages (articles) that are linked to the category in which the template is being applied. The options to customize it are the following:

Quantity of items to display

Allows to define the maximum amount of articles that will be displayed in the page. If the quantity of articles you have exceeds the number defined in this option, it will generate a Pagination section at the end of it, so users can navigate back and forth between them.

Number of columns on desktop

Allows to define the amount of articles per horizontal row that will be displayed on Desktop devices that have a width equal or higher than 768px.

Number of columns on mobile

Allows to define the amount of articles per horizontal row that will be displayed on Mobile devices that have a width equal or less than 575px.

Width

It allows to define the width of the section for Desktop devices, based on the following options:

  • Grid width: It will adapt its width based on what was defined in Theme settings > Design > Maximum container width.
  • Small: the section gets constrained to only 6 of the available 12 columns of the grid for Desktop devices, and 7 columns for smaller devices like a Tablet.
  • Medium: the section gets constrained to only 8 of the available 12 columns of the grid for Desktop devices, and 9 columns for smaller devices like a Tablet.
  • Large: the section gets constrained to only 10 of the available 12 columns of the grid for Desktop devices, and 11 columns for smaller devices like a Tablet.

Note: the articles will adapt accordingly to the chosen width that you define. So it’s important that as you choose a smaller width option, that you consider changing the value within the Number of columns on desktop option.

Horizontal content position

It allows to define the position of the content (e.g. Title) on the horizontal axis, which will be visible only if what’s selected within the Width option is different than Grid width.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: the look and design of the articles will be based on what you define at Theme settings > Articles. You can find more information in this article.

Page Category - Blog template

This template was designed to display several components upon theme creation and theme installation, which you can use to show different sections with multiple content by using several components. These are the following:

Category heading

This component is the same used within the Category templates.

Template image

This component is the same used within the Category templates.

Handpicked articles

This component allows you to display several pages of your store within one single section. It has the following options for you to customize it:

Choose pages to display

Allows you to choose a maximum of 3 pages for your store to display, where they don’t necessarily have to be related nor linked between them, for example through categories.

Display type

Allows to define how pages will be displayed within the component, based on the following options:

  • Carousel: pages will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: pages will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define.

Number of columns on desktop

Allows to define the amount of pages per horizontal row that will be displayed on Desktop devices that have a width equal or higher than 768px.

Number of columns on mobile

Allows to define the amount of pages per horizontal row that will be displayed on Mobile devices that have a width equal or less than 767px.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: the look and design of the pages (articles) will be based on what you define at Theme settings > Articles. You can find more information in this article.

Page categories

This component allows you to display all the Page categories that you have created in your store’s admin panel within Pages > All pages, under the Categories panel at the left side of the screen. These will only be displayed if their state is Public.

Note: this component is also shared and can be used within the Page templates and any other Page Category templates you may have.

It has the following options to customize it:

Display type

Allows to define how the categories will be displayed within the component, based on the following options:

  • Carousel: categories will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: categories will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define.
  • Tag cloud: categories will be displayed as “tags” or “labels” buttons.

Columns options

Within this group you will find options to define the amount of columns for each device:

  • Number of columns on desktop: Allows to define the amount of articles per horizontal row that will be displayed on Desktop devices that have a width equal or higher than 768px.
  • Number of columns on mobile: Allows to define the amount of articles per horizontal row that will be displayed on Mobile devices that have a width equal or less than 767px.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Category block settings

Within this group you will find the following options that will allow you to customize some aspects of the categories that are displayed inside the component:

  • Blocks desktop alignment: allows to define the alignment of the content of all categories for Desktop devices.
  • Blocks mobile alignment: allows to define the alignment of the content of all categories for Mobile devices.
  • Titles weight: allows to define the weight for all categories titles. The possible weight will be determined on the Fonts that you have chosen for your theme under Theme settings > Fonts.
  • Titles letter spacing: allows to define the separation between each letter of the categories titles.
  • Show titles in all caps: allows to force all categories titles to be displayed in uppercase letters (e.g. TITLE).
  • Show quantity of articles: allows to display the number of articles that each category has.
  • Enable as external link: allows that when clicking on a category, the link to it will be opened in a new browser tab.
  • Show arrow in title: allows to display an arrow along with the title of the categories.
  • Image ratio: allows to display the image of each category. This won’t have any effect if you have chosen Tag cloud in the Display type option.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Page category articles

This component allows you to display the articles of a Page category of your store.

Note: this component is also shared and can be used within the Page templates and any other Page Category templates you may have.

It has the following options to customize it:

Page category

Allows to choose one of the Page categories that you have in your store’s admin panel within Pages > All pages, under the Categories panel at the left side of the screen.

Display type

Allows to define how articles will be displayed within the component, based on the following options:

  • Carousel: articles will be displayed within a Carousel, in which you can control aspects such as the speed, autoplay or if you want to show navigational elements on it.
  • Grid: articles will be displayed within columns, one next to the other horizontally and vertically based on the amount of items to display that you define.

Quantity of items to display

Allows to define the maximum amount of articles to display within the component.

Number of columns on desktop

Allows to define the amount of articles per horizontal row that will be displayed on Desktop devices that have a width equal or higher than 768px.

Number of columns on mobile

Allows to define the amount of articles per horizontal row that will be displayed on Mobile devices that have a width equal or less than 767px.

Enable Heading

Allows to display a Heading section before the component content. You can find the list of options in this article.

Carousel settings

When chosing Carousel within the Display type option, you will be able to customize some settings to define how it will behave. You can find the list of options in this article.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.
  • Customize animation options: Allows to adjust and customize the animations for this specific component. You can read which ones are available in this article.

Note: the look and design of the articles will be based on what you define at Theme settings > Articles. You can find more information in this article.

🔍 Search

This template handles how search results appear when a customer uses the theme’s search bar. It determines how products matching the “search term” are displayed, and often includes filtering or sorting options.

It works by using components that are also used and shared with the Default Category template. These components are the following:

Is worth mentioning that can use and add almost any available Component within this template as well, like for example Banners, Featured products, Latest products, etc., to improve the look and experience for your customers.

Note: This template also allows to display the list of Filters within the page, in the same way and with the same configurations that for the Category page. You can read more about how it works in this article.

📬 Contact

Used for your store’s contact page, this template typically includes a contact form, address, map, phone number, and other business details. It’s a great place to personalize and build customer trust.

Used for your store’s contact page, this template allows you to add and use components to display your store’s contact details or information. Upon theme installation it comes with the following pre-installed components:

There’s one other component that you can evaluate to add within this template and see if it’s useful based on your store’s needs: Locations.

Is worth mentioning that can use and add almost any available Component within this template as well, to improve the look and experience for your customers.

🚫 Error Page

Also known as the 404 page, this template is shown when in cases like the ones listed below:

  • When a user tries to access a non-existent page.
  • When a user tries to access a product that doesn’t exist anymore or when its status is Disabled.
  • When there’s an error during the Purchase process and they cannot move forward to finish it, like for example a debit or credit card not being approved by the used payment gateway.

Customizing this template can help guide users back to your store with suggestions, links, or products, by using and adding almost any of the available Component within the themes.

💳 Checkout

The templates available within section covers the shopping cart and purchase process of your store, and includes the following:

  • Cart: The shopping cart page, where customers review their items, add coupon codes and estimate the shipping costs.
  • Checkout: The page where users input their shipping and payment details.
  • Confirm: A final review page before the purchase is completed.
  • Success: The order confirmation page shown after a successful purchase.

Note: Confirm and Success templates are not possible to be previewed on the Visual Editor for now.

Each of these can be customized to provide a seamless and branded experience, as well as include additional sections to enhance the experience.

The Checkout, Confirm and Success templates will only become available to be customized if you’re using the Classic version of the Checkout of your store. Therefore, when using the Standard version, those templates will not appear in the template selector and only the Cart one will be displayed.

You can see and review which Checkout version your using by going to your admin panel within Settings > Checkout > Checkout form.

Checkout form version

Note: To provide the best possible experience for your customers and improve your store’s cart conversion rates, the Header and Footer components are not displayed in this pages.

The following components DON’T come automatically added upon theme installation, but you can use them if they fit your needs. These are the only components that are allowed to be used within the Checkout templates.

Accordion

You can read more about this component in this article.

Counter

You can read more about this component in this article.

Custom code

You can read more about this component in this article.

Featured reviews

You can read more about this component in this article.

Text block

You can read more about this component in this article.

Trust bar

You can read more about this component in this article.

Cart template

This template comes with the following components automatically added upon theme installation:

Cart products

This component is the one that displays the products a customer has added to the cart, in which they can edit their quantity or remove them. It will also display a message if the cart is empty. The options to customize it are the following:

Title

Allows to define the title that will be displayed before and on top of the products list.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.

Cross selling products

This component allows to display a group of product suggestions based on the Cross-selling settings of your store, which you can find by going to Settings > Checkout > Preferences.

Checkout Cross-selling

The Cross-Selling feature has two options and will depend on the Plan that you have subscribed to. You can read more about it in the following articles:

The options to customize this component are the following:

Title

Allows to define the title that will be displayed before and on top of the products list.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.

Wishlisted products

This component allows to display a section with the products that a customer has saved within their Wishlist section, so they can add them to cart without necessarily having to go to their accounts in order to do so, which can help speed up the purchasing process of your store and incentivize them to buy those products.

In order for this to work, you need to have enabled the Wishlist feature first. You can read the following articles where we explain it further:

The options to customize this component are the following:

Title

Allows to define the title that will be displayed before and on top of the products list.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.

Note: this component does not come automatically added by default upon theme installation.

Checkout template

This template comes with the following component automatically added upon theme installation:

Checkout form

This component is the one that displays all the fields that a customer needs to fill in order to place and order. It also has all the Shipping and Payment options that you have defined within your store’s admin panel. It comes with the following basic options to customize it:

Top margin

Allows to define the margin at the top part of the component.

Bottom margin

Allows to define the margin at the bottom part of the component.

👤 Customer

The templates here allows you to manage how customers interact with the available pages destined for displaying their information. These include the following:

  • Account: A dashboard view for logged-in customers.
  • Edit Address: A page for managing shipping and/or billing addresses.
  • Details: Displays a form where customers can edit their personal information like name, phone, etc.
  • Login: The login page for returning customers.
  • Reset Password: A form to request a new password link or change credentials. This is currently not available to be customized.

Personalizing these templates can help you add professionalism and consistency to the entire user journey.

In order to preview the Account, Details and Edit Address templates in the Visual Editor you need to be logged in as a customer in your own store. To achieve this you can follow these steps:

  1. Go to your store’s admin panel and head to Customers > All customers and click the Add Customer button located at the top-right corner.
  2. Once there, add an email and choose a language, which are the minimum details you need. You can also add a phone, but that’s optional.
  3. You will be provided with a temporary alphanumeric password which you can use to log in. An email will be sent as well to your inbox to create a definitive password.
  4. With that information in place, you can go to your storefront and: a. Go to the Header and click on the Login dropdown menu and then click on the Log in item to be redirected to the respective page or; b. Write the following on your browser’s search bar your-domain.com/customer/login.
  5. Once you’re effectively logged in to your account, you can go back to the Visual Editor and preview the template.

Note 1: in order for the Login item to be displayed in your storefront you need to have enabled the Customer Login feature (Optional or Required), which you can do by going to Settings > General > Preferences > Customer Login.

Note 2: the Customer Login feature is only available for Pro plans or above.

Edit Address

This template is the one that displays the form with which customers can edit or add Shipping and Billing addresses.

Note: For now it doesn’t have a component to change its appearance, nor the ability to add components.

Details

This template is the one that displays the form with which customers can edit or add their personal details, such as phone and change or update their password.

Note: For now it doesn’t have a component to change its appearance, nor the ability to add components.

Account

This template is the one that displays the information of a customer, for things such as Details, Shipping and Billing information and their Order history. It has the following pre-installed components upon theme installation, which you can hide if you feel the need to, but you cannot delete them:

Customer heading

This component is the one that displays the following details of a customer:

  • The Name, which is shown if the customer has at least Billing details already added. If not, it will display the email.
  • The email, which will display below the name.
  • The Log out* link/button with which a customer can close its session.

It has the following options to customize it:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.

Customer information

This component works by using a group of subcomponents to display the sections of the customer account page, in what’s known as a “Tabs” layout, which you can reorder as you see fit or hide. The layout consists of an initial “tab” or button that opens its respective section, and when you click on another one, the previous one gets closed.

In it, has the following options to customize it:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.

The list of subcomponents within this component is the following:

  • Customer orders: displays the entire list and history of all the orders made by a customer.
  • Customer details: displays three inner sections that allow customers to see their information and edit it:
    1. Details: information about a customer such as name, email, phone. It has a link so they can edit them.
    2. Shipping Addresses: displays the mutiple Shipping addresses that a customer have added for their orders to be shipped. They can delete them, add more and set the default one to be used.
    3. Billing Addresses: displays the mutiple Billing addresses that a customer have added for their orders to be billed. They can delete them, add more and set the default one to be used.
  • Customer wishlist: displays all the product that a customer has saved.

Note: The Customer wishlist tab will only be displayed if you have enabled the Wishlist feature first. You can read the following articles where we explain it further.

Login

This template has one component that comes already added upon installation called Customer login, which displays the Login form along with a section that allow customers to register as well if they don’t have an account.

You can also use and add the majority of the available Theme Components.

The options for you to customize it are the following:

Login form order

Allows you to define the order in which both sections will be displayed on Desktop devices.

Respect columns order on Mobile

Allows you to force that the order previously defined it also applies to Mobile devices. If disabled, the Login form will always show first followed by the Registration section.

Register title

Allows you to define the text that comes right below the title of the Registration section.

Appearance

This group contains the following options to customize the component:

  • Top margin: allows to define the margin at the top part of the component.
  • Bottom margin: allows to define the margin at the bottom part of the component.
  • Content colors: allows to choose the Color Pack for the component.

Reset Password

For now this template cannot be previewed in the Visual Editor, but you can see how it looks in your storefront by going to the Login page (e.g. my-domain.com/customer/login) and click on the Reset my password link located at the bottom part of the Login form.

Artículos Relacionados

¡Comienza tu viaje con nosotros!

Pruébala gratis durante 14 días. No necesitas tarjeta de crédito.

Crear Tienda