Solved

Add css to product tabs on Narrative theme

INFRA
Shopify Expert
124 0 51

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 🙂

Accepted Solutions (3)

dmwwebartisan
Shopify Partner
12280 2546 3693

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

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 {
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
  border-bottom: 1px solid #DDDDDD;
}
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 5px;
  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 .text-center {text-align: left !important;}
.template-product .afterpay-paragraph{text-align: left !important;}

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@INFRA 

Please add this at the bottom of your assets/theme.scss.liquid file.

.spr-badge {
    text-align: center !important;
}

Hope this works.

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 19 (19)

KetanKumar
Shopify Partner
36839 3635 11972

@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
124 0 51

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
36839 3635 11972

@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
INFRA
Shopify Expert
124 0 51

 @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
36839 3635 11972

@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
124 0 51

it's on this product:

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

 

(on the non live theme)

KetanKumar
Shopify Partner
36839 3635 11972

@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

dmwwebartisan
Shopify Partner
12280 2546 3693

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Expert
124 0 51

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!

INFRA
Shopify Expert
124 0 51

@dmwwebartisan  actually would it be possible to get rid of the white line next to reviews? See below 🙂

 

Screenshot 2021-07-02 at 11.48.52.png

 

And how do I get those stars below the title to appear in the centre? They are coming up on the left 🙂

Screenshot 2021-07-02 at 11.54.33.png

Screenshot 2021-07-02 at 11.55.52.png

Thanks so much!

dmwwebartisan
Shopify Partner
12280 2546 3693

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 {
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
  border-bottom: 1px solid #DDDDDD;
}
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 5px;
  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 .text-center {text-align: left !important;}
.template-product .afterpay-paragraph{text-align: left !important;}

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Expert
124 0 51

hi @dmwwebartisan thanks so much! The line is now gone however, the stars are still on the left side. Any idea how to fix this? 

thank you!

dmwwebartisan
Shopify Partner
12280 2546 3693

@INFRA 

Please share screenshot what do you want .

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Expert
124 0 51

it currently looks like this, stars on the left

Screenshot 2021-07-05 at 12.32.08.png

 

but should look like this, with the stars centred

Screenshot 2021-07-05 at 12.32.31.png

 

Thank you!

INFRA
Shopify Expert
124 0 51

@dmwwebartisan  Sorry forgot to tag you in my last reply! Would you be able to have a look at my previous post? Thanks so much!

dmwwebartisan
Shopify Partner
12280 2546 3693

@INFRA 

I will look into it and get back to you soon.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Expert
124 0 51

@dmwwebartisan hi! any luck on this?  thank u!

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@INFRA 

Please add this at the bottom of your assets/theme.scss.liquid file.

.spr-badge {
    text-align: center !important;
}

Hope this works.

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
INFRA
Shopify Expert
124 0 51

@dmwwebartisan thanks so much, worked perfectly!