Add Tab Component Section in Shopify - Pure CSS

Add Tab Component Section in Shopify - Pure CSS

Compatibility: All themes, design might vary


Adding a well-designed tab section to your Shopify 2.0 store is essential for providing a seamless shopping experience without excessive scrolling or overcrowding the webpage. This handy feature organizes content into tidy, accessible sections, making it easier for customers to find what they need, especially on content-rich pages like product details or FAQs.

A flexible tab section has been crafted that integrates smoothly into any page of a Shopify website, be it a product page, an 'about us' section, or bespoke content pages. This seamless integration keeps the website looking neat and professional, while also improving how visitors interact with the site's content.

At the core of this Shopify tab section lies its customizability. Store owners can adjust it to meet their specific requirements without the need for external apps or recurring subscriptions, which can add extra costs and complexity. Available in two distinct styles, the tab section can match various aesthetic preferences, enhancing the website’s look and feel whether the goal is simplicity or something more visually engaging.

Implementing this tailored tab component can significantly enhance the shopping experience on a Shopify site, making it more user-friendly and appealing to customers who appreciate clarity and convenience.

What is a Tab Component Section?

A tab component section is a user interface element that allows you to divide content into multiple sections, each accessible through a clickable tab. This keeps information organized and prevents pages from becoming overly long and cluttered. Users can click on different tabs to reveal the corresponding content.

Why Use a Tab Component Section?

  • Improved User Experience: Tabs make it easier for users to find the specific information they're looking for without scrolling through a long page.
  • Enhanced Content Organization: Tabs provide a clean and structured way to present different types of content, preventing information overload.
  • Increased Engagement: Users are more likely to explore all the information if it's presented in a concise and digestible format.
  • Better Mobile Experience: Tabs are especially beneficial on mobile devices, where screen space is limited.
  • Professional Look: Tab components give your website a more polished and professional appearance.

Additional Considerations:

Beyond the basic implementation, these points will help you create a more robust and user-friendly tab section:

  • Tab Content Structure: Carefully plan the content for each tab. Group related information together for a logical flow. Avoid overwhelming users with too much information in a single tab.
  • Default Active Tab: Set a default active tab that is most relevant to the majority of users. This is often the "Description" tab on product pages.
  • Tab Styling: Style the tabs to match your store's branding. Use clear visual cues to indicate the active tab. Ensure the tabs are easily clickable, especially on mobile devices.
  • Mobile Optimization: Tabs are crucial for mobile. Consider how they will adapt to smaller screens. You might need to use a different layout for mobile, such as an accordion or a dropdown menu.
  • Accessibility: Make sure your tabs are accessible to users with disabilities. Use ARIA attributes to provide semantic information to screen readers. Ensure keyboard navigation is supported.
  • Lazy Loading: If you have a lot of content within the tabs, implement lazy loading. This means the content of inactive tabs is only loaded when the user clicks on them, improving initial page load speed.
  • Animation/Transitions: Consider adding smooth animations or transitions when switching between tabs to enhance the user experience. However, keep animations subtle and avoid anything that could be distracting.

What you are buying:

  • Add a colorful, customizable tabs in your Shopify store
  • Add an image and text inside the tab content
  • Place anywhere in your Shopify store
  • Add a page as your tab content
  • No javascript being use

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

[] 

Steps on how to add Tab Component Section

Step #1. Open your code editor

From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code.

Step #2. Create a new section file

In Section folder, create a new section, and name it "tab-component", then paste the code below. Click SAVE.

