Add css to product tabs on Narrative theme

Solved
INFRA
Shopify Expert
42 0 20

Hi there,

I would like my product tabs to look like they do on this page: https://www.ooninz.co.nz/collections/ooni-pizza-ovens/products/ooni-pro-multi-fuel-pizza-oven

(But inverted, so black background and white text/lines)

Screenshot 2021-07-01 at 09.29.18.png

 

It's currently looking like this (done on a non published theme

Screen Shot 2021-06-30 at 5.15.22 PM.png

https://bigsofti.myshopify.com/ 

 Is this possible? Would love some guidance!

Thanks so much

KetanKumar
Shopify Partner
20291 2103 7611

@INFRA 

sorry for that 

can you please try this 

https://happypoints.io/add-tabs-to-shopify-product-page-without-app-c2-stt-57/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
INFRA
Shopify Expert
42 0 20

HI @KetanKumar  Thanks for your help but these tabs are not exactly what I need. I am currently using <h6> tags in my description to create custom tabs for each product  

KetanKumar
Shopify Partner
20291 2103 7611

@INFRA 

ok but sorry i can't see any tab on product please share product url

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 Partner | 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
INFRA
Shopify Expert
42 0 20

 @KetanKumar  this is done on a non live theme

I have used this code in the product template instead of the description:

  {% capture more-tabs %}
{{product.description }}
    <h6>REVIEWS</h6>
    <div id="shopify-product-reviews" 
    data-id="{{product.id}}"
    >
    {{ product.metafields.spr.reviews }}
</div>
{% endcapture %}
{% include 'tabbed-description' with more-tabs %}
          </div>

 

And this is the Tabbed description Snippet:

 

{% comment %}
  if combine_pretext is false, the text before the first <h6> will be shown above all tabs, otherwise added to the first tab
  if stop_on_h5 is true, tabs parsing will stop on first H5 element and the rest will be shown below tabs.
  What's inside H5 is discarded, but still put something meneningfull there, just in case you switch theme or alike.
  No multiple H5 elements.
{% endcomment %}
{% assign combine_pretext = false %}
{% assign stop_on_h5  = true %}

