By default, only collapsable tabs are available in shopify dawn theme. Today we will take a look how we can add Custom tabs Below the Product Information section on the product page template.
Step 1: Create a New Asset
> Go to Theme > Actions > Edit Code > Assets > Add a new asset
> Select Create a Blank File form the popup tab and selection the extension from dropdown menu as js.liquid then enter your filename (filename.js.liquid) Please note you do not need to type .js.liquid in the filename. it will automatically add the extension. Further do not enter blank spaces.
Step 2: Enter the code
> The file that you just created will open in the editor. Now enter the below code in the file and save it
function openTab(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent-cus");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks-cus");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("tab-cus-active").click();
Step 3: Enter code in theme.liquid
> Now open the file theme.liquid file from the layout folder and search for closing body tag </body>
> Just above the closing body tag, enter the below code:
{{ 'filename.js' | asset_url | script_tag }}
Please note: The filename extension should be .js and not .js.liquid here. Also replace filename with your actual name of the file.
Step 4: Enter tabs code in editor
> Now go to admin > Online Store > Themes > Dawn Theme > Customize
> From the top dropdown select Product > Default product template or which ever template you want to add tabs to
> From the left panel move down and select ADD SECTION and select CUSTOM LIQUID
> Now click on custom liquid section and editor will open. In the Custom Liquid code section add the below code.
<div class="tab-customize">
<button class="tablinks-cus" onclick="openTab(event, 'tab-1')" id="tab-cus-active" >Information</button>
<button class="tablinks-cus" onclick="openTab(event, 'tab-2')">Shipping</button>
<button class="tablinks-cus" onclick="openTab(event, 'tab-3')">Policy</button>
</div>
<!-- Tab content -->
<div id="tab-1" class="tabcontent-cus">
{{ product.description }}
</div>
<div id="tab-2" class="tabcontent-cus ">
{{ pages.shipping.content }}
</div>
<div id="tab-3" class="tabcontent-cus ">
{{ pages.policy.content }}
</div>
<style>
.tab-customize {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab-customize button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
width: 33%;
}
.tab-customize button:hover {
background-color: #ddd;
}
.tab-customize button.active {
background-color: #ccc;
}
.tabcontent-cus {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
The first tab loads product description. The second tab load content from page with slug shipping and the third tab loads content from the page with slug policy.
You can replace the values between {{ }} to custom metafields if you wish to display metafields here.
If you are using metafield of Multiline type, then you need to tweak the existing code.
For shipping page code change it to {{ pages.shipping.content | newline_to_br }} and same can be done for other tabs as well. No need to change the code for description as it already has this functionality inbuilt.
Code Source: happypoints.io
0 Comments