<style>
    .tabComponent {
      --tab-bg: {{section.settings.tab_bg}};
      --tab-active: {{section.settings.tab_active}};
      --tab-hover: {{section.settings.tab_hover}};
      --border-color: {{section.settings.border_color}};
      --border-radius: {{ section.settings.border_radius | append: 'px' }};
      --section-width: {{ section.settings.section_width | append: 'px' }}
    }

    .tabComponent {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      position: relative;
      max-width: var(--section-width);
      margin: auto;
    }

    .tabContainer {
      display: flex;
      flex-wrap: wrap;
    }

    .inputTab {
      position: absolute;
      opacity: 0;
      background: var(--tab-bg);
    }

    .labelTab {
      width: calc(100% / {{ section.blocks.size }});
      height: auto;
      margin: 0 auto;
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-weight: bold;
      transition: all .3s;
      text-align: center;
      overflow: hidden;
      background: var(--label-background);
    }

    .labelTab img {
      width: 100%;
      min-width: 30px;
      max-width: 50px;
      height: auto;
      display: inline-block;
      object-fit: cover;
      object-position: center;
    }

    .infoTab {
      display: none;
      width: 100%;
      padding: 4%;
      order: 999;
      background: var(--tab-bg);
    }

    .infoTab--content {
      display: flex;
      gap: 4rem;
    }

    .infoTab--content.content--column {
      flex-direction: column;
    }

    .infoTab--content.content--column-reverse {
      flex-direction: column-reverse;
    }

    .infoTab--content.content--row-reverse {
      flex-direction: row-reverse;
    }

    .infoTab--content.content--row > *,
    .infoTab--content.content--row-reverse > *{
       width: var(--content-size);
    }

    .infoTab--content img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .inputTab:checked+.labelTab+.infoTab {
      display: block;
    }

    .bordered .labelTab {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      padding: 1%;
    }

    .bordered .labelTab:hover {
      background: var(--tab-hover);
    }

    .bordered .inputTab:checked+.labelTab {
      background: var(--tab-bg);
      border-top: solid 2px var(--border-color);
      border-left: solid 2px var(--border-color);
      border-right: solid 2px var(--border-color);
      border-bottom: none;
    }

    .bordered .infoTab {
      background: var(--tab-bg);
      border-bottom: solid 2px var(--border-color);
      border-left: solid 2px var(--border-color);
      border-right: solid 2px var(--border-color);
    }

    .no-border .labelTab {
      border-bottom: solid 4px transparent;
    }

    .no-border .labelTab:active {
      border-bottom: solid 4px var(--border-color);
      background: var(--tab-active);
    }

    .no-border .labelTab:hover {
      background: var(--tab-hover);
    }

    .no-border .inputTab:checked+.labelTab {
      border-bottom: solid 4px var(--border-color);
      background: var(--tab-active);
    }

    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }

      .tabContainer {
        margin: auto;
      }

      .bordered .labelTab {
        border-bottom: solid 2px var(--border-color);
      }
    }

    @media (max-width: 749px) {
      .tabContainer {
        flex-direction: column;
      }

      .labelTab {
        width: 100%;
        padding: 0.5rem;
      }

      .inputTab:checked+.labelTab+.infoTab {
        border: solid 2px var(--border-color);
      }

      .bordered .inputTab:checked+.labelTab {
        background: var(--tab-bg);
        color: var(--border-color);
        border: solid 2px var(--border-color);
      }

      .infoTab--content,
      .infoTab--content.content--row-reverse,
      .infoTab--content.content--row {
        gap: 2rem;
        flex-direction: column;
      --content-size: 100% !important;
    }
  }
</style>
<div class="tabComponent {{section.settings.tab_design}} section-{{ section.id }}-padding">
  {% if section.settings.section_title != blank %}
    <h2 class="infoTitle h2">{{ section.settings.section_title }}</h2>
  {% endif %}
  <div class="tabContainer">
    {% for block in section.blocks %}
      <input
        class="inputTab"
        name="tabComponent"
        type="radio"
        id="tab--{{ forloop.index }}"
        {% if forloop.first %}
          checked="checked"
        {% endif %}
      >
      <label class="labelTab" for="tab--{{ forloop.index }}" style="--label-background: {{block.settings.label_bg}};">
        {% assign image_icon = block.settings.img_icon %}
        {% if image_icon != blank %}
          {{
            image_icon
            | image_url: width: 200
            | image_tag: width: 100, height: 100, alt: image_icon.alt, loading: 'lazy'
          }}
        {% endif %}
        <span>{{ block.settings.title }}</span>
      </label>
      <div class="infoTab">
        {% if block.settings.info_title != blank %}
          <h1 class="infoTitle" style="text-align: {{ block.settings.title_alignment }}">
            {{ block.settings.info_title }}
          </h1>
        {% endif %}
        {% assign content_image = block.settings.content_image %}
        <div
          class="infoTab--content content--{{ block.settings.image_position }}"
          {% if content_image != blank %}
            style="--content-size: 50%"
          {% endif %}
        >
          {% if content_image != blank %}
            <div class="infoImage">
              {{
                content_image
                | image_url: width: 2000
                | image_tag:
                  width: content_image.width,
                  height: content_image.height,
                  alt: content_image.alt,
                  loading: 'lazy'
              }}
            </div>
          {% endif %}
          {% if block.settings.info_title != blank %}
            <div class="infoDescription" style="text-align: {{ block.settings.content_alignment }};">
              {{ block.settings.info_description }}
            </div>
          {% endif %}
        </div>
        <div>{{ block.settings.page.content }}</div>
      </div>
    {% endfor %}
  </div>
