Edit tab color in Product Page (Minimal Theme)

Highlighted
New Member
1 0 0

Hello, so I added tabs to organize the content in my product description with the theme editor tool but I want them to be different color when one is active. Anyone that could help? Here is the code I could find related to this section: 

 

<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>
</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>

-----------------------------------------

<style>

.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;
background-color: #F6F6F6;

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: #123883;


}
}

.tab-switch__content {
display: block;

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

</style>

0 Likes
Highlighted
Shopify Partner
594 71 98

Did you try changing this block?

&.is-active {
font-weight: $bodyFontWeightBold;
color: #123883;

}

update the color with the hex you want

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1

To hire: email us at shopify@propero.in
0 Likes