Customized Tab Section / Dropdown on Mobile

Customized Tab Section / Dropdown on Mobile

Compatibility: Dawn and other Shopify 2.0 FREE themes.

To add images and text, utilize the page and call the page in the section. Page will be rendered as what you design it.

Please view the demo store here. Password: made4uo

What is a Customized Tab Section Dropdown on Mobile?

This functionality refers to a specific way to display additional content on product pages or other sections of your Shopify store, particularly when viewed on mobile devices. It likely involves:

  • Tab Section: A designated area on the page that displays a set of tabs.
  • Dropdown Functionality: When a user clicks on a tab on a mobile device, a dropdown menu appears, revealing additional content associated with that tab.

Why Use a Customized Tab Section Dropdown on Mobile?

There are several advantages to using this functionality on your Shopify store:

  • Improved Mobile User Experience: On mobile devices with limited screen space, a tab section dropdown helps manage content efficiently. It allows you to display essential information without overwhelming users on a smaller screen.
  • Increased Content Organization: By categorizing information under different tabs, you can organize product details, specifications, or other relevant content in a way that's easy for mobile users to navigate.
  • Enhanced Accessibility: The dropdown functionality ensures all the content remains accessible on mobile devices. Users can easily find the specific information they're looking for by clicking on the relevant tab.

Additional Considerations:

  • Mobile Optimization: The functionality should be designed specifically for mobile devices, ensuring smooth navigation and proper content display within the dropdown menu.
  • Content Management: The purchased solution or code modification might offer options to manage the content displayed within each tab section.
  • Usability Testing: Test the functionality thoroughly on various mobile devices to ensure a seamless user experience.

What you are buying:

  • Well designed Tab section
  • Mobile friendly
  • Add any page as content
  • No javascript code

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 Customized Tab Section / Dropdown on Mobile

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, name it whatever you want, then replace the default code with the code below.

<div
  class="tabComponent {{section.settings.tab_design}}"
  style="
    --tab-bg: {{section.settings.tab_bg}};
    --tab-hover: {{section.settings.tab_hover}};
    padding-top: {{ section.settings.padding_top | append: 'px' }};
    padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}
  "
>
  <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="background: {{block.settings.label_bg}};">
        <h2>{{ block.settings.tab_title }}</h2>
      </label>
      <div class="infoTab">
        <div class="infoTab-container">
          {% if block.settings.info_title != blank %}
            <h1 class="infoTitle">{{ block.settings.info_title }}</h1>
          {% endif %}
          {% if block.settings.info_description != blank %}
            <div class="infoDescription">{{ block.settings.info_description }}</div>
          {% endif %}
          <div class="pageContainer">{{ block.settings.page.content }}</div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="collapsible-tab">
    {%- for block in section.blocks -%}
      <div class="accordion-collapsible-tab" {{ block.shopify_attributes }}>
        <details
          class="details-collapsible-tab"
          {% if section.settings.open_first_collapsible_row and forloop.first %}
            open
          {% endif %}
        >
          <summary class="summary-collapsible-tab">
            <h2 class="accordion-collapsible-tab__title h2">
              {{ block.settings.tab_title | default: block.settings.page.title }}
            </h2>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-caret"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#000000"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </summary>
          <div
            class="accordion-collapsible-tab__content rte"
            role="region"
            aria-labelledby="summary-collapsible-tab-{{ block.id }}-{{ section.id }}"
          >
            {% if block.settings.info_title != blank %}
              <h3>{{ block.settings.info_title }}</h3>
            {% endif %}
            {% if block.settings.info_description != blank %}
              {{ block.settings.info_description }}
            {% endif %}
            <div class="pageContainer">{{ block.settings.page.content }}</div>
          </div>
        </details>
      </div>
    {%- endfor -%}
  </div>