{% assign description = tabbed-description | default: product.description %}
{% if description contains "<h6>" %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "<h5>" %}
        {% assign posttext = description | split: "</h5>" | last %}
        {% assign description = description | split: "<h5>" | first %}
      {% endif %}


      {% assign chunks = description | strip | split: "<h6>" %}
      {% for c in chunks %}
          {% if c contains "</h6>" %}
              {% assign chunk = c | split: "</h6>" %}
              {% assign tab_heads = tab_heads | append: ",," | append: chunk.first %}
              {% assign tab_texts = tab_texts | append: ",," %}
              {% if pretext != blank  and combine_pretext %}
                  {% assign tab_texts = tab_texts | append: pretext | append: "<br>" %}
                  {% assign pretext = '' %}
              {% endif %}
              {% assign tab_texts = tab_texts | append: chunk.last  %}
          {% elsif forloop.first %}
              {% assign pretext =  c %}
          {% endif %}
      {% endfor %}

      {% assign tab_heads = tab_heads | remove_first: ",," | split: ",," %}
      {% assign tab_texts = tab_texts | remove_first: ",," | split: ",," %}

      {% assign index =  1  %}
      {% if pretext != blank and combine_pretext == false %}
        <div class=pretext>{{ pretext }}</div>
      {% endif %}

      <div>
        <ul class="tabs">
          {% for head in tab_heads %}
              <li><a href="#tab-{{- index -}}">{{ head }}</a></li>
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        </ul>
        {% assign index =  1  %}
        {% for text in tab_texts %}
          <div id="tab-{{- index -}}">{{ text }}</div>
          {% assign index =  index | plus: 1  %}
        {% endfor %}
      </div>
      {% if posttext != blank %}
          <div class=posttext>{{ posttext }}</div>
      {% endif %}


  <script>
    document.addEventListener( 'DOMContentLoaded', function () {
      function findTabContent( link ){
        if( link && link.nodeName == "A" ){
          var contentID = link.attributes.href.value.replace('#','');
          return document.getElementById( contentID );
        }
        else
          return null;
      }
      function hide( element ){
        if( element )
          element.style.display="none";
      }   
      function show( element ){
        if( element )
          element.style.display="";
      }
      function setActive( element ){
        if( element ){
          element.classList.add('active');
          var c = findTabContent( element );
          show(c);
        }
      }
      var tabHeads = document.querySelectorAll('.tabs');
      tabHeads.forEach( function( tablist ){
        var links = document.querySelectorAll('.tabs a'),
             tabs = document.querySelectorAll('.tabs li');
        if(  links.length == 0 )
          return;
        var active = links[0], 
            content = findTabContent( active ),
            totalWidth = 0, currentMode;
        setActive( active );
        links.forEach( function( el, index ){
          if( index > 0 )
            hide( findTabContent( el ) );
        });
        /* event listener for clicking tabs */
        tablist.addEventListener( 'click', function(e){
          var clicked = e.target;
          if( clicked.nodeName !== "A" )
            return;
          e.preventDefault();
          active.classList.remove('active');
          hide( content );
          active = clicked;
          content = findTabContent( clicked );
          setActive( clicked );
          return false;
        });
        function onResize( e ){
          if( e.type == 'load' ){
            /* how wide are all our tab headers together?  calculate this once, on load */
            tabs.forEach( function( el, i ) {
              totalWidth += el.offsetWidth ;
            });
          }
          /* will they fit on one line?  check on every resize/rotate */
          if( tablist.clientWidth > totalWidth ){
            if( currentMode !== 'wide' ) {
              tablist.classList.remove('vertical');
              currentMode = 'wide';
            }
          } else{
            if( currentMode !== 'narrow' ) {
              tablist.classList.add('vertical');
              currentMode = 'narrow';
            }
          } 
        }
        window.addEventListener( 'resize', onResize );
        window.addEventListener(   'load', onResize  );
      });
    });
  </script>

  <style>
   ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}

  </style>

{% else %}
    {{ description }}
{% endif %}

 

 

hope that makes sense

 

KetanKumar
Shopify Partner
20291 2103 7611

@INFRA i know that but can you please share particular product url if you have added tab?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
INFRA
Shopify Expert
42 0 20

it's on this product:

https://bigsofti.com/products/bigsofti-lighting-module

 

(on the non live theme)

KetanKumar
Shopify Partner
20291 2103 7611

@INFRA 

sorry i can't see this product tab can you please share particular theme if you have add tab code?

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 Partner | 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
dmwwebartisan
Shopify Partner
7278 1717 2286

This is an accepted solution.

@INFRA 

Please replace following code Snippets/tabbed-description.liquid file.

 

{% comment %}
  if combine_pretext is false, the text before the first <h6> will be shown above all tabs, otherwise added to the first tab
  if stop_on_h5 is true, tabs parsing will stop on first H5 element and the rest will be shown below tabs.
  What's inside H5 is discarded, but still put something meneningfull there, just in case you switch theme or alike.
  No multiple H5 elements.
{% endcomment %}
{% assign combine_pretext = false %}
{% assign stop_on_h5  = true %}

