How to create unique product tabs

In this article, you will learn how to create Unique Product Tabs in Palo Alto

Here are the steps for creating the Product Tabs:

To do this you will need to edit some small sections of code in the theme files as shown in the steps below.

1. Go to your Palo Alto theme on the Dashboard and select Actions >>  Edit Code.

2.  Open the  Sections folder and locate the product-template.liquid file. Click it to open the built-in editor.

3. Locate the tabs code shown below in the product-template.liquid file. It should be around line 14 to 16  and delete the three lines of code.

	{% assign tab_1 = section.settings.page_tab_1 %}
	{% assign tab_2 = section.settings.page_tab_2 %}
	{% assign tab_3 = section.settings.page_tab_3 %}

4. After deleting the above code, go down and to line 17 just above this code  {% comment %} and paste the code given below.

{% capture tabs_metafields %}
    {% assign tab1_title =  'tab1_title' %}
    {% assign tab1_content = 'tab1_content' %}
    {% assign tab2_title = 'tab2_title' %}
    {% assign tab2_content = 'tab2_content' %}
    {% assign tab3_title = 'tab3_title' %}
    {% assign tab3_content = 'tab3_content' %}
    {% assign tab1_title = product.metafields.tabs[tab1_title] %}
    {% assign tab1_content = product.metafields.tabs[tab1_content] %}
    {% assign tab2_title = product.metafields.tabs[tab2_title] %}
    {% assign tab2_content = product.metafields.tabs[tab2_content] %}
    {% assign tab3_title = product.metafields.tabs[tab3_title] %}
    {% assign tab3_content = product.metafields.tabs[tab3_content] %}  
{% endcapture %}

5. Open the  Snippet folder and locate the product-tabs.liquid file. Click it to open the built-in editor

6. Delete all the code in that file and replace it with the code given below.

{% if tab1_title != blank or tab2_title != blank or tab3_title != blank or enable_reviews %}
    <div class="product-tabs js-product-tabs">
      {% if enable_reviews %}
        <div class="product-tab">
          <div class="product-tab-title" itemprop="title">{{ section.settings.reviews_title }} <span class="icon-toggle"></span></div>
          <div class="product-tab-content" itemprop="content">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
        </div>
      {% endif %}
      {% if tab1_title != blank %}
        <div class="product-tab">
          <div class="product-tab-title" itemprop="title">{{ tab1_title }} <span class="icon-toggle"></span></div>
          <div class="product-tab-content" itemprop="content">{{ tab1_content }}</div>
        </div>
      {% endif %}
      {% if tab2_title != blank %}
        <div class="product-tab">
          <div class="product-tab-title" itemprop="title">{{ tab2_title }} <span class="icon-toggle"></span></div>
          <div class="product-tab-content" itemprop="content">{{ tab2_content }}</div>
        </div>
      {% endif %}
      {% if tab3_title != blank %}
        <div class="product-tab">
          <div class="product-tab-title" itemprop="title">{{ tab3_title }} <span class="icon-toggle"></span></div>
          <div class="product-tab-content" itemprop="content">{{ tab3_content }}</div>
        </div>
      {% endif %}
    </div>
{% endif %}

Creating Meta Fields

In order to create meta fields, you will need an app called Metafields Editor, it's a free app you can download and install.

Here's a few instructions on how to edit the metafields: 

1. Open the app "  Admin backend> Apps".

2. Click on a product and add a metafield.

3. Create tabs as shown below.

4. This is how it appears in the product description.

Still need help? Contact Us Contact Us