I am Looking to add Tabs for information NOT UNDER PRODUCT.

[nexxius]

Hi there, I am using the Dawn theme and am looking to add a section, similar to Multicolumn, but have them in tabs where I can have text and an image and even a button.  This has nothing to do with a product listing.  These would be used on an informational page only, NOT under a product or it's description in any way, an entirely separate page.   Thank you so much in advance! 

[CodingFifty · Accepted solution]

Hi @nexxius,

Go to Shopify Admin → Online Store → Themes → Edit Code.
Under "Sections", click "Add a new section".
Name it: tabbed-multicolumn (without .liquid).
Paste the code below and Save.
Go to Theme Editor and add the section to your desired page.

{% schema %}
{
  "name": "Tabbed Multicolumn",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Our Features"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title",
          "default": "Tab 1"
        },
        {
          "type": "image_picker",
          "id": "tab_image",
          "label": "Tab Image"
        },
        {
          "type": "richtext",
          "id": "tab_text",
          "label": "Tab Text",
          "default": "<p>This is a description.</p>"
        },
        {
          "type": "url",
          "id": "tab_button_link",
          "label": "Button Link"
        },
        {
          "type": "text",
          "id": "tab_button_text",
          "label": "Button Text",
          "default": "Learn More"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tabbed Multicolumn",
      "category": "Custom",
      "blocks": [
        { "type": "tab" },
        { "type": "tab" },
        { "type": "tab" }
      ]
    }
  ]
}
{% endschema %}

<style>
  .tab-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .tab-buttons button {
    padding: 10px 15px;
    background: #ddd;
    border: none;
    cursor: pointer;
  }
  .tab-buttons button.active {
    background: #333;
    color: white;
  }
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
</style>

<div class="tabbed-section">
  <h2>{{ section.settings.section_title }}</h2>
  <div class="tab-buttons">
    {% for block in section.blocks %}
      <button class="tab-link" data-tab="tab-{{ forloop.index }}">{{ block.settings.tab_title }}</button>
    {% endfor %}
  </div>
  <div class="tab-contents">
    {% for block in section.blocks %}
      <div class="tab-content" id="tab-{{ forloop.index }}">
        {% if block.settings.tab_image %}
          <img src="{{ block.settings.tab_image | img_url: 'medium' }}" alt="">
        {% endif %}
        <div>{{ block.settings.tab_text }}</div>
        {% if block.settings.tab_button_link %}
          <a href="{{ block.settings.tab_button_link }}" class="button">{{ block.settings.tab_button_text }}</a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    let tabs = document.querySelectorAll(".tab-link");
    let contents = document.querySelectorAll(".tab-content");
    
    tabs.forEach((tab, index) => {
      tab.addEventListener("click", function() {
        tabs.forEach(t => t.classList.remove("active"));
        contents.forEach(c => c.classList.remove("active"));
        tab.classList.add("active");
        contents[index].classList.add("active");
      });
    });
    
    tabs[0].classList.add("active");
    contents[0].classList.add("active");
  });
</script>

[nexxius]

THank you so much!