{% assign description = tabbed-description | default: product.description %}
{% if description contains "<h6>" %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "<h5>" %}
        {% assign posttext = description | split: "</h5>" | last %}
        {% assign description = description | split: "<h5>" | first %}
      {% endif %}


      {% assign chunks = description | strip | split: "<h6>" %}
      {% for c in chunks %}
          {% if c contains "</h6>" %}
              {% assign chunk = c | split: "</h6>" %}
              {% assign tab_heads = tab_heads | append: ",," | append: chunk.first %}
              {% assign tab_texts = tab_texts | append: ",," %}
              {% if pretext != blank  and combine_pretext %}
                  {% assign tab_texts = tab_texts | append: pretext | append: "<br>" %}
                  {% assign pretext = '' %}
              {% endif %}
              {% assign tab_texts = tab_texts | append: chunk.last  %}
          {% elsif forloop.first %}
              {% assign pretext =  c %}
          {% endif %}
      {% endfor %}

      {% assign tab_heads = tab_heads | remove_first: ",," | split: ",," %}
      {% assign tab_texts = tab_texts | remove_first: ",," | split: ",," %}

      {% assign index =  1  %}
      {% if pretext != blank and combine_pretext == false %}
        <div class=pretext>{{ pretext }}</div>
      {% endif %}

      <div>
        <ul class="tabs">
          {% for head in tab_heads %}
              <li><a href="#tab-{{- index -}}">{{ head }}</a></li>
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        </ul>
        {% assign index =  1  %}
        {% for text in tab_texts %}
          <div id="tab-{{- index -}}">{{ text }}</div>
          {% assign index =  index | plus: 1  %}
        {% endfor %}
      </div>
      {% if posttext != blank %}
          <div class=posttext>{{ posttext }}</div>
      {% endif %}


  <script>
    document.addEventListener( 'DOMContentLoaded', function () {
      function findTabContent( link ){
        if( link && link.nodeName == "A" ){
          var contentID = link.attributes.href.value.replace('#','');
          return document.getElementById( contentID );
        }
        else
          return null;
      }
      function hide( element ){
        if( element )
          element.style.display="none";
      }   
      function show( element ){
        if( element )
          element.style.display="";
      }
      function setActive( element ){
        if( element ){
          element.classList.add('active');
          var c = findTabContent( element );
          show(c);
        }
      }
      var tabHeads = document.querySelectorAll('.tabs');
      tabHeads.forEach( function( tablist ){
        var links = document.querySelectorAll('.tabs a'),
             tabs = document.querySelectorAll('.tabs li');
        if(  links.length == 0 )
          return;
        var active = links[0], 
            content = findTabContent( active ),
            totalWidth = 0, currentMode;
        setActive( active );
        links.forEach( function( el, index ){
          if( index > 0 )
            hide( findTabContent( el ) );
        });
        /* event listener for clicking tabs */
        tablist.addEventListener( 'click', function(e){
          var clicked = e.target;
          if( clicked.nodeName !== "A" )
            return;
          e.preventDefault();
          active.classList.remove('active');
          hide( content );
          active = clicked;
          content = findTabContent( clicked );
          setActive( clicked );
          return false;
        });
        function onResize( e ){
          if( e.type == 'load' ){
            /* how wide are all our tab headers together?  calculate this once, on load */
            tabs.forEach( function( el, i ) {
              totalWidth += el.offsetWidth ;
            });
          }
          /* will they fit on one line?  check on every resize/rotate */
          if( tablist.clientWidth > totalWidth ){
            if( currentMode !== 'wide' ) {
              tablist.classList.remove('vertical');
              currentMode = 'wide';
            }
          } else{
            if( currentMode !== 'narrow' ) {
              tablist.classList.add('vertical');
              currentMode = 'narrow';
            }
          } 
        }
        window.addEventListener( 'resize', onResize );
        window.addEventListener(   'load', onResize  );
      });
    });
  </script>

  <style>
   ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #000;
  border-color: transparent !important;
  border-style: solid;
  border-width: unset;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #fff;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #000;
    border-left-width: 1px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #1583ca !important;
    height: 35px;
    margin: 0 0 0 -1px;
    padding-top: 4px;
    position: relative;
    top: -4px;
    border-bottom: 2px solid #1583ca !important;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}   
  </style>

{% else %}
    {{ description }}
{% endif %}

 

1. Go to Online Store->Theme->Edit code

2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

.template-product .page-width {
    zoom: 1;
    max-width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
INFRA
Shopify Expert
42 0 20

hi @dmwwebartisan  thank you so much, that worked perfectly!

I have just decreased the margin width of the text a bit, as well as the product page width itself

 

THANKS!

0 Likes