Tab Component Section - Pure CSS

{% if youLike === true %} Hit Subscribe {% endif %}

To veiw the code!
Don't have an account?

Tab component is important in relaying information without compromising the space, or scrolling back and forth.

I created a tab component as a section which means, you can add it to any pages in Shopify 2.0, like product page.

You can customize the tab component to your need. No need for an app or subscription. The tab component has two designs.

1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, and name it "tab-component", then paste the code below. Click SAVE.

  <div class="tabComponent {{section.settings.tab_design}}">
{% if section.settings.section_title != blank %}
<h1 class="infoTitle">{{section.settings.section_title}}</h1>
{% 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="background: {{block.settings.label_bg}};">
{% if block.settings.img_icon != blank %}
<img src="{{block.settings.img_icon | img_url: '50x50'}}"
alt="{{block.settings.img_icon.alt}}">
{% endif %}
<h4> {{block.settings.tab_title}}</h4>
</label>
<div class="infoTab">
{% if block.settings.info_title != blank %}
<h1 class="infoTitle">{{block.settings.info_title}}</h1>
{% endif %}
{% if block.settings.info_title != blank %}
<div class="infoDescription">{{block.settings.info_description}}</div>
{% endif %}
<div >{{block.settings.page.content}}</div>
</div>
{% endfor %}
</div>
</div>
<style>
:root {
--tab-bg: {{section.settings.tab_bg}};
--tab-active: {{section.settings.tab_active}};
--tab-hover: {{section.settings.tab_hover}};
--border-color: {{section.settings.border_color}};
}

.tabComponent {
display: flex;
flex-direction: column;
margin: 5%;
box-sizing: border-box;
position: relative;
}

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

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

.labelTab {
width: calc(100% / {{ section.blocks.size}} ) ;
height: clamp(30px, 4vw, 100px);
margin: auto;
padding: .5%;
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 .3s;
text-align: center;
white-space: nowrap;
overflow: hidden;
}

.labelTab img {
width: clamp(20px, 2.5vw, 50px);
aspect-ratio: 1;
}
.labelTab h4 {
font-size: clamp(14px, 1.5vw, 25px);
margin: auto;
display: inline-block;
vertical-align: top;
}

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

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

.infoTitle {
font-size: clamp(16px, 2vw, 24px);
}

.infoDescription > *{
font-size: clamp(13px, 1.7vw, 20px);
}

/*==== tab design ====*/
.bordered .labelTab {
border-radius: 10px 10px 0 0;
padding: 1%;
}

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

.bordered .inputTab:checked + .labelTab {
background: var(--tab-bg) !important;
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 2px #e6e6e6;
}

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

@media (min-width: 600px) {
.bordered .labelTab {
border-radius: 10px 10px 0 0;
border-bottom: solid 2px var(--border-color);
}
}

@media (max-width: 600px) {
.labelTab {
display: inline-block;
margin: auto;
width: max-content;
}
.bordered .labelTab {
border-radius: 5px;
}
.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);
}
}

</style>
{% schema %}
{
"name": "Tab Component",
"settings": [
{
"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",
"default": "#d8d8d8"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "transparent"
},
{
"type": "color",
"id": "tab_active",
"label": "Tab Active(no-border only)",
"default": "#ccc"
}
],
"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": "tab_title",
"label": "Tab Title"
},
{
"type": "text",
"id": "info_title",
"label": "Info Title"
},
{
"type": "richtext",
"id": "info_description",
"label": "Tab Title",
"default": "<p>Write more info here!</p>"
},
{
"type": "page",
"id": "page",
"label": "Page to show"
}
]
}
],
"max_blocks": 10,
"presets": [
{
"name": "Tab Component"
}
]
}
{% endschema %}

Leave us a comment