![\"Example](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Example-of-Added-Tabs-on-Product-Page.png\")
<\/figure>\n<\/div>\n\n\nThe tabs improve readability, enhance the shopping experience, and make the page manageable.<\/p>\n\n\n\n
Liquid Code to Add Tabs in Shopify Product Page<\/h2>\n\n\n\n
You can add tabs to the Shopify product page by modifying the template Liquid code. Here, we\u2019ll create a metafield first that will contain the details to display in the product tabs.<\/p>\n\n\n\n
Follow these steps:<\/p>\n\n\n\n
- \n
- Step 1: Define Product Metafields<\/li>\n\n\n\n
- Step 2: Add Liquid Snippet Code<\/li>\n\n\n\n
- Step 3: Fill in the Information in the Admin Panel<\/li>\n<\/ul>\n\n\n\n
Step 1: Define Product Metafields<\/h3>\n\n\n\n
First, navigate to Shopify Admin > Settings. <\/strong>Then click Custom data > Products. <\/strong><\/p>\n\n\n
\n![\"Define](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Define-Product-Metafields.png\")
<\/figure>\n<\/div>\n\n\nCreate a new metafield by clicking the Add definition <\/strong>button.<\/p>\n\n\n
\n![\"Click](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Click-Add-Definition-in-Product-Metafield-Definitions.png\")
<\/figure>\n<\/div>\n\n\nBased on the details you want to add to product fields, create metafields with proper name and type. For example: <\/p>\n\n\n\n
Name<\/strong><\/th> Namespace & Key<\/strong><\/th> Type<\/strong><\/th><\/tr><\/thead> Shipping<\/td> custom.shipping<\/td> Multi-line text or rich text<\/td><\/tr> Reviews<\/td> custom.reviews<\/td> Multi-line text or rich text<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Step 2: Add Liquid Snippet Code<\/h3>\n\n\n\n
Now, go to Online Store > Themes > Edit code > Snippets. <\/strong>Click Add a new snippet<\/strong>, name it as meetanshi-product-tabs<\/strong>, <\/strong>and save it.<\/p>\n\n\n
\n![\"Add](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Add-and-Name-New-Liquid-Snippet-Code.png\")
<\/figure>\n<\/div>\n\n\nPaste the following code inside the new snippet file and Save<\/strong> it:<\/p>\n\n\n\n
<style>\n .product-tabs {\n\tmargin-top: 2rem;\n }\n .tabs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 10px;\n\tmargin-bottom: 1rem;\n }\n .tab-link {\n\tpadding: 10px 20px;\n\tcursor: pointer;\n\tbackground-color: #f0f0f0;\n\tborder: none;\n\tborder-radius: 5px;\n\tfont-weight: bold;\n }\n .tab-link.active {\n\tbackground-color: #000;\n\tcolor: #FFF;\n }\n .tab-content {\n\tdisplay: none;\n\tpadding: 15px;\n\tborder: 1px solid #eee;\n\tborder-radius: 5px;\n }\n .tab-content.active {display: block;}\n\n<\/style>\n\n{% assign tab_count = 0 %}\n<div class=\"product-tabs\">\n<div class=\"tabs\">\n {% if product.description %}\n\t<button class=\"tab-link {% if tab_count == 0 %}active{% endif %}\" onclick=\"openTab(event, 'description')\">\n \tDescription\n\t<\/button>\n\t{% assign tab_count = tab_count | plus: 1 %}\n {% endif %}\n {% if shipping %}\n\t<button class=\"tab-link {% if tab_count == 0 %}active{% endif %}\" onclick=\"openTab(event, 'shipping')\">\n \tShipping\n\t<\/button>\n\t{% assign tab_count = tab_count | plus: 1 %}\n {% endif %}\n {% if reviews %}\n\t<button class=\"tab-link {% if tab_count == 0 %}active{% endif %}\" onclick=\"openTab(event, 'reviews')\">Reviews<\/button>\n {% endif %}\n<\/div>\n\n{% assign tab_count = 0 %}\n{% if product.description %}\n <div id=\"description\" class=\"tab-content {% if tab_count == 0 %}active{% endif %}\">\n\t{{ product.description }}\n <\/div>\n {% assign tab_count = tab_count | plus: 1 %}\n{% endif %}\n{% if shipping %}\n <div id=\"shipping\" class=\"tab-content {% if tab_count == 0 %}active{% endif %}\">\n\t{{ shipping | metafield_text }}\n <\/div>\n {% assign tab_count = tab_count | plus: 1 %}\n{% endif %}\n{% if reviews %}\n <div id=\"reviews\" class=\"tab-content {% if tab_count == 0 %}active{% endif %}\">\n\t{{ reviews | metafield_text }}\n <\/div>\n{% endif %}\n<\/div>\n\n<script>\nfunction openTab(evt, tabName) {\n const contents = document.querySelectorAll('.tab-content');\n const buttons = document.querySelectorAll('.tab-link');\n contents.forEach(tab => tab.classList.remove('active'));\n buttons.forEach(btn => btn.classList.remove('active'));\n document.getElementById(tabName).classList.add('active');\n evt.currentTarget.classList.add('active');\n}\n<\/script>\n<\/pre>\n\n\n\nNow, find and open the main-product.liquid<\/strong> file and replace the product.description with the following code: <\/p>\n\n\n\n
{% assign shipping = product.metafields.custom.shipping %}\n{% assign reviews = product.metafields.custom.reviews %}\n\n{% if shipping != blank or ingredients_test != blank %}\n {% render 'meetanshi-product-tabs', shipping: shipping, reviews: reviews %}\n{% else %}\n {{ product.description }}\n{% endif %}\n<\/pre>\n\n\n\nReplace the product.description<\/strong> division with the following line and Save<\/strong> the file:<\/p>\n\n\n\n
Step 3: Fill in the Information in the Admin Panel<\/h3>\n\n\n\n
Navigate to Shopify Admin > Products<\/strong>. Open any product and scroll down to the Product Metafields<\/strong> section. <\/p>\n\n\n\n
Now, you will see the shipping meta field, which we added earlier here. <\/p>\n\n\n
\n![\"Fill](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Fill-in-the-Information-in-the-Admin-Panel.png\")
<\/figure>\n<\/div>\n\n\nThis is how it will look to your shoppers. <\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\nOptional Steps<\/h2>\n\n\n\n
Here are some bonus customization tips if you\u2019d like to personalize your tabs, such as changing tab colors, enabling them on mobile devices, or displaying them only on specific products. <\/p>\n\n\n\n
In order to win your shoppers’ trust, you can add a Shopify press slider <\/a>to showcase your achievements and awards you have received over the years.<\/p>\n\n\n\nHow to Change Tabs Color?<\/h3>\n\n\n\n
Navigate to Online Store > Themes > Edit code > Snippets > meetanshi-product-tabs.liquid. <\/strong><\/p>\n\n\n\n
This code is already placed inside the snippet; you only need to change the background color of your choice.<\/p>\n\n\n\n
<style>\n.tab-link {\n\tbackground-color: #f0f0f0; \n }\n .tab-link.active {\n\tbackground-color: #000;\n\tcolor: #fff;\n }\n<\/style>\n<\/pre>\n\n\n\nEnable Tabs on Mobile Devices Only <\/h3>\n\n\n\n
Navigate to Online Store > Themes > Edit code > Snippets <\/strong>and edit the meetanshi-product-tabs.liquid <\/strong>file.<\/p>\n\n\n\n
And then add this inside the main snippet file code we created in step 1.<\/p>\n\n\n\n
<style>\n@media screen and (max-width: 749px) { \n\t.product-tabs {\n\tdisplay:block;\n}\n}\n@media screen and (min-width: 750px) { \n\t.product-tabs {\n\tdisplay:none;\n}\n}\n<\/style>\n<\/pre>\n\n\n\nGet Help with Shopify Theme Customization<\/h2>\n\n\n\n
Create a user-friendly content section that improves the shopping experience and helps shoppers make quick buying decisions.<\/p>\n\n\n\n
Need help with Shopify theme customization? Our expert team is here to create attractive Shopify product tabs<\/a> as per your branding.<\/p>\n\n\n\n
![\"Shopify](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/shopify-theme-customization-service.png\")
\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"