Product Information Under Categories

[KralZaboMuzu]

Hi everyone,

I’m working on a product page, and I’d like to organize the product information into clear, clickable categories (like "Description," "Dosage," "Ingredients," etc.) as shown in the images attached. Specifically, I want these categories to appear under the product on the page, just like in the second image (final form).

I already have the product details, including usage, dosage, warnings, etc., but I need help structuring the page to look like this.

Can anyone guide me on:

1. How to set up these category tabs (like in the second image)?
2. How to ensure the details are easy to navigate for users?
3. If there are any tools, plugins, or specific code snippets I can use for this design?

I appreciate any tips or insights you can share!

Thanks in advance for your help!

Site URL: vkymjm-tj.myshopify.com

[devmont-digital]

Hello @KralZaboMuzu, 

If you want to create this type of section, follow these steps:

1. Go to the dashboard → Online Store → Themes → Edit Code.

2. Add a new section, remove all the dummy code, and paste the provided code.

<style>
    [data-tab-content] {
      display: none;
      transition: all .5s ease-in-out;
    }
    .productTabs {
      margin-top: 90px;
    }
    .productTabs .active[data-tab-content] {
      display: block;
      transition: all .5s ease-in-out;
    }
    .productTabs .tabs {
      display: flex;
      justify-content: center;
      list-style-type: none;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #c9c9c9;
      gap: 320px;
    }
    .productTabs .tab {
      cursor: pointer;
      padding: 10px;
      font-family: "Nexa-Bold" !important;
      transition: all .5s ease-in-out;
    }
    .productTabs .tab.active {
      box-shadow: 0px -2px 0 #141414 inset;
    }
    .productTabs .tab:hover {
     transition: all .5s ease-in-out;
   }
   .productTabs .tab-content {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .product__description.rte.quick-add-hidden h1,
  .product__description.rte.quick-add-hidden h2,
  .product__description.rte.quick-add-hidden h3,
  .product__description.rte.quick-add-hidden h4,
  .product__description.rte.quick-add-hidden h5{
    font-size:16px !important;
    color: #000;
  }
  .product__description.rte.quick-add-hidden p,
  .product__description.rte.quick-add-hidden ul li{
    color: #909090;
  }
  .product__description.rte.quick-add-hidden ul{
    list-style: disc;
  }
  @media(max-width:1440px){
    .productTabs .tabs {
      justify-content: space-around;
      gap: unset;
    }
  }
  @media(max-width:481px){
   .productTabs .tabs {
     flex-direction: column;
   }
   .productTabs .tab {
    border-bottom: 1px solid #c9c9c9;
  }
  .productTabs .tabs {
    border-bottom: unset;
  }
  .productTabs .tab:hover {
    background-color: #f97601;
    color: #fff;
  }
  .productTabs .tab.active {
   background-color: #f97601;
   color: #fff;
  }
  .productTabs {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #c9c9c9;
  }
  }
</style>
<div class="productTabs page-width">
  <ul class="tabs">
    {% if section.settings.show_product_descp %}
    <li data-tab-target="#productDescription" class="active tab">Product Description</li>
    {% endif %}
    {%- for block in section.blocks -%}
      {%- if block.type == 'tab' -%}
        <li data-tab-target="#tab-{{ block.id }}" class="tab">{{ block.settings.tab_name }}</li>
      {%- endif -%}
    {%- endfor -%}
  </ul>

  <div class="tab-content">
    <!-- Hardcoded Product Description Tab -->
    {% if section.settings.show_product_descp %}
    <div id="productDescription" data-tab-content class="active">
      <div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
        {{ product.description }}
      </div>
    </div>
    {% endif %}

    <!-- Dynamic Tabs Generated from Schema -->
    {%- for block in section.blocks -%}
      {%- if block.type == 'tab' -%}
        <div id="tab-{{ block.id }}" data-tab-content>
          <div class="tab-description rte">
            {{ block.settings.tab_description }}
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>
<script>
  const tabs = document.querySelectorAll('[data-tab-target]');
  const tabContents = document.querySelectorAll('[data-tab-content]');
  
  tabs.forEach((tab, index) => {
    // Set default active state for the first tab
    if (index === 0) {
      tab.classList.add('active');
      tabContents[index].classList.add('active');
    }

    tab.addEventListener('click', () => {
      const target = document.querySelector(tab.dataset.tabTarget);

      // Remove active class from all tabs and contents
      tabContents.forEach(tabContent => {
        tabContent.classList.remove('active');
      });

      tabs.forEach(tab => {
        tab.classList.remove('active');
      });

      // Add active class to the clicked tab and its content
      tab.classList.add('active');
      target.classList.add('active');
    });
  });
</script>

{% schema %}
  {
  "name": "Product Tabs",
  "settings": [
    {
  "type": "checkbox",
  "id": "show_product_descp",
  "label": "Show Product Description",
  "default": true
}
  ],
  "blocks": [
    {
      "name": "Tab",
      "type": "tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_name",
          "label": "Tab Name"
        },
        {
          "type": "richtext",
          "id": "tab_description",
          "label": "Tab Description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product Tabs"
    }
  ]
}  
{% endschema %}

3. Save the file.

4. Go to the customizer, select the default product, and add a new section. The name of the new section will be Product Tabs.

[KralZaboMuzu]

I just wanted to take a moment to say thank you—the code is working perfectly! I really appreciate your help.

I have one small request: Would it be possible to make it so that when a user clicks on an option from the selection, it remains visibly highlighted? I’d like users to clearly see what they selected, similar to the example in the picture I sent.

Please let me know if this is doable. Thanks again for your time and support!

[devmont-digital]

Yes, I have updated the code. So Please replace the entire code of the section you created with the new code.

New Code:

<style>
    [data-tab-content] {
      display: none;
      transition: all .5s ease-in-out;
  }
  .productTabs {
      margin-top: 90px;
  }
  .productTabs .active[data-tab-content] {
      display: block;
      transition: all .5s ease-in-out;
  }
  .productTabs .tabs {
      display: flex;
      justify-content: center;
      list-style-type: none;
      flex-wrap: wrap;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #c9c9c9;
      gap: 100px;
  }
  .productTabs .tab {
      cursor: pointer;
      padding: 15px;
      font-family: "Nexa-Bold" !important;
      transition: all .5s ease-in-out;
  }
  .productTabs .tab.active {
    background-image: url(https://cdn.shopify.com/s/files/1/0661/1927/0613/files/orange-acrylic-paint-stroke-stamp-grunge-brush-free-png.webp?v=1741936912);
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
}
.productTabs .tab:hover {
   transition: all .5s ease-in-out;
}
.productTabs .tab-content {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
}
.product__description.rte.quick-add-hidden h1,
.product__description.rte.quick-add-hidden h2,
.product__description.rte.quick-add-hidden h3,
.product__description.rte.quick-add-hidden h4,
.product__description.rte.quick-add-hidden h5{
    font-size:16px !important;
    color: #000;
}
.product__description.rte.quick-add-hidden p,
.product__description.rte.quick-add-hidden ul li{
    color: #909090;
}
.product__description.rte.quick-add-hidden ul{
    list-style: disc;
}
@media(max-width:1440px){
    .productTabs .tabs {
      justify-content: space-around;
      gap: unset;
  }
}
@media(max-width:481px){
 .productTabs .tabs {
   flex-direction: column;
}
.productTabs .tab {
    border-bottom: 1px solid #c9c9c9;
}
.productTabs .tabs {
    border-bottom: unset;
}
.productTabs .tab:hover {
    background-color: #f97601;
    color: #fff;
}
.productTabs .tab.active {
 background-color: #f97601;
 color: #fff;
}
.productTabs {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #c9c9c9;
}
}
</style>
<div class="productTabs page-width">
  <ul class="tabs">
    {% if section.settings.show_product_descp %}
    <li data-tab-target="#productDescription" class="active tab">Product Description</li>
    {% endif %}
    {%- for block in section.blocks -%}
    {%- if block.type == 'tab' -%}
    <li data-tab-target="#tab-{{ block.id }}" class="tab">{{ block.settings.tab_name }}</li>
    {%- endif -%}
    {%- endfor -%}
</ul>

<div class="tab-content">
    <!-- Hardcoded Product Description Tab -->
    {% if section.settings.show_product_descp %}
    <div id="productDescription" data-tab-content class="active">
        <div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
          {{ product.description }}
      </div>
  </div>
  {% endif %}

  <!-- Dynamic Tabs Generated from Schema -->
  {%- for block in section.blocks -%}
  {%- if block.type == 'tab' -%}
  <div id="tab-{{ block.id }}" data-tab-content>
      <div class="tab-description rte">
        {{ block.settings.tab_description }}
    </div>
</div>
{%- endif -%}
{%- endfor -%}
</div>
</div>
<script>
  const tabs = document.querySelectorAll('[data-tab-target]');
  const tabContents = document.querySelectorAll('[data-tab-content]');

  tabs.forEach((tab, index) => {
    // Set default active state for the first tab
    if (index === 0) {
      tab.classList.add('active');
      tabContents[index].classList.add('active');
  }

  tab.addEventListener('click', () => {
      const target = document.querySelector(tab.dataset.tabTarget);

      // Remove active class from all tabs and contents
      tabContents.forEach(tabContent => {
        tabContent.classList.remove('active');
    });

      tabs.forEach(tab => {
        tab.classList.remove('active');
    });

      // Add active class to the clicked tab and its content
      tab.classList.add('active');
      target.classList.add('active');
  });
});
</script>

{% schema %}
{
  "name": "Product Tabs",
  "settings": [
  {
      "type": "checkbox",
      "id": "show_product_descp",
      "label": "Show Product Description",
      "default": true
  }
  ],
  "blocks": [
  {
      "name": "Tab",
      "type": "tab",
      "settings": [
      {
          "type": "text",
          "id": "tab_name",
          "label": "Tab Name"
      },
      {
          "type": "richtext",
          "id": "tab_description",
          "label": "Tab Description"
      }
      ]
  }
  ],
  "presets": [
  {
      "name": "Product Tabs"
  }
  ]
}
{% endschema %}