</div>
{% schema %}
{
  "name": "Tab Component",
  "settings": [
    {
      "type": "range",
      "id": "section_width",
      "min": 950,
      "max": 1800,
      "step": 50,
      "unit": "px",
      "label": "Section max-width",
      "default": 1200
    },
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title"
    },
    {
      "type": "select",
      "id": "tab_design",
      "default": "bordered",
      "label": "Tab component design",
      "options": [
        {
          "value": "bordered",
          "label": "bordered"
        },
        {
          "value": "no-border",
          "label": "no-border"
        }
      ]
    },
    {
      "type": "color",
      "id": "tab_bg",
      "label": "Section Background",
      "default": "#e5e5e5"
    },
    {
      "type": "color",
      "id": "tab_hover",
      "label": "Tab Hover Color",
      "default": "#d8d8d8"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border Color",
      "default": "transparent"
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Border radius",
      "default": 5
    },
    {
      "type": "color",
      "id": "tab_active",
      "label": "Tab Active(no-border only)",
      "default": "#ccc"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Section padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Section padding bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "color",
          "id": "label_bg",
          "label": "Label background color",
          "default": "#fff"
        },
        {
          "type": "image_picker",
          "id": "img_icon",
          "label": "Image Icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Tab Title"
        },
        {
          "type": "text",
          "id": "info_title",
          "label": "Content Title"
        },
        {
          "type": "select",
          "id": "title_alignment",
          "label": "Title alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
        {
          "type": "image_picker",
          "id": "content_image",
          "label": "Content image"
        },
        {
          "type": "richtext",
          "id": "info_description",
          "label": "Content description",
          "default": "<p>Write more info here!</p>"
        },
        {
          "type": "select",
          "id": "content_alignment",
          "label": "Content alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        },
         {
          "type": "select",
          "id": "image_position",
          "label": "Image Position",
          "info": "Left and right only applies on desktop",
          "options": [
            {
              "value": "row",
              "label": "Left"
            },
            {
              "value": "row-reverse",
              "label": "Right"
            },
            {
              "value": "column",
              "label": "Top"
            },
            {
              "value": "column-reverse",
              "label": "Bottom"
            }
          ],
          "default": "row"
        },
        {
          "type": "page",
          "id": "page",
          "label": "Page to show"
        }
      ]
    }
  ],
  "max_blocks": 10,
  "presets": [
    {
      "name": "Tab Component"
    }
  ]
}
{% endschema %}

 

Step #3. Save the changes

Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

Step #4. Customize theme

Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Image side by side". Make sure to SAVE once you are done customizing.

Conclusion

Implementing a tab component section on your Shopify store is a valuable strategy for enhancing content organization and improving the user experience. By neatly categorizing information into easily accessible tabs, you prevent information overload and make it simpler for customers to find what they're looking for. Whether you choose a pre-built app or opt for a custom code implementation, prioritizing clear labeling, intuitive navigation, mobile responsiveness, and accessibility is crucial.  A well-designed tab section not only contributes to a more professional and polished website but also encourages users to explore your content more thoroughly, ultimately leading to a more engaging and potentially profitable online presence.

That's it (",)

0 comments

Leave a comment