How to add tabs for product description, reviews, and shipping info?

Store Design
1

I’m trying to improve the layout of my product pages and want to add tabbed content for Description, Customer Reviews, and Shipping Information (More Information). I’m using the Dawn theme and I’d prefer a clean, collapsible tab design if possible. I’m comfortable editing code but would appreciate guidance on the best way to implement this—either through custom Liquid/HTML/CSS or using built-in theme features. Also, is there a way to integrate Shopify reviews or a third-party app into one of the tabs?

2

Hello @johnwarner23
Welcome to the Shopify Community! Kindly share your store URL and password (if it is password-protected), so that I can review it and provide you with an accurate solution.

3

Hi @johnwarner23 , I’d like to recommend our newly launched app: PageUni Product Tabs.

It provides free collapsible tabs that you can add to your store as a theme section and use forever.

And we also offer other modern designed templates with a one-time payment, which can be customized and used in your theme as a theme section.

No subscription fees are required. If the free product tabs meet your needs, you can use them in your store for life at no cost.

Here’s a preview gallery of our product tabs:

CIuI3PfP8Y8DEAE=
CIuI3PfP8Y8DEAE=1600×900 244 KB

4

Hi @johnwarner23 ,
Since you’re comfortable editing code, you have a few solid options depending on whether you want tabs across the top or collapsible accordion-style blocks (which fit Dawn’s native design better). Let me break it down:

Option 1: Use Dawn’s Built-in Collapsible Rows (no code apps needed)

Dawn already comes with a collapsible-tab.liquid section. You can use this instead of writing custom tab logic.

  1. In the Theme Editor, open a Product template.
  2. Add a Collapsible Tab block (called “Collapsible row” in some versions).
  3. Give one row the heading “Description” → then use {{ product.description }} in the content field.
  4. Another row “Customer Reviews” → leave blank if you’ll inject reviews app here.
  5. Another row “Shipping Information” → add static text or connect to a page metafield.

Pro: Matches Dawn styling, responsive, and clean.
Con: They’re collapsible, not horizontal “tabs” across the top.

Option 2: Custom Tabs with Liquid + CSS

If you want a true tabbed interface (horizontal tabs switching content), you’ll need to add custom code.

Step 1: Edit Product Template

  1. Go to Online Store > Edit code.
  2. Open main-product.liquid (or wherever your product info is structured).
  3. Add this markup where you want tabs to appear:
<div class="product-tabs">
  <ul class="tab-buttons">
    <li class="active" data-tab="desc">Description</li>
    <li data-tab="reviews">Reviews</li>
    <li data-tab="shipping">Shipping Info</li>
  </ul>

  <div class="tab-content active" id="desc">
    {{ product.description }}
  </div>

  <div class="tab-content" id="reviews">
    <!-- Shopify Product Reviews app embed -->
    {% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', product: product %}
    <!-- or use Shopify's free Product Reviews app snippet -->
  </div>

  <div class="tab-content" id="shipping">
    <p>Shipping times: 3–5 business days in the US. International may vary.</p>
  </div>
</div>

Step 2: Add CSS

In base.css (or component-product.css), add:

.product-tabs {
  margin-top: 2rem;
}
.tab-buttons {
  display: flex;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #ddd;
}
.tab-buttons li {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.tab-buttons li.active {
  border: 1px solid #ddd;
  border-bottom: none;
  background: #f9f9f9;
}
.tab-content {
  display: none;
  padding: 1rem;
  border: 1px solid #ddd;
}
.tab-content.active {
  display: block;
}

Step 3: Add JS

In theme.liquid (before </body>), add:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const buttons = document.querySelectorAll(".tab-buttons li");
  const contents = document.querySelectorAll(".tab-content");

  buttons.forEach(btn => {
    btn.addEventListener("click", () => {
      buttons.forEach(b => b.classList.remove("active"));
      contents.forEach(c => c.classList.remove("active"));

      btn.classList.add("active");
      document.getElementById(btn.dataset.tab).classList.add("active");
    });
  });
});
</script>

Pro: Classic tab look, flexible.
Con: Needs ongoing maintenance if Dawn updates.

Option 3: Reviews Integration

  • Shopify Product Reviews (free) → gives you a snippet you can drop into the “Reviews” tab.
  • Judge.me / Loox / Yotpo → all provide embed snippets ({% render 'snippet-name' %}) you can paste into the reviews tab.

My recommendation: If you’re okay with collapsible sections → use Dawn’s built-in Collapsible rows. They’re faster, cleaner, and easier to maintain. If you specifically want horizontal tabs → go with Option 2.

5

Hello @johnwarner23 ,

I hope you are well!

Can you please let me know which theme you are using? Also, please provide the store URL so that I can check it and provide you the code.