Support Center

Jumpseller Theme components

General definitions

What’s a Component?

Components are the fundamental building blocks within a theme’s structure. They can include headers, footers, videos, banners, sliders, among other elements and sections that are used to build and design pages on a website. Components can be added, edited, and deleted at the Visual Editor’s Components panel, and they can be reused across different templates and layouts to keep consistency in both design and functionality.

By using Components, website designers can create complex layouts and features in an efficient way with zero to little coding knowledge, since individual components can be easily manipulated and rearranged. This also allows for an easier maintenance of the website, since changes to a component will be reflected across all templates where an specific component is being used.

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 to add a component within the place and position you desire.

Each component has its own general settings and some of them have what’s called Subcomponents, which can allow to build a second level of content that can also be individually configured and customized.

All the layouts contains 2 mandatory components which cannot be removed nor hidden, these are Header and Footer. These are displayed at the beggining and at the end of each layout, respectively, which we cover in detail further down in this page.

What’s a Subcomponent?

A Subcomponent is an item that can be added within a Component. For example, the Subcomponent of a Slider is a Slide, while the subcomponent of a Logo gallery is a Logo, and so on with others within a Jumpseller theme.

They all have individual options for you to customize, you can also add as many as you want, re-order them, hide them or delete them. When you duplicate or reuse a component, its Subcomponents will be duplicated as well.

In order for you to understand how to manage them, check the following list:

  • There will be some Components in which you will see an arrow icon at the left side of the name. That means that it has or it can have subcomponents inside.
  • When you hover, the arrow will rotate and when clicking on it, the subcomponent’s list will open, allowing you to see all of them.
  • You can click again in the arrow to close it.
  • You will also see a button which will allow you to add subcomponents, like for example “Add new Slide”.

Within each subcomponent, when hovering over its name, 3 options will appear at the right side, which will allow you to perform the following actions:

Duplicate

Allows you to duplicate the subcomponent and create a new one, which will contain the exact same content and information.

Delete

Allows you to remove the subcomponent from the list.

Note: Changes won’t be applied on the storefront until you save the changes. So for example, if you deleted the subcomponent by mistake, you can click on the Undo button that’s available at the top right corner of the Visual Editor to add it back again.

Hide

Allows you to hide the subcomponent on the storefront, without the need to delete it.

Theme Templates

A Template is the container in which the entire design of a section is placed. The available templates on Jumpseller are the following:

Note: You can read more about this in this article where we go deep in what Templates are and how you can customize them.

Home

This is the main and initial page that’s displayed when a visitor enters the domain of your store, like for example your-domain.jumpseller.com or your-domain.com.

Product

Shows all the information from the products of your store. You can create as many templates as you wish to display the information in multiple ways for different types of products.

Category

Is intended to display the product’s collections of the categories that you can create within your store’s admin panel, which you can do by going to Products > Categories. Here you can also create new templates and apply them to categories to differentiate them.

Page

Jumpseller themes come with 2 pre-installed page templates you can use, and as well as for Products and Categories, you can also create many more templates and apply them to your pages.

Page category

This new template allows to make more flexible the use of the content and pages within your store, by being able to define the structure and style for Page categories.

Note: this is available to be used for themes have a version of 4 or above.

Search

Displays all the products that are a match when clients perform a search on your store.

Contact

Can display several details about your store such as contact information, social media links, locations, a map and contact form.

Error

Used when your visitors reach a page that is not available, like for example by entering an incorrect URL or one that doesn’t exist anymore. It’s also used for example when there’s an issue within the purchasing process of your store.

Basic concepts

Next, we explain some topics, words and concepts that will be used across this article.

Slider/Carousel

A Slider or Carousel it’s a type of element that’s widely used within Components, and it basically displays Items or Subcomponents in a section where these show less or more depending on the type of device where the store is being seen. Elements that become hidden -or not visible- within the browser window, will be able to get visualized through navigational objects such as arrows and/or dots, or by draging the content horizontally.

On the majority of Components within the theme you will find options to customize Carousels, commonly within a group called Carousel settings, which will include the following:

  • Enable autoplay: Allows for the Carousel to automatically move from one item to the next.
    • Enable continuous autoplay: This option is available within some components, when Autoplay is enabled, and allows for the transition of the carousel to be smoother, instead of stopping at each “block” when changing, it just advances.
  • Blocks speed: Allows to define the time that it will take for the previous option to work.
  • Show arrows: Allows to display arrows below the Carousel for users to control it.
    • Show arrows on hover: if the previous option is enabled, this one will allow you to define that arrows only display when users “hover” inside the component area. On mouse out, they will hide. This behavior will only be applied on Desktop devices.
  • Show dots: Allows to display dots/points below the Carousel for users to control it.

Note: On components such as the Slider the group name may be different, but the options will still offer the same functionality, even when some option names may differ as well.

Color Packs

Most of the components have their individual configuration for color customization. With Color Packs you will be able to change the look of an entire component with just one click. These changes aplies to elements such as the background, texts, links and buttons. You can edit, reuse, clone or create as many packs as you want. When you change a color from a bundle, it will be applied to every place where that bundle is being used.

