How To Add Product Tabs with Metafields [No App Needed]

Step 1: Go To Online Store → Themes and Click Customize

Step 2: Click the dropdown that says “Home Page” in the top bar → Click Products and Select Default Products

Step 3: Click Add Block under the section Product Information or something similar → Select Custom Liquid from the list

Step 4: Copy the below code and paste it in the text field→ Don’t forget to hit Save

{% assign benefits =  product.metafields.custom.product_benefits %}
{% assign bestFor =  product.metafields.custom.product_best_for %}
{% assign bonuses =  product.metafields.custom.product_bonuses %}

{% if  benefits != blank or  bestFor != blank or bonuses != blank %}
		<div class="advance-product-tabs">
						{% if benefits != blank %}
	            <div class="advance-product-tab" data-target="content1">Benefits</div>
            {% endif %}
            {% if bestFor != blank %}
	            <div class="advance-product-tab" data-target="content2">Best For</div>
            {% endif %}
            {% if bonuses != blank %}
	            <div class="advance-product-tab" data-target="content3">Bonuses</div>
            {% endif %}
	 </div>
	      {% if benefits != blank %}
	        <div id="content1" class="advance-product-tab-content">
	             {{ benefits | metafield_tag }}
	        </div>
        {% endif %}
        {% if bestFor != blank %}
	        <div id="content2" class="advance-product-tab-content">
	            {{ bestFor | metafield_tag }}
	        </div>
        {% endif %}
        {% if bonuses != blank %}
	        <div id="content3" class="advance-product-tab-content">
	            {{ bonuses | metafield_tag }}
	        </div>
	      {% endif %}
{% endif %}

                  
 <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.advance-product-tab');
            const tabContents = document.querySelectorAll('.advance-product-tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const target = this.getAttribute('data-target');

                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    this.classList.add('active');
                    document.getElementById(target).classList.add('active');
                });
            });

            // Set the first tab active by default
            if (tabs.length > 0) {
                tabs[0].classList.add('active');
                tabContents[0].classList.add('active');
            }
        });
 </script>

<style>
	 .advance-product-tabs {
	  display: flex;
	  border-bottom: 1px solid #e2e2e2;
	  margin: 5px 0px;
	}
	.advance-product-tab {
	  flex-basis: 50%;
	  padding: 5px 20px;
	  cursor: pointer;
	  text-align: center;
	}
	.advance-product-tab-content ul {
	  margin: 0px;
	}
	.advance-product-tab:hover {
	  border-bottom: 3px solid #333;
	}
	.advance-product-tab.active {
	  border-bottom: 3px solid #333;
	}
	.advance-product-tab-content {
	  display: none;
	  padding: 0px;
	  margin-top: 15px;
	  margin-bottom: 25px;
	}
	.advance-product-tab-content.active {
	  display: block;
	}
</style>

Final Step: You will need to add 3 product metafields. You can follow the video to set it up:

• Namespace and Key Value for Metafield 1: custom.product_benefits
• Namespace and Key Value for Metafield 2: custom.product_best_for
• Namespace and Key Value for Metafield 3: custom.product_bonuses