Product Description Tab

The Product Tabs section is designed to display product information in either tab or accordion format. This section can display descriptions, reviews, custom HTML content, and Liquid code with 2 main layouts: Tabs and Accordion.

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Choose Products from the dropdown window.

  4. In the Templates -> Add section -> choose Product Description Tab.

Product Description Tab - Settings Guide

This guide explains all available settings for the Product Description Tab in order from top to bottom as they appear in the Theme Editor.

Product Description Tab - Settings Guide

Appearance Settings

Setting
Type
Description
Visibility

Color scheme

color_scheme

Sets the color scheme for the entire section

Always visible

Tabs design

select

Choose between tab layout or accordion layout display

Always visible

Tab Settings (when tabs design = tab)

Setting
Type
Description
Visibility

Border bottom background

color

Color of the bottom border line under tab navigation

tabs_design == 'tab'

Border bottom gap

range

Spacing between the tab content and border line (0-50px)

tabs_design == 'tab'

Border active tab background

color

Color of the active tab indicator line

tabs_design == 'tab'

Separator color

color

Color of separator lines between elements

tabs_design == 'tab'

Accordion Settings (when tabs design = accordion)

Setting
Type
Description
Visibility

Gap

range

Spacing between accordion items (0-50px)

tabs_design == 'accordion'

Icon

select

Icon type for accordion toggle (none/caret/plus/right-arrow)

tabs_design == 'accordion'

Background

color

Background color for accordion items

tabs_design == 'accordion'

Padding left

range

Left padding inside accordion items (0-50px)

tabs_design == 'accordion'

Padding right

range

Right padding inside accordion items (0-50px)

tabs_design == 'accordion'

Padding top

range

Top padding inside accordion items (0-50px)

tabs_design == 'accordion'

Padding bottom

range

Bottom padding inside accordion items (0-50px)

tabs_design == 'accordion'

Border style

select

Border style for accordion (none/top/bottom/top-bottom/full)

tabs_design == 'accordion'

Border color

color

Color of accordion borders

tabs_design == 'accordion' AND accordion_border_style != 'none'

View content

select

How content is displayed on mobile (default/sidebar/popup)

tabs_design == 'accordion'

Layout Settings

Setting
Type
Description
Visibility

Alignment

select

Horizontal alignment of tabs (left/center/right)

Always visible

Alignment mobile

select

Horizontal alignment of tabs on mobile devices

Always visible

Gap

range

General spacing between elements (0-100px)

Always visible

Font size

select

Base font size for tab text (1.0rem - 4.0rem)

Always visible

Section width

select

Width constraint for the section (page-width/full-width/custom)

Always visible

Custom width

range

Custom section width when using custom option (1000-2000px)

section_width == 'custom'

Spacing Settings

Setting
Type
Description
Visibility

Padding left

range

Left padding for section container (0-100px)

Always visible

Padding right

range

Right padding for section container (0-100px)

Always visible

Padding top

range

Top padding for section container (0-100px)

Always visible

Padding bottom

range

Bottom padding for section container (0-100px)

Always visible

How to set up some sample descriptions of Ella:

  1. From your Shopify admin, go to Products -> All products.

  2. Find and choose the product that you want to edit.

  3. In the product description section, select Show HTML.

  1. Copy/paste our sample HTML code below and add it here.

Sample 1:

How to get the code template

Choose one of the following:

  1. Use the code generator via this link:

    https://themes.halothemes.com/shopify/description_tab/#template1

Note: If you're not sure how to use the generate tool, please refer to this article

  1. Copy the prebuilt template provided below.

Tip: Use the generator for quick customization. Copy the template if you just need the default version.

Sample 1 Template Code

Sample 2:

How to get the code template

Choose one of the following:

  1. Use the code generator via this link:

    https://themes.halothemes.com/shopify/description_tab/#template2

Note: If you're not sure how to use the generate tool, please refer to this article

  1. Copy the prebuilt template provided below.

Tip: Use the generator for quick customization. Copy the template if you just need the default version.

Sample 2 Template Code

Sample 3:

How to get the code template

Choose one of the following:

  1. Use the code generator via this link:

    https://themes.halothemes.com/shopify/description_tab/#template3

Note: If you're not sure how to use the generate tool, please refer to this article

  1. Copy the prebuilt template provided below.

Tip: Use the generator for quick customization. Copy the template if you just need the default version.

Sample 3 Template Code

Sample 4:

How to get the code template

Choose one of the following:

  1. Use the code generator via this link:

    https://themes.halothemes.com/shopify/description_tab/#template4

Note: If you're not sure how to use the generate tool, please refer to this article

  1. Copy the prebuilt template provided below.

Tip: Use the generator for quick customization. Copy the template if you just need the default version.

Sample 4 Template Code

PreviousQuick Order ListNextProduct Recommendations

Last updated