Custom Product Tabs in Shopify Dawn Theme

Step 1: Edit the Product Template

1. Log in to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Find the Dawn theme, click on Actions, then Edit code.

Step 2: Add the Custom Tabs Section

1. In the Sections directory, create a new file named product-custom-tabs.liquid.
2. 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

1. In the Templates directory, find the product.json file.
2. 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

1. Save your changes.
2. 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:

1. Created a new section for the custom tabs.
2. Added the custom tabs section to the product template.
3. 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.