Step 1: Edit the Product Template
- Log in to your Shopify admin panel.
- Navigate to
Online Store > Themes
. - Find the Dawn theme, click on
Actions
, thenEdit code
.
Step 2: Add the Custom Tabs Section
- In the Sections directory, create a new file named
product-custom-tabs.liquid
. - Add the following code to create the custom tabs section:
<!-- product-custom-tabs.liquid -->
<section id="product-custom-tabs" class="product-custom-tabs">
<div class="tabs">
<button class="tablinks" onclick="openTab(event, 'Description')">Description</button>
<button class="tablinks" onclick="openTab(event, 'AdditionalInfo')">Additional Info</button>
<button class="tablinks" onclick="openTab(event, 'Reviews')">Reviews</button>
</div>
<div id="Description" class="tabcontent">
<h3>Description</h3>
{{ product.description }}
</div>
<div id="AdditionalInfo" class="tabcontent">
<h3>Additional Info</h3>
<!-- Add your custom additional info here -->
<p>Here is some additional information about the product.</p>
</div>
<div id="Reviews" class="tabcontent">
<h3>Reviews</h3>
<!-- Add your reviews code or app integration here -->
<p>Customer reviews will go here.</p>
</div>
</section>
<style>
/* Styles for the tabs */
.product-custom-tabs .tabs {
overflow: hidden;
background-color: #f1f1f1;
}
.product-custom-tabs .tabs button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.product-custom-tabs .tabs button:hover {
background-color: #ddd;
}
.product-custom-tabs .tabs button.active {
background-color: #ccc;
}
.product-custom-tabs .tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
</style>
<script>
// JavaScript to handle tab switching
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Default open tab
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".tablinks").click();
});
</script>
Step 3: Include the Custom Tabs Section in the Product Template
- In the Templates directory, find the
product.json
file. - Add the custom tabs section to the product template by including it in the sections array.
Here’s an example of how to include it:
{
"name": "Product",
"sections": {
"main": {
"type": "main-product",
"settings": {
"enable_sticky_header": true
}
},
"product-custom-tabs": {
"type": "product-custom-tabs"
}
},
"order": [
"main",
"product-custom-tabs"
]
}
Step 4: Customize Further as Needed
You can further customize the product-custom-tabs.liquid
file to add more tabs or change the content. You can also add more styles to match your store’s design.
Step 5: Save and Preview
- Save your changes.
- Go to your store and preview a product page to see the custom tabs in action.
Summary
By following these steps, you have added custom product tabs to your Shopify Dawn theme:
- Created a new section for the custom tabs.
- Added the custom tabs section to the product template.
- Customized the tabs with content, styles, and scripts.
This approach allows you to provide additional structured information to your customers in a clean and organized way.
Leave a Reply