The Styles settings page

The Styles settings page is where you design the look of the tabs.

You can select a preset, adjust the style settings, see your changes instantly with the live preview, and preview the tabs in a theme.

BrowserThe 'Styles' settings page
The 'Styles' settings page

Presets

Presets are complete tab styles created by our professional design team using the style settings.

Each preset sets styles for both the horizontal layout and the vertical layout , so they're a great way to get a quick start on the perfect look for your tabs.

Selecting a preset shows it in the live preview but it will not be saved to your tabs until the Use preset button is clicked.

When the Use preset button is clicked, all existing style settings will be replaced with the settings from the preset.

Start with a preset

When designing your tabs, select a preset that closely matches the look you want for your tabs and then use the style settings to make changes.

BrowserThe style presets
The style 'Presets'

Style settings

The style settings are organized into the following categories:

Text
Change text colors, sizes, weights, styles, and alignment.
Spacing
Change margins, padding, and distribution.
Borders
Change border colors, border widths, border styles, and corner radiuses.
Backgrounds
Change background colors.
Indicators
Change the indicator type and colors for the vertical layout.
Advanced
Add custom CSS.
Style settings are not for tab content

The app simply organizes the content that it's given into tabs.

The appearance of that content is controlled by the theme's CSS or inline styles that are set directly in the content HTML (common when copying and pasting).

The app does not control the appearance of tab content in any way.

Learn more about tab content styling.

BrowserThe 'Text color' for the 'Open tabs' being set with the style
              settings
The 'Text color' for the 'Open tabs' being set with the style settings

Each section of the style settings shows one or more of the following panels:

Tabs
Settings for the tab titles. These settings apply to all tab titles unless overridden by settings in other panels.
Open tabs
Settings for the titles of tabs that are open.
First tab
Settings for the title of the first tab in a tab set.
Hovered tab
Settings for the titles of tabs that are hovered over with the mouse.
Last tab
Settings for the title of the last tab in a tab set.
Content
Settings for the HTML element that wraps each tab content panel.
Wrapper
Settings for the HTML element that wraps each tab set.
Style settings apply to all themes

When the Save button is clicked, the settings are saved to all themes that tabs are enabled in.

If you're designing for an unpublished theme , remember that any saved changes to the style settings will affect the tabs in your live shop.

Layouts

The horizontal layout and the vertical layout each have their own style settings.

You can see and select the layout that the style settings change with the layout selector at the bottom of the settings column.

The layout selector and the 'Save' button
The layout selector and the 'Save' button
The layout selector is only for the style settings

The layout selector sets the layout for the style settings only, it does not set the layout for the tabs in your shop.

You can set the layout for the tabs in your shop from the layout settings.

To save you time, many vertical layout style settings are inherited from the horizontal layout if they haven't been set.

For example, when tab titles are set to red for the horizontal layout, they'll be red for both layouts unless they're set to a different color for the vertical layout.

Inherited settings are indicated by a blue dot beside the setting name.

Blue dots indicating that the settings are inherited from the horizontal layout
Blue dots indicating that the settings are inherited from the horizontal layout

Live preview

The live preview uses an example tab set to show how your tabs will look with the current style settings. It's updated as style settings are changed so that you can see the changes without saving them.

BrowserThe 'Vertical' layout preview
The live preview showing tabs in the 'Vertical layout'
Themes determine many default styles

To help the tabs automatically match the look of your theme, style presets do not set many style settings, such as the Text color for the tab titles.

If a style setting isn't set then the tabs in your shop will inherit that style from the theme.

Styles inherited from the theme can not be shown in the live preview.

Themes can override tab style settings

The live preview shows how the app will style the tabs but it can't show how that styling may be affected by the theme.

If style settings have been set but the tabs in your shop still look different than the tabs in the live preview it's because the theme is overriding the tab style settings.

The page background and tab content colors are set by the theme so they can't be shown in the live preview. Instead, the preview shows the page background in white and the tab content in black.

If your theme colors are different then you can change the live preview to match them using the live preview settings.

When the Preview settings button is clicked from the live preview actions bar, the preview settings bar shows with the following controls:

Background
Change the color of the live preview background.
Text
Change the color of the example tab content text.
Reset
Reset the live preview settings to their defaults.
Done
Save the live preview settings and close the settings bar.
BrowserThe live preview settings<
The live preview settings

Theme preview

The theme preview shows how your tabs look in the themes that they're enabled in.

Clicking the View in theme button from the live preview actions bar opens a new browser tab to show the tabs in the theme.

If the tabs are enabled in more than one theme then clicking the View in theme button opens a menu that lists each theme that the tabs are enabled in. Clicking a theme name opens a new browser tab to show the tabs in that theme.

The 'View in theme' menu showing each theme that tabs are enabled in