</div>
<style>
.tabComponent {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.tabContainer {
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
  width: 100%;
  margin: auto;
}
.inputTab {
  position: absolute;
  opacity: 0;
  background: var(--tab-bg);
}
.labelTab {
  margin: 0;
  padding-right: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
  line-height: 1.2;
  cursor: pointer;
  font-weight: bold;
  font-size: clamp(12px, 1.5vw, 24px);
  transition: all 0.3s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.labelTab img {
  width: clamp(20px, 2.5vw, 50px);
  aspect-ratio: 1;
}
.labelTab h2 {
  font-size: clamp(14px, 1.5vw, 25px);
  display: inline-block;
  vertical-align: top;
  margin: 0 0 2rem;
}
.infoTab {
  display: none;
  position: relative;
  width: 100%;
  padding: 5% 0;
  order: 999;
  background: var(--tab-bg);
}
.infoTab:before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  background: var(--tab-bg);
  top: 0;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}
.inputTab:checked + .labelTab + .infoTab {
  display: block;
}
.inputTab:checked + .labelTab > h2:after {
  transform: scaleX(1);
}
.labelTab > h2:after {
  display: block;
  content: "";
  width: 100%;
  margin-top: 5px;
  height: 2px;
  background: var(--tab-hover);
  transform: scaleX(0);
  transition: transform 300ms ease-in-out;
}
.labelTab > h2:hover:after {
  transform: scaleX(1);
}
.infoTitle {
  font-size: clamp(16px, 2vw, 24px);
}
.infoDescription > * {
  font-size: clamp(13px, 1.7vw, 20px);
}
.collapsible-tab {
  display: none;
}
.accordion-collapsible-tab .summary-collapsible-tab__title + .icon-caret {
  height: calc(var(--font-heading-scale) * 0.6rem);
}
.accordion-collapsible-tab + .accordion-collapsible-tab {
  margin-top: 0;
  border-top: none;
}
.accordion-collapsible-tab {
  margin-top: 2.5rem;
  margin-bottom: 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}
.accordion-collapsible-tab__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  margin: auto 0;
  word-break: break-word;
}
.accordion-collapsible-tab .icon-accordion {
  align-self: center;
  fill: rgb(var(--color-foreground));
  height: calc(var(--font-heading-scale) * 2rem);
  margin-right: calc(var(--font-heading-scale) * 1rem);
  width: calc(var(--font-heading-scale) * 2rem);
}
.accordion-collapsible-tab details[open] > summary .icon-caret {
  transform: rotate(90deg);
}
.accordion-collapsible-tab summary > .icon-caret {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
  position: absolute;
  height: 1.8rem;
  right: 1.5rem;
  top: calc(50% - 0.8rem);
}
.accordion-collapsible-tab__content {
  word-break: break-word;
  overflow-x: auto;
  padding: 0rem 1.6rem 2rem;
}
.accordion-collapsible-tab__content img {
  max-width: 100%;
}
.summary-collapsible-tab {
  height: 50px;
  display: flex;
  align-content: center;
}
:root {
  --accordion-min-height: 56px;
  --accordion-max-height: 300px;
}
.details-collapsible-tab {
  padding: 0 2rem;
  margin: 0 auto 0.5rem;
  border-radius: 4px;
  overflow: hidden;
  animation-name: accordion-close;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
  transform-origin: top;
}
.details-collapsible-tab[open] {
  animation-name: accordion-master;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  transform-origin: top;
}
@keyframes accordion-master {
  from {
    max-height: var(--accordion-min-height);
  }
  to {
    max-height: var(--accordion-max-height);
  }
}
@keyframes accordion-close {
  from {
    min-height: var(--accordion-max-height);
  }
  to {
    min-height: var(--accordion-min-height);
  }
}
.details-collapsible-tab summary::-webkit-details-marker {
  display: none;
}
.details-collapsible-tab > .accordion-collapsible-tab__content {
  padding-bottom: 1rem;
  margin-bottom: 0;
  opacity: 0;
  transition: 0.3s;
  height: 0;
  margin-top: 0;
  padding-top: 1rem;
  animation-name: accordion-content-close;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}
.details-collapsible-tab[open] > .accordion-collapsible-tab__content {
  opacity: 1;
  height: auto;
  animation-name: accordion;
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
  transform-origin: top;
}
@keyframes accordion {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes accordion-content-close {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -300px;
  }
}
@keyframes accordion-content {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pageContainer,
.pageContainer img,
.pageContainer > * {
  width: 100%;
}
@media (max-width: 1019px) {
  .collapsible-tab {
    display: block;
  }
  .tabComponent {
    margin: 0;
  }
  .tabContainer {
    display: none;
  }
  .infoTitle {
    padding: 0 1rem;
  }
  .pageContainer {
    padding: 1% 5%;
  }
}
</style>
{% schema %}
{
  "name": "Tab Component",
  "settings": [
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 36
    },
    {
      "type": "color",
      "id": "tab_bg",
      "label": "Section Background",
      "default": "#e5e5e5"
    },
    {
      "type": "color",
      "id": "tab_hover",
      "label": "Tab hover",
      "default": "#2eb8c0"
    },
    {
      "type": "checkbox",
      "id": "open_first_collapsible_row",
      "default": false,
      "label": "Open first collapsible tab",
      "info": "This only applies to mobile view"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "color",
          "id": "label_bg",
          "label": "Label background color",
          "default": "#fff"
        },
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title"
        },
        {
          "type": "text",
          "id": "info_title",
          "label": "Info Title"
        },
        {
          "type": "richtext",
          "id": "info_description",
          "label": "Description",
          "default": "<p>Write more info here!</p>"
        },
        {
          "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 "Tab Component". Make sure to SAVE once you are done customizing.

Conclusion

Level up your mobile experience! Implement sleek tab sections with user-friendly dropdowns for seamless content display on mobile devices.

Boost user engagement:

  • Streamlined Navigation: Keep your store informative without overwhelming mobile visitors.
  • Enhanced Organization: Categorize product details and info for easy browsing.
  • Accessibility Champion: Ensure all content remains accessible through user-controlled dropdowns.

Optimize your mobile store today!

0 comments

Leave a comment