Customize the look of your tabs

The Styles page lets you customize the look of your tabs.


On this page


Access the Styles page

To access the Styles page:

  1. Click Settings from the main menu in the app.
  2. Click Styles from the settings menu.

Choose a style preset

To choose a style preset:

  1. Access the Styles page.
  2. Click Presets from the Styles sidebar.
  3. Choose your preferred preset.
  4. Click the Use preset button from the bottom of the styles sidebar.
  5. Click Continue from the confirmation popup.

Adjust the style settings

Tabs includes a powerful style designer that lets you adjust a number of different style settings. As adjustments are made the preview area gives you live updates so that you can easily achieve the perfect look. The adjustment settings are organized into the following categories:

Text
Colors, sizes, weights, alignment and more for text in the tabs and tab content.

Spacing
Margins and padding for the tabs, tab content and tab set wrapper.

Borders
Border colors, styles, weights and more for the tabs, tab content and tab set wrapper.

Backgrounds
Background colors for the tabs and tab content.

Indicators
The tab open and close indicators for the vertical/accordion layout.

Advanced
Custom CSS code.

To adjust the style settings:

  1. Access the Styles page.
  2. Click on a category from the Styles sidebar.
  3. Adjust the settings and see the results in the live preview area.
  4. Click the Save button to save the style settings.

Your live shop is not affected until the style settings are saved.


Change the preview layout

Tabs allows you to style the horizontal/tab and vertical/accordion layouts independently of one another.

To change the preview layout:

  1. Access the Styles page.
  2. Click one of the layout icons from the bottom of the Styles sidebar. The left icon shows the horizontal/tab layout and the right icon shows the vertical/accordion layout.

The vertical/accordion layout inherits many style settings from the horizontal/tab layout. Settings that are inherited are indicated with a small blue dot beside the setting name. When an inherited setting is changed then any future changes to the setting in the horizontal/tab layout will not carry over to the vertical/accordion layout.


Add custom CSS

To add custom CSS:

  1. Access the Styles page.
  2. Click Advanced from the Styles sidebar.
  3.  Write or paste CSS into the Custom CSS area.
  4. Click the Save button to save the style settings.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.