Getting Started

Next you can find a quick summary of general concepts and terms used across the theme so you can familiarize and understand them when you work inside of it.

Slider/Carousel

A Slider or Carousel is 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.

Items that are hidden -or not visible- within the browser window, will get visualized through navigational elements such as arrows and/or dots, or by dragging the content horizontally.

On the majority of Components within the theme you will find options to customize Carousels. You can learn more about them and their options in this page.

Display types

Within several components you will find an option called Display, which makes reference to how the content of a section will be presented and more often than not, how columns, blocks, or elements will be arranged and handled.

In the case of Carousel, you can read more about in this section.

For the case of Grid, this is a system in which the content is arranged within columns.

These will align vertically and horizontally depending on options such as Columns (desktop) and Columns (mobile), which are often available along with the Display option.

Colors

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 apply to elements such as the background, texts, links and buttons, among others that are available.

You can edit, reuse, clone or create as many packs as you want. When you modify a color within any of them, that change will be applied to every place where that pack is being used.

Go to this page to learn more about them.

Devices

Across this and other pages you will find yourself with a few terms named Desktop and Mobile. 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	Breakpoint
Small Mobile	≤ 418 px
Mobile	≤ than 575 px
Tablet	≥ 575 px & ≤ 991 px
Desktop	≥ 992 px
Large Desktop	≥ 1200 px

The term Breakpoint refers to the width at which a device changes from one to another.

Widths

Within this article and others you will see the word Width mentioned a lot, and it's because for several components you will find an option to set and change the width of it, so you can create very dynamic layouts. The options inside that selector are the following:

Option	Maximum width in pixels
Small	1320
Medium	1620
Large	1920
Extra large	2220
Ultra large	2520
Browser width	Width of the browser

Other width sizes

The theme is designed and codified with a layout that constrains and adjusts the content of several sections to a 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.

Within several components you will find an option called Adjust width, on which you will be able 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.

Dimensions

You will find a Dimensions option on several components, which allows you to define the way images and/or content will be displayed within a section.

This is based on the concept of aspect ratio — the proportional relationship between the width and height of an image or element. In simple terms, it controls the shape of the space where your image will appear, regardless of the image's original size.

It is typically expressed as two numbers separated by a colon, in the format width : height (e.g., 16:9). Understanding this is useful because the ratio you choose defines the shape of the space where your image will appear — and if your uploaded image has a different shape than the ratio selected, it will be automatically cropped to fit.

For example, if you upload a tall vertical image but select the Landscape ratio, the top and bottom of the image will be cut off.

The dimensions available across the theme are the following:

Landscape

Applies a 16:9 aspect ratio — wider than it is tall. This is the standard format for widescreen televisions, YouTube videos, and most computer monitors.

It works well for horizontally wide images, like a banner or a wide product shot.

Portrait

Applies a 3:4 aspect ratio — taller than it is wide. This is the standard vertical format used for smartphone screens, TikToks, YouTube Shorts, and Instagram Reels.

It's ideal when product images are tall and vertical, like clothing, bottles, or full-body shots.

Rectangular

Applies a 4:3 aspect ratio — slightly wider than it is tall, but more balanced than Landscape. This is the classic format of older television screens and photography.

It works well for product images that need a bit more height than a typical widescreen format provides.

Square

Applies a 1:1 aspect ratio — a perfect square. This is the format made popular by Instagram posts and works well for product images that are roughly equal in width and height, or when you want a clean, uniform grid of products.

Hover

Within articles the terminology Hover will be used quite often, and it basically refers to the action a user performs when placing the mouse/cursor over an element, object or section.

Overlays

This element is basically a layer that's positioned between the content and the image of a section and allows to provide a higher contrast between both.

You will it find on components and subcomponents like Slides, Banners, Big banner, among others.

The options that you will be able to modify are for example:

Their visibility, meaning, choosing to show it or not.
Their Opacity or transparency, for different states.
Color customization: their initial color will be based on the Color pack from the component or subcomponent on which is used. You will find an option to manually adjust the color for each case.

Blocks

Within a theme a Block will refer to certain elements that provide the ability to add content to a section, like for example:

Subtitle
Title
Text
Link
Button
Date

These blocks can be used within Heading sections, as well as within certain components like Sliders, Banners, Big Banner, among others.

What's useful about them is that for most cases you can add as many as you want, giving you the flexibility to create diverse content-rich layouts to present the information.

The style and appearance for each one can be managed and adjusted from two key parts within the theme:

Theme Settings > Headings: here you can control the overall look and style across the entire theme, meaning, if for example you change the Size or Weight of a Title, that will affect mostly all titles within the theme.
Block level: for each one of them, inside their own settings, you will find a Customization option that when enabled will allow you to modify and change how they look specifically for each individual block.

The styles and attributes that you will be able to customize on most of them are listed next.

Size

The sizes for all these blocks will be determined by calculations made along with the Font base size of the theme, which upon installation is by default 16px, based on the following options:

Small
Medium
Large
Extra large
Custom

When choosing Custom you will be able to manually adjust the size for desktop and mobile devices.

Therefore, if you change the amount of pixels of Font base size this will also be reflected on the sizes for all these elements.

Next, you can find tables with the equivalence in pixels for all of them.

Titles

