Personalized checkout and custom promotions with Shopify Scripts
Hello,
I have three meta fields loaded onto my product pages. When I load the page, they are all open and visible. I just want the first tab Open and the rest to open when clicked. How can I do this? Below is my code and I am attaching what the page looks like right now! FYI there is nothing under reviews or drafts at the moment, so the tabs are not visible!
This is my URL: https://newagewalls.com/products/custom-baby-portrait-hand-made-illustrations-digital-or-framed
<div class="tabs-area">
<div class="tab">
{% if product.metafields.my_feild.description != blank %}
<button class="tablinks" onclick="openTab(event, 'tab1')">How To Order </button>
{% endif %}
{% if product.tags contains 'options' %}
{% if product.metafields.my_fields.options != blank %}
<button class="tablinks" onclick="openTab(event, 'tab2')">Drafts </button>
{% endif %}
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<button class="tablinks" onclick="openTab(event, 'tab3')">Manufacturing </button>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<button class="tablinks" onclick="openTab(event, 'tab4')">FAQ </button>
{% endif %}
{% if product.metafields.my_fields.reviews != blank %}
<button class="tablinks" onclick="openTab(event, 'tab5')">reviews </button>
{% endif %}
</div>
<div class="tab__inner-text">
{% if product.metafields.my_feild.description != blank %}
<div id="tab1" class="tabcontent">
{{ product.metafields.my_feild.description }}
</div>
{% endif %}
{% if product.metafields.my_fields.options != blank %}<div id="tab2" class="tabcontent">
{{ product.metafields.my_fields.options }}
</div> {% endif %}
{% if product.metafields.my_fields.order != blank %} <div id="tab3" class="tabcontent">
{{ product.metafields.my_fields.order }}
</div> {% endif %}
{% if product.metafields.my_fields.frames != blank %}<div id="tab4" class="tabcontent">
{{ product.metafields.my_fields.frames }}
</div> {% endif %}
</div>
</div>
Hi @tinadochana ,
Please try replacing your code with the below one.
<div class="tabs-area">
<div class="tab">
{% if product.metafields.my_feild.description != blank %}
<button class="tablinks active" onclick="openTab(event, 'tab1')">How To Order </button>
{% endif %}
{% if product.tags contains 'options' %}
{% if product.metafields.my_fields.options != blank %}
<button class="tablinks" onclick="openTab(event, 'tab2')">Drafts </button>
{% endif %}
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<button class="tablinks" onclick="openTab(event, 'tab3')">Manufacturing </button>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<button class="tablinks" onclick="openTab(event, 'tab4')">FAQ </button>
{% endif %}
{% if product.metafields.my_fields.reviews != blank %}
<button class="tablinks" onclick="openTab(event, 'tab5')">reviews </button>
{% endif %}
</div>
<div class="tab__inner-text">
{% if product.metafields.my_feild.description != blank %}
<div id="tab1" class="tabcontent" style="display:block">
{{ product.metafields.my_feild.description }}
</div>
{% endif %}
{% if product.metafields.my_fields.options != blank %}
<div id="tab2" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.options }}
</div>
{% endif %}
{% if product.metafields.my_fields.order != blank %}
<div id="tab3" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.order }}
</div>
{% endif %}
{% if product.metafields.my_fields.frames != blank %}
<div id="tab4" class="tabcontent" style="display:none">
{{ product.metafields.my_fields.frames }}
</div>
{% endif %}
</div>
</div>
Hope it helps...
Thank you for the help! I got someone to help me and the issue was fixed! 🙂
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025