# 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**.
4. 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: {% hint style="info" %} Note: If you're not sure how to use the generate tool, please refer to[ this article](https://halosoft.gitbook.io/ella-7-documentation/~/revisions/L2HLuRLMBX9AJO7AuEk1/faq-and-troubleshooting/how-to-use-the-tool-to-generate-template-code) {% endhint %} 2. **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 ```html

Nam tempus turpis at metus scelerisque placerat nulla deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue sit amet ornare rhoncus elit nisi luctus.

Sample Unordered List

  • Comodous in tempor ullamcorper miaculis.
  • Pellentesque vitae neque mollis urna mattis laoreet.
  • Divamus sit amet purus justo.
  • Proin molestie egestas orci ac suscipit risus posuere.

Sample Ordered List

  1. Comodous in tempor ullamcorper miaculis.
  2. Pellentesque vitae neque mollis urna mattis laoreet.
  3. Divamus sit amet purus justo.
  4. Proin molestie egestas orci ac suscipit risus posuere loremous.

Sample Block Quote

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.

Sample Paragraph Text

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.

```
### Sample 2:
#### **How to get the code template?** Choose one of the following: 1. **Use the code generator** via this link: {% hint style="info" %} Note: If you're not sure how to use the generate tool, please refer to[ this article](https://halosoft.gitbook.io/ella-7-documentation/~/revisions/L2HLuRLMBX9AJO7AuEk1/faq-and-troubleshooting/how-to-use-the-tool-to-generate-template-code) {% endhint %} 2. **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 ```html

Nam tempus turpis at metus scelerisque placerat nulla deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue sit amet ornare rhoncus elit nisi luctus.

Sample Unordered List

  • Comodous in tempor ullamcorper miaculis.
  • Pellentesque vitae neque mollis urna mattis laoreet.
  • Divamus sit amet purus justo.
  • Proin molestie egestas orci ac suscipit risus posuere.

Sample Ordered List

  1. Comodous in tempor ullamcorper miaculis.
  2. Pellentesque vitae neque mollis urna mattis laoreet.
  3. Divamus sit amet purus justo.
  4. Proin molestie egestas orci ac suscipit risus posuere loremous.

Sample Block Quote

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.

Sample Paragraph Text

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.

```
### Sample 3:
#### **How to get the code template?** Choose one of the following: 1. **Use the code generator** via this link: {% hint style="info" %} Note: If you're not sure how to use the generate tool, please refer to[ this article](https://halosoft.gitbook.io/ella-7-documentation/~/revisions/L2HLuRLMBX9AJO7AuEk1/faq-and-troubleshooting/how-to-use-the-tool-to-generate-template-code) {% endhint %} 2. **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 ```html

Nam tempus turpis at metus scelerisque placerat nulla deumantos solicitud felis. Pellentesque diam dolor, elementum etos lobortis des mollis ut risus. Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras loremos. Donec pretium egestas sapien et mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla in mi vel arcu convallis molestie et eget nulla. Donec laoreet daugue sit amet ornare rhoncus elit nisi luctus.

Sample Image Gallery

Sample Unordered List

  • Comodous in tempor ullamcorper miaculis.
  • Pellentesque vitae neque mollis urna mattis laoreet.
  • Divamus sit amet purus justo.
  • Proin molestie egestas orci ac suscipit risus posuere.

Sample Ordered List

  1. Comodous in tempor ullamcorper miaculis.
  2. Pellentesque vitae neque mollis urna mattis laoreet.
  3. Divamus sit amet purus justo.
  4. Proin molestie egestas orci ac suscipit risus posuere loremous.

Sample Block Quote

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis, nec danos dui vestibulum sit amet auctor ipsum.

Sample Paragraph Text

Praesent vestibulum congue tellus at fringilla. Curabitur vitae semper sem, eu convallis est. Cras felis nunc commodo eu convallis vitae interdum non nisl. Maecenas ac est sit amet augue pharetra convallis nec danos dui. Cras suscipit quam et turpis eleifend vitae malesuada magna congue. Damus id ullamcorper neque. Sed vitae mi a mi pretium aliquet ac sed elitos. Pellentesque nulla eros accumsan quis justo at tincidunt lobortis denimes, suspendisse vestibulum lectus in lectus volutpate.

```
### Sample 4:
#### **How to get the code template?** Choose one of the following: 1. **Use the code generator** via this link: {% hint style="info" %} Note: If you're not sure how to use the generate tool, please refer to[ this article](https://halosoft.gitbook.io/ella-7-documentation/~/revisions/L2HLuRLMBX9AJO7AuEk1/faq-and-troubleshooting/how-to-use-the-tool-to-generate-template-code) {% endhint %} 2. **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 ```html

Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum et lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus scelerisque blandit est cursus.

✔  Comodous in tempor ullamcorper miaculis
✖  Pellentesque vitae neque mollis urna mattis laoreet
✔  Divamus sit amet purus justo
✖  Proin molestie egestas orci ac suscipit risus posuere loremous
✔  Nam tempus turpis at metus scelerisque placerat nulla deumantos
✖  Donec pretium egestas sapien et mollis
Returns Policy

You may return most new, unopened items within 30 days of delivery for a full refund. We'll also pay the return shipping costs if the return is a result of our error (you received an incorrect or defective item, etc.).

You should expect to receive your refund within four weeks of giving your package to the return shipper, however, in many cases you will receive a refund more quickly. This time period includes the transit time for us to receive your return from the shipper (5 to 10 business days), the time it takes us to process your return once we receive it (3 to 5 business days), and the time it takes your bank to process our refund request (5 to 10 business days).

If you need to return an item, simply login to your account, view the order using the "Complete Orders" link under the My Account menu and click the Return Item(s) button. We'll notify you via e-mail of your refund once we've received and processed the returned item.

Drostique Nam tempus turpis at metus scelerisque placerat nulla deumantos
Pharetro Lorem Pellentesque diam dolor elementum etos lobortis des mollis
Milancelos Donec pretium egestas sapien et mollis
Pellentesque Sedcus faucibus an sullamcorper mattis drostique des commodo pharetras
Proin Molestie Pellentesque diam dolor elementum etos lobortis des mollis
Cosmopolis Donec pretium egestas sapien et mollis
Shipping

We can ship to virtually any address in the world. Note that there are restrictions on some products, and some products cannot be shipped to international destinations.

When you place an order, we will estimate shipping and delivery dates for you based on the availability of your items and the shipping options you choose. Depending on the shipping provider you choose, shipping date estimates may appear on the shipping quotes page.

Please also note that the shipping rates for many items we sell are weight-based. The weight of any such item can be found on its detail page. To reflect the policies of the shipping companies we use, all weights will be rounded up to the next full pound.

```
## 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