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.

  

    {% if section.settings.show_product_descp %}
    - Product Description

    {% endif %}
    {%- for block in section.blocks -%}
      {%- if block.type == 'tab' -%}
        - {{ block.settings.tab_name }}
      {%- endif -%}
    {%- endfor -%}
  

  
    
    {% if section.settings.show_product_descp %}
    

      

        {{ product.description }}
      

    

    {% endif %}

    
    {%- for block in section.blocks -%}
      {%- if block.type == 'tab' -%}
        
          

            {{ block.settings.tab_description }}
          

        

      {%- endif -%}
    {%- endfor -%}
  

{% 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:

  

    {% if section.settings.show_product_descp %}
    - Product Description

    {% endif %}
    {%- for block in section.blocks -%}
    {%- if block.type == 'tab' -%}
    - {{ block.settings.tab_name }}
    {%- endif -%}
    {%- endfor -%}

    
    {% if section.settings.show_product_descp %}
    

        

          {{ product.description }}
      

  

  {% endif %}

  
  {%- for block in section.blocks -%}
  {%- if block.type == 'tab' -%}
  
      

        {{ block.settings.tab_description }}
    

{%- endif -%}
{%- endfor -%}

{% 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 %}