Sizes for titles will vary depending if they are being used within a Heading section or within an Item, like for example a Banner, mainly because of the available space they offer.

Size / Device	Heading (Desktop / Mobile)	Item (Desktop / Mobile)
Small	24px / 20px	16px / 12px
Medium	32px / 28px	24px / 20px
Large	40px / 36px	32px / 28px
Extra large	48px / 44px	40px / 36px

Subtitles, Dates & Links

Size / Device	Desktop	Mobile
Small	14px	12px
Medium	16px	14px
Large	18px	16px
Extra large	20px	18px

Texts / Descriptions

Size / Device	Desktop	Mobile
Small	16px	14px
Medium	18px	16px
Large	20px	18px
Extra large	22px	20px

Weight

Weights refer to how thin or thick the letters of a font look — think of it as the difference between a light, delicate text and a bold, heavy one.

Wherever you find this option, it will let you control that thickness, which is useful for creating visual hierarchy — for example, making a title stand out more than a subtitle, or a subtitle more than a regular text. It ranges between 100 and 900, but it will depend on how many variations are available within each font, as not all of them offer the same ones.

For a reference on how numerical values map to weight names, check this article.

You can see an example on the following table when using Roboto font:

Value	Appearance	Common weight name
100	This is a text	Thin (or Hairline)
200	This is a text	Extra Light (or Ultra Light)
300	This is a text	Light
400	This is a text	Normal (or Regular)
500	This is a text	Medium
600	This is a text	Semi Bold (or Demi Bold)
700	This is a text	Bold
800	This is a text	Extra Bold (or Ultra Bold)
900	This is a text	Black

Letter spacing

Letter spacing refers to the horizontal space between each character of a text — think of it as how tight or spread out the letters feel when reading a word or phrase.

Wherever you find this option, it will let you control that spacing, which is useful for improving readability and reinforcing the visual style of your store — for example, a subtle spacing on a title can give it a more elegant and refined look, while a tighter one keeps it compact and impactful.

The value is expressed in px and starts at 0 by default, which means no additional spacing is applied. The maximum value available will vary depending on the element you are customizing — for elements like buttons and links it is capped at 12px to keep the design balanced, while for others like titles and subtitles it can go up to 24px.

Letter spacing tends to be more noticeable on uppercased text, where the spacing between characters becomes much more visible and can significantly change the feel of a word or phrase. This is why it's especially useful when combined with the All caps option, which you can find alongside this one in blocks across the theme.

You can see an example on the following table:

Value	Appearance (Capitalized)	Appearance (All caps)
0px	This is a text	This is a text
2px	This is a text	This is a text
4px	This is a text	This is a text
6px	This is a text	This is a text
8px	This is a text	This is a text
10px	This is a text	This is a text
12px	This is a text	This is a text

Line height

Line height refers to the vertical space between lines of text — think of it as how tight or loose a paragraph feels when it has more than one line.

Wherever you find this option, it will let you control that spacing, which is useful for improving readability and overall design balance — for example, a tighter line height can make a short title feel more compact and impactful, while a looser one can make a longer text easier to read.

The value you choose here works as a multiplier applied to the font size of the element. This means the actual spacing between lines will vary depending on how large or small the text is — the bigger the font, the more noticeable the difference will be.

Option	Value
Small	1
Medium	1.25
Large	1.5
Extra large	1.75

For example, if a title has a font size of 32px and you set the line height to Large, the spacing between lines will be 48px.

The default values applied across the theme are the following:

Block	Default
Subtitle	Small
Title	Medium
Description	Extra large
Link	Medium

All caps

When enabling this option, the text of the block will be displayed in UPPERCASE regardless of how it was originally written — so you don't need to retype or reformat your content manually.

This is useful when you want to give a word or phrase a stronger, more impactful look without changing the actual text. It also makes it easier to experiment with the style of your store freely, since you can toggle it on or off at any time without losing your original content.

It pairs especially well with the Letter spacing option, as uppercase text combined with a subtle spacing can give your store a more refined and premium feel.

Margins

The options available on the different groups of the Theme settings panel will apply generally across the different sections and components within the theme.

Overriding margins

On ALL components you will find an option called Adjust margins, which will allow you to override the values defined here and customize them specifically for each component.

The intention for this is that you have absolute control over the design within each individual component.

So the rule of thumb becomes:

If you want to apply a general visual change, use the options available on Theme settings > Design > Sections margins;
If you want to customize them individually, go to each component and set the values that you prefer.

Mobile usage

The option called On mobile, which will be available on every instance where you can modifify margins, will allow you to define the amount of margin that's applied on Mobile devices, simultaneously for top and bottom.

For example let's say that you changed the value within this option to be 50% and you have defined 24px for the top and 48px to the bottom. This will result on components having half the amount of those values on mobile devices, as it follows:

Top → 24 / 0.5 = 12 px
Bottom → 48 / 0.5 = 24 px

Navigation

What are Components?

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 in this page.

What are Subcomponents?

A Subcomponent is an item that can be added within a Component. For example, the Subcomponent of Slider is a Slide, while the subcomponent of Banners is a Banner, and so on with others within a 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.

What are Templates?

A Template is the container in which the entire design of a section is placed, which at times can also be referred to as Layout.

The available templates on Jumpseller are the following:

Note: you can click on their names to access their dedicated template documentation.