Add css to product tabs on Narrative theme

INFRA · June 30, 2021, 11:36pm

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)

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

https://bigsofti.myshopify.com/

Is this possible? Would love some guidance!

Thanks so much

KetanKumar · July 1, 2021, 4:26am

@INFRA

sorry for that

can you please try this

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

INFRA · July 1, 2021, 4:46am

HI @KetanKumar Thanks for your help but these tabs are not exactly what I need. I am currently using

tags in my description to create custom tabs for each product

KetanKumar · July 1, 2021, 5:01am

@INFRA

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

INFRA · July 1, 2021, 5:23am

@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 }}

REVIEWS

{% endcapture %} {% include 'tabbed-description' with more-tabs %}

And this is the Tabbed description Snippet:

{% comment %}
  if combine_pretext is false, the text before the first ######  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 "###### " %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "##### " %}
        {% assign posttext = description | split: "" | last %}
        {% assign description = description | split: "##### " | first %}
      {% endif %}

      {% assign chunks = description | strip | split: "###### " %}
      {% for c in chunks %}
          {% if c contains "" %}
              {% assign chunk = c | split: "" %}
              {% 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: "
" %}
                  {% 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 %}
        
{{ pretext }}

      {% endif %}

      
        

          {% for head in tab_heads %}
              - {{ head }}
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        

        {% assign index =  1  %}
        {% for text in tab_texts %}
          {{ text }}

          {% assign index =  index | plus: 1  %}
        {% endfor %}
      

      {% if posttext != blank %}
          {{ posttext }}

      {% endif %}

  

  

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

hope that makes sense

KetanKumar · July 1, 2021, 5:52am

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

INFRA · July 1, 2021, 5:56am

it’s on this product:

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

(on the non live theme)

KetanKumar · July 1, 2021, 7:44am

@INFRA

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

dmwwebartisan · July 1, 2021, 2:55pm

@INFRA

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

{% comment %}
  if combine_pretext is false, the text before the first ######  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 "###### " %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "##### " %}
        {% assign posttext = description | split: "" | last %}
        {% assign description = description | split: "##### " | first %}
      {% endif %}

      {% assign chunks = description | strip | split: "###### " %}
      {% for c in chunks %}
          {% if c contains "" %}
              {% assign chunk = c | split: "" %}
              {% 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: "
" %}
                  {% 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 %}
        
{{ pretext }}

      {% endif %}

      
        

          {% for head in tab_heads %}
              - {{ head }}
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        

        {% assign index =  1  %}
        {% for text in tab_texts %}
          {{ text }}

          {% assign index =  index | plus: 1  %}
        {% endfor %}
      

      {% if posttext != blank %}
          {{ posttext }}

      {% endif %}

  

  

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

Go to Online Store->Theme->Edit code
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!

INFRA · July 2, 2021, 1:00am

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 · July 2, 2021, 1:49am

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

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

Thanks so much!

dmwwebartisan · July 2, 2021, 6:52am

@INFRA

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

{% comment %}
  if combine_pretext is false, the text before the first ######  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 "###### " %}
      {% assign tab_heads = '' %}
      {% assign tab_texts = '' %}
      {% assign pretext  = ''  %}
      {% assign posttext = ''  %}
      
      {% if stop_on_h5 and description contains "##### " %}
        {% assign posttext = description | split: "" | last %}
        {% assign description = description | split: "##### " | first %}
      {% endif %}

      {% assign chunks = description | strip | split: "###### " %}
      {% for c in chunks %}
          {% if c contains "" %}
              {% assign chunk = c | split: "" %}
              {% 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: "
" %}
                  {% 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 %}
        
{{ pretext }}

      {% endif %}

      
        

          {% for head in tab_heads %}
              - {{ head }}
              {% assign index =  index | plus: 1  %}
          {% endfor %}
        

        {% assign index =  1  %}
        {% for text in tab_texts %}
          {{ text }}

          {% assign index =  index | plus: 1  %}
        {% endfor %}
      

      {% if posttext != blank %}
          {{ posttext }}

      {% endif %}

  

  

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

Go to Online Store->Theme->Edit code
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!

INFRA · July 2, 2021, 7:41am

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 · July 2, 2021, 9:25am

@INFRA

Please share screenshot what do you want .

Thanks!

INFRA · July 5, 2021, 2:33am

it currently looks like this, stars on the left

but should look like this, with the stars centred

Thank you!

INFRA · July 6, 2021, 12:41am

@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 · July 6, 2021, 3:17am

@INFRA

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

INFRA · July 7, 2021, 12:15am

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

dmwwebartisan · July 7, 2021, 1:09pm

@INFRA

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

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

Hope this works.

Thanks!

INFRA · July 8, 2021, 2:18am

@dmwwebartisan thanks so much, worked perfectly!

Topic		Replies	Views
Product pages - Add tabs to product descriptions Store Design	49	113	August 2, 2024
Add tabs to product description Shopify Plus themes	1	8	July 27, 2024
Streamline Theme - description tab always open Store Design	14	0	December 16, 2023
Center product tabs on focal theme for desktop Store Design design , customizations , css , shopify-themes , html , product-page	0	6	April 9, 2024
How to add tabs to product description in Simple Theme? Store Design	5	0	February 10, 2022

Add css to product tabs on Narrative theme

tags in my description to create custom tabs for each product

REVIEWS

Related topics