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.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products from the dropdown window.
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
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)
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)
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
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
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:
From your Shopify admin, go to Products -> All products.
Find and choose the product that you want to edit.
In the product description section, select Show HTML.
Copy/paste our sample HTML code below and add it here.
Sample 1:
How to get the code template?
Choose one of the following:
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
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:
How to get the code template?
Choose one of the following:
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
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:
How to get the code template?
Choose one of the following:
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
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:
How to get the code template?
Choose one of the following:
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
Copy the prebuilt template provided below.
Tip: Use the generator for quick customization. Copy the template if you just need the default version.
How to set up Custom Tabs by Metafields
In section Product tabs -> Add HTML -> select the content type is Different for each product with metafields
Add a Product metafield for add content and copy this key
Add a key to Product Tab Metafield 'Key'
Go to the product and add content to Product Metafields
Last updated