Shopify Question posted in
The Shopify help center can be found here.

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

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    It can be done, however it’s a bit hacky.

    1. Add HTML comment inside your product description, for example <!--split-->, this comment should be at the beginning of each tab, make sure you add your content in editor HTML mode
    <p>tab 1 content</p><!--split-->
<p>tab 2 content</p><!--split-->
<p>tab 3 content</p>
    1. In your product template split product description like:
    {% assign description_tabs = product.description | split: '<!--split-->' %}
    1. Loop through description_tabs to render each content block
    {% for tab in description_tabs %}
  <div id="tab-{{forloop.index}}">{{ tab }}</div>
{% endfor %}

    You gonna have to write some html/css/js to make this work but this liquid code should get you up and running.

    Good luck!

    Login or Signup to reply.
  3. 0

    Step 1: Open the product editor in your Shopify Dashboard
    After opening up the product you want to edit, click the "View HTML" button over the top right corner of the text area.
    https://cdn.shopify.com/s/files/1/0783/2131/files/shopify-tabs-minimal-theme-1.jpg?4235358175750708465

    Step 2: Paste this code into the product descriptio
    https://cdn.shopify.com/s/files/1/0783/2131/files/shopify-tabs-minimal-theme-2.jpg?8632844864695689229

    Your product should now look something like this:

    Step 3: Edit the labels and content for each tab
    I highly recommend editing the labels and content from within the HTML editor, rather than using the visual editor. This is because the visual editor tends to mess up the HTML code that you pasted in.

    Step 4: Save
    Click "Update" or "Save" to save the changes you made to the product. Then go ahead and view the product on your website to make sure the tabs are showing up properly.

    I hope that went smoothly for you! If you had any problems, please leave a comment below with a description of the problem and I’ll do my best to help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search