How to add simple content tabs to a standard page? (Dawn Theme)

[rheaaa]

Hello,

I’m trying to add a simple tab section to my “Try-On Guide” page, but my theme doesn’t have one.

My goal is to create something clean and minimalist, exactly like the layout in the image below. When a user clicks a tab (like “Women” or “Men”), the content for that tab appears below it.

This is for a standard page, not a product page.

I have zero coding knowledge, so I’m looking for the simplest solution. Is there a custom section code I can safely use, or a recommended app for this?

Thanks!

[Guleria]

Hello @rheaaa ,

There is an app named ‘sections’ available. Using it you can find a similar solution without doing code.
Of you can use a custom block in product page and use this html code there to add tabs W3Schools Tryit Editor

Regards
Guleria

[PaulNewton]

Try the sidekick tool in the shopify admin and ask it to generate such a section.
It is an LLM so it can be hit or miss especially based on your ability to clear communicate requirements.

There’s also looking around in free themes to see if any of those have the wanted section, backing up your theme then stumbling through trying to transplant the code into a different theme.
Which includes copying the section, any depending CSS or javascript, and making sure to update any setting schema’s if needed, etc etc etc

Though if you just need the customization built reach out to me(click profile pic for cards).
Here’s one I built for a shoe brand https://zeve.com.my/ (below the hero & collection grid see the New Arrival and Best Seller texts that control which slider displays)

[devcoders]

Hi @rheaaa

We can do this using custom code, either through metafields or by creating a custom section.
Please send me your store URL and collaborator code, so I can check everything and give you a proper update, dear.

Best regards,
Devcoder

[oscprofessional]

Hi @rheaaa ,

Add a Simple Custom Section (Copy & Paste Code)

If you’re comfortable pasting code, you can create your own tab section.

1. From your Shopify admin, go to Online Store > Themes > Edit Code.
2. Under Sections, click Add a new section, name it tabs-section.liquid.
3. Paste this code:

<section class="tabs-section">
  <div class="tabs">
    <button class="tab active" data-tab="women">Women</button>
    <button class="tab" data-tab="men">Men</button>
  </div>

  <div class="tab-content active" id="women">
    <p>Content for Women section goes here.</p>
  </div>
  <div class="tab-content" id="men">
    <p>Content for Men section goes here.</p>
  </div>

  <style>
    .tabs { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.5rem; }
    .tab {
      background: none;
      border: none;
      font-size: 1rem;
      font-weight: 500;
      color: #1a1a1a;
      padding-bottom: 5px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .tab.active { border-color: #1a1a1a; }
    .tab-content { display: none; text-align: center; }
    .tab-content.active { display: block; }
  </style>

  <script>
    document.querySelectorAll('.tabs .tab').forEach(tab => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
        tab.classList.add('active');
        document.getElementById(tab.dataset.tab).classList.add('active');
      });
    });
  </script>
</section>

3. Save, then in the theme editor, add the section to your “Try-On Guide” page.

4. You can rename the buttons and content as you like (e.g., “Bras & Tops,” “Socks,” etc.).