Add CSS‑Only Tabs to Your Shopify Product Page

Author - Moz

Why Use CSS‑Only Tabs On Product Pages?

Apps add bloat, JavaScript may conflict, and extra scripts slow your product page. A CSS-only tabs layout keeps your site fast and clean, improving customer experience and boosting conversion potential on your product page.

⚠️ Heads-up Before You Start

This method involves editing your product description. Always duplicate your product before making changes to keep a safe backup.

Step 1: Edit Your Shopify Product

From your Shopify admin:

  • Go to Online Store → Products
  • Click the name of the product that you want to change
  • Click the </> icon to view and edit the HTML code
  • Go to the bottom of the product description

Step 2: Paste This Code Snippet

Copy 

<style>
.tab-frame {
  margin: 20px 0;
  padding: 10px 0;
}

.tab-frame input {
  display: none;
}

/* Label styles */
.tab-frame label {
  display: inline-block;
  padding: 8px 10px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}

.tab-frame input:checked + label {
  color: #000;
  cursor: default;
  border-color: #333;
}

/* Base tab content */
.tab-frame .tab {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 10px;
}

/* Show selected tab */
.tab-frame input:nth-of-type(1):checked ~ .content1,
.tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3) {
  max-height: 200px;
  opacity: 1;
  padding: 10px;
}
</style>

  
<div class="tab-frame">
  <input id="tab1" name="tab" type="radio" checked>
  <label for="tab1">REAL RESULTS</label>
  <input id="tab2" name="tab" type="radio">
  <label for="tab2">BENEFITS</label>
  <input id="tab3" name="tab" type="radio">
  <label for="tab3">HOW TO USE</label>

  <div class="tab content1">
    <p>Real results copy here...</p>
  </div>
  <div class="tab">
    <p>Benefits content here...</p>
  </div>
  <div class="tab">
    <p>Instructions content here...</p>
  </div>
</div>

Step 3: Edit Your Tab Content

  • Replace all tab content with your own content
  • Click again the </> icon to view plain text
  • Click Save and preview the product page

Final Thoughts

A client used CSS-only tabs to clean up long product details. The result: 20% more page scroll depth and 15% faster page load, improving engagement without extra apps. CSS-only tabs give your product page a polished, app-free UI. They maintain performance, ease maintenance, and enhance UX—all without JavaScript.

Back to blog
Work With Us