Note: Not all components are available in all Jumpseller themes, just as not all options for each component or subcomponent are the same in all themes. Still, the main behavior of them is quite similar and this documentation will help you to configure them successfully.

Devices

Across this article you will find very commonly the use of Desktop and Mobile concepts. Even when we refer mostly to just these two, it is important to also consider the existence of Tablet devices.

In the following table you can find the detail for the dimensions at which we consider each device:

Device Width equivalence
Small Mobile Equal or lower than 414 px
Mobile Equal or lower than 575 px
Tablet Between 575 px and 991 px
Desktop Equal or greater than 992 px
Large Desktop Equal or greater than 1200 px

Note: This considers mostly the vertical view for Mobile and Tablet devices. So, it may occur that when switching or turning a device horizontally, the width changes and the equivalence in pixel’s size will differ from the ones mentioned in the table above.

Width

Within the article you will see the word Width mentioned a lot and it’s because for several components you will have the ability to set and change the width of sections, so you can create very dynamic layouts. The most common naming conventions that you will find are for example the following:

Small

Themes are constructed and codified with a layout that constrains and adjusts the content of several sections to an specific width, so they can all look and behave similarly and have a solid design aspect. For this, we use a layout where all sections can be divided within 12 columns.</p>

In this case, Small means that the content will stretch at the maximum available space of it, hence all 12 columns, which combined has an amount of 1320px.

Browser or Full Width

This means that the content will stretch, adapt and resize to the maximum available width of the browser where your store it’s being seen or visited.

Other width sizes

Within several components you can find width options that allow to choose between:

  • Small: the content 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 content 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 content 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: For some components you will find also the Extra Large option, which will vary and change the dimensions mentioned above depending on the use case, options and context of the component where it’s available. For Mobile devices the content will expand to the entire available width.

</div>

Hover

Within this article we will use the terminology hover a lot, which basically means the action of a user by placing the mouse/cursor over an element, object or section.

Overlay

On several components you will find an option that makes reference to the Overlay. This element it’s basically a layer that it’s positioned between the content and the image of a section and allows to generate a higher contrast between both. You can find this option on components (or subcomponents) such as Slides, Banners, Big Banner.

Animations

Within most -if not all- components you will find an option called Customize animation options, which will allow you to modify and customize the transitions that will be applied. The options available are the following:

  • Animation type: it allows to define the position from which the component will be animated and appear.
  • Do the animation once: when enabled, the animation will only happen when you scroll down the page and the component appears. On the contrary, when disabled, the animation will occur when you scroll down and up on the page everytime.
  • Animation delay: it allows to define the time that will take (in miliseconds) for the animation to happen, once the component enters the viewport (browser window).

If this option is not enabled within a component, it will consider what has been defined in Theme settings > Design > Enable theme animations, as long as this option is enabled. You can read more about this on this article.

Headings

On the majority of Components you will find an option called Enable Heading, which when enabled will display a list of nested options that will allow you to customize elements that are a part of this section.

This section is positioned at the very beginning of components and the options for it are the following:

  • Subtitle: displays at the start of the Heading and before the Title.
  • Title: displays between the Subtitle and Description, and in most cases is mandatory.
  • Description: displays below the Title.
  • Link: allows to add a link to any content of the store, such as categories, products, pages, external links, etc.
  • Link text: text that will show within the link.

The appearance of Headings in terms of alignment, among other styles, is defined by several options which can be found in Themes > Visual Editor > Theme settings > Headings. You can read more about them on this article.

Content options

In some components like the Slider, Big Banner, and Banners, you’ll find a group of options to customize elements such as Subtitle, Title, and Description/Text.

These options give you more control over their visual appearance, the hierarchy between them, and other design attributes. The available options are:

Size

Choose between predefined sizes ranging from Small to Extra large, which are directly linked to the Font base size defined in Theme settings > Fonts.

You can also select Custom to manually set different sizes for desktop and mobile devices.

Weight

Controls the visual thickness (or boldness) of text where this option is available.

Values range from 100 to 900, allowing you to choose a lighter weight for a softer look or a heavier one for more emphasis.

The effect depends on the font variations you select under Theme settings > Fonts > Font selection, since not all fonts include the same weight styles. Common values include:

  • 100 → Thin
  • 200 → Extra Light
  • 300 → Light
  • 400 → Normal / Regular
  • 500 → Medium
  • 600 → SemiBold
  • 700 → Bold
  • 800 → ExtraBold
  • 900 → Black

Letter spacing

Adjusts the spacing between letters.

This can help achieve different visual styles, but should be used carefully — increasing letter spacing also increases the total width of the text block.

All caps

Forces text to display in uppercase, even if it wasn’t written that way originally.

This option is commonly enabled by default in elements such as Subtitles.

List of components

Next, you can find the full list of components available on Jumpseller themes.

Note: This list includes components for themes with version 4.0.0 and above.

Related Articles

On this page

Start your journey with us!

Start your free 7-day trial. No credit card required.

Create Store