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.