Product tabs in Minimal theme

Highlighted
New Member
2 0 1

Hello, I need some help with adding tabs in my product page. I am using Minimal theme and I have followed all the steps but it is not working.

https://community.shopify.com/c/Shopify-Design/Product-pages-Add-tabs-to-product-descriptions/td-p/6...

Any ideas?

1 Like
Highlighted
Shopify Partner
7666 1055 2667

Hello, @Sn110 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
2 0 1
http://shaza-creations.myshopify.com/
Thank you for looking into it.
shazacreations.com
0 Likes
Highlighted
New Member
2 0 0

Hello, i added tabs in my product page, it's showing all 3 tabs contents togheter, it's not hidden.

<div class="tabs">
<ul class="tab-switch__nav">
<li>
<a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
</li>
<li>
<a href="#extra" data-link="extra" class="tab-switch__trigger h3" >{{ pages[section.settings.extra_tab_content].title }}</a>
</li>
<li>
<a href="#shopify-product-reviews" data-link="shopify-product-reviews" class="tab-switch__trigger h3" > Review </a>
</li>
</ul>
<div id="description" class="tab-switch__content" data-content="description">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
</div>
<div id="extra" class="tab-switch__content" data-content="extra">
<div class="rte">
{{ pages[section.settings.extra_tab_content].content }}
</div>
</div>
<div class="tab-switch__content">
<div id="shopify-product-reviews" data-id="{{product.id}}" data-content="shopify-product-reviews">{{ product.metafields.spr.reviews }}</div>
</div>

 

.tabs {
margin: $gutter 0;

}

.tab-switch__nav {
padding: 0;
list-style: none;
border-top: 1px solid $colorBorder;
border-bottom: 1px solid $colorBorder;
margin: $gutter 0;
text-align: center;
position: relative;

li {
display: inline-block;
padding: $gutter / 2;
margin-bottom: 0;

}

li:first-child {
border-right: 1px solid $colorBorder;
}

}

.tab-switch__trigger {
display: block;
color: $colorTextBody;
font-weight: $bodyFontWeight;
margin: 0;

&:hover,
&:active {
font-weight: $bodyFontWeight;
}

&.is-active {
font-weight: $bodyFontWeightBold;
color: $colorTextBody;
}
}

.tab-switch__content {
display: block;


&.is-hidden {
display: none;
}
}

 

0 Likes