[FIXED] How to make product description tabs in Shopify with out APP?

Issue

Need help to make product description tabs in Shopify with out APP. Just to using heading tags i.e. H4 and h5.

I don't want to use html code in description area.

Solution

Thanks for all for your help. But i have created a proper solution i hope it will help.

• In the {% section 'product-template' %} file find the following code:

  {{ product.description }}

Replace it with:

{%- assign product_description_content = product.description -%}

{%-if section.settings.enable_description_tabs -%}
  {%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
{%- endif -%}

{% if product_description_content != '' %}
  <div id="product-description">
    {{ product.description }}
  </div>
{% endif %}

{%-if section.settings.enable_description_tabs and product_description_content == '' -%}
  <div id="product-description">
    {% include 'product-tabs' %}
  </div>
{% endif  %}

• In schema append the following object in the settings array (to Enable/Disable the tabs):

{"type": "checkbox", "id": "enable_description_tabs", "label": "Enable Description Tabs", "default": true, "info": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles." }

• Create a snippet named it 'product-tabs' and put the following code in it: product-tabs.liquid

Now in Shopify product description assign h6 for the heading and on the next line put the content.

Make description as heading

Add h6 tag for heading

I Hope this will also be helpful for other.

Answered By - Jahanzaib Muneer

Answer Checked By - Senaida (PHPFixing Volunteer)