How to move my product savings percentage next to the old price

Solved
Michal_Morek
Shopify Partner
482 38 74

Hi! 

Brackets are here in the code: https://prnt.sc/1319qce

Please make sure these are removed from the code.

Also, make sure to watch the video. On the video, I removed brackets just by removing them: https://www.loom.com/share/cb9b46952dbe462da2567da25d19bdc5

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
RobMoore007
Explorer
122 1 12

Hi Michal,

the brackets appear in the utilities.js file as per below Screen Shot 2021-05-17 at 18.22.10.pngand if I remove them there are style issues (see screenshot)

if (variant && variant.available == true) {
    if (variant.price < variant.compare_at_price) {
      $('.was-price', $product).html('<span class="money">' + Shopify.formatMoney(variant.compare_at_price, $('body').data('money-format')) + '</span>');
      $('.savings', $product).html(Shopify.translation.product_savings + ' ' + parseInt((variant.compare_at_price - variant.price) * 100 / variant.compare_at_price) + '% (' + '<span class="money">' + Shopify.formatMoney(variant.compare_at_price - variant.price, $('body').data('money-format')) + '</span>)');
      $('.current_price', $product).parent().addClass('sale');
    } else {
      $('.was-price', $product).html('');
      $('.savings', $product).html('');
      $('.current_price', $product).parent().removeClass('sale');
    }

Regards
Rob Moore - NEWBY!!
0 Likes
RobMoore007
Explorer
122 1 12

Hi Michal, thanks again for your help here but did you see my last response re the brackets. Can you advise please?

Regards
Rob Moore - NEWBY!!
0 Likes
RobMoore007
Explorer
122 1 12

Good evening, are you able to help with this issue in my last post please?

Regards
Rob Moore - NEWBY!!
0 Likes
Michal_Morek
Shopify Partner
482 38 74

Hi @RobMoore007 

Hope you're having a great day!

I just saw you fixed your issue. Isn't it?

If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
RobMoore007
Explorer
122 1 12

Hi there, yes I still have a small issue.

If a product is not in 'SALE' like the screenshot you can still see part of % savings box.. I need to hide this if it is blank. Can you help ?

 

Screen Shot 2021-05-20 at 14.48.06.png

Regards
Rob Moore - NEWBY!!
0 Likes
RobMoore007
Explorer
122 1 12

Hi, I still have a small issue I hope you can help with pleaseScreen Shot 2021-05-22 at 09.14.14.png

Regards
Rob Moore - NEWBY!!
0 Likes
Michal_Morek
Shopify Partner
482 38 74

Hi @RobMoore007 

Hope You're having a great day!

Sure I can help you. Send me the new content of sections/product_main.liquid file.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com
0 Likes
RobMoore007
Explorer
122 1 12

Morning, all ok here thanks

 

Here you go

{% comment %}
** Product - main content area **
- Product template
{% endcomment %}

{% assign id = section.id %}
{% comment %} Layout {% endcomment %}
{% assign width = section.settings.width %}
{% assign padding_top = section.settings.padding_top %}
{% assign padding_bottom = section.settings.padding_bottom %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
  .section__wrapper {
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
  }

span.flex-style {
    display: flex;
}

  .section--has-sidebar-option.has-sidebar-enabled {
    {% if width == 'wide' -%}
      width: 100%;
      max-width: 95%;
    {%- endif %}
  }

  .section--has-sidebar-option.has-sidebar-disabled {
    width: 100%;
    max-width: none;
  }

  {% if section.settings.product_breadcrumb == false %}
    .breadcrumb__container {
      display: none;
    }

  {% endif %}

  {% render 'css-loop',
          css: custom_css,
          id: id
  %}
{% endstyle %}

{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}
{% assign product_tags = product.tags | join: ' ' %}

{% render 'product__structured-data' %}

{% comment %} HTML markup {% endcomment %}
<section class="section is-width-{{ width }} {{ css_class }}">
  <div class="product-{{ product.id }}">
    <div class="product_section
                js-product_section
                container
                is-justify-space-between
                has-padding-bottom
                {% if section.settings.product_images_position == 'right' %}
                  is-flex-row-reverse
                {% endif %}"
                data-rv-handle="{{ product.handle }}">

      <div class="product__images
                  one-half
                  column
                  medium-down--one-whole">
        {% render 'product__images',
                product: product,
                display_thumbnails: section.settings.display_thumbnails,
                thumbnail_position: section.settings.thumbnail_position,
                enable_thumbnail_slider: section.settings.enable_thumbnail_slider,
                product_height: section.settings.product_height,
                set_product_height: section.settings.set_product_height,
                video_looping: section.settings.video_looping
                gallery_arrows: section.settings.gallery_arrows,
                slideshow_transition: section.settings.slideshow_transition,
                enable_product_lightbox: section.settings.enable_product_lightbox,
                enable_zoom: section.settings.enable_zoom
        %}
      </div>

      <div class="product__information
                  has-product-sticker
                  one-half
                  column
                  medium-down--one-whole">

        {% comment %} Sale sticker {% endcomment %}
        {% if settings.stickers_enabled %}
          {% render 'product-thumbnail__sticker',
                  context: 'product',
                  collection_handles: collection_handles
          %}
        {% endif %}

        {% comment %} Review stars {% endcomment %}
        {% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
          <div class="spr-badge-container">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </div>
        {% endif %}

        {% comment %} Vendor {% endcomment %}
        {% if section.settings.display_vendor %}
          <p class="vendor">
            <span class="vendor">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% comment %} Sku {% endcomment %}
        {% if variant.sku != blank and section.settings.display_sku %}
          <p class="sku">
            {{ variant.sku }}
          </p>
        {% endif %}

        <div>

          {% comment %} Name {% endcomment %}
          <h1 class="product_name title">{{ product.title }}</h1>
          {% for tag in product.tags %}
            {% if tag contains 'meta-size-chart-' %}
              {% assign meta-size-chart = true %}
            {% endif %}
          {% endfor %}

          {% comment %} Size chart Mobile {% endcomment %}
          {% if settings.size_chart != blank or meta-size-chart %}
            <a href="javascript&colon;;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
            {% render 'popup-size-chart', product_id: product.id %}
          {% endif %}

          {% comment %} Price {% endcomment %}
          <p class="modal_price subtitle">
            {% if collection_handles contains 'coming-soon' %}
              {% if settings.stickers_enabled == false %}
                {{ 'collections.general.coming_soon' | t }}
              {% endif %}
            {% else %}

              {% comment %} Sold out {% endcomment %}
              <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>

             
               <span class="flex-style">
                   {% comment %} Compare at (original) price {% endcomment %}
                   <span class="was-price">
                        {% if variant.price < variant.compare_at_price and variant.available %}
                            <span class="money">
                                {% render 'price-element', price: variant.compare_at_price %}
                            </span>
                        {% endif %}
                     </span>

        {% comment %} Savings {% endcomment %}
              {% if section.settings.display_savings %}
            <span class="sale savings">
                  {% if variant.price < variant.compare_at_price and variant.available %}
                    {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% </span>
                  {% endif %}
                </span>
              {% endif %}

               </span>
  
             {% comment %} Current price {% endcomment %}
              <span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
                <span class="current_price {% if product.available == false %}hidden{% endif %}">
                  {% if variant.price > 0 %}
                    <span class="money">
                      {% render 'price-element', price: variant.price %}
                    </span>
                  {% else %}
                    {{ settings.free_price_text }}
                  {% endif %}
                </span>
              </span>
              {% comment %} Size chart {% endcomment %}
              {% if settings.size_chart != blank or meta-size-chart %}
                <a href="javascript&colon;;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
                {% render 'popup-size-chart', product_id: product.id %}
              {% endif %}


            {% endif %}
          </p>
        </div>

        {% comment %} Description - top {% endcomment %}
        {% if section.settings.product_description_position == "top" %}
          {% if product.description != blank %}
            <div class="description content has-padding-top">
              {{ product.description | split: '<!-- split -->' | first }}
            </div>
          {% endif %}
        {% endif %}
        <!--Advanced Product Start-->
   <!--Advanced Product end -->
        {% comment %} Purchase form {% endcomment %}
        <div class="product-form-container has-padding-top">

          {% comment %} Notify form {% endcomment %}
          {% render 'product__notify-me-form', product: product %}

          {% comment %} Product form {% endcomment %}
          {% unless collection_handles contains 'coming-soon' %}
            {% render 'product__form',
                    context: 'product',
                    show_payment_button: section.settings.show_payment_button,
                    collection_handles: collection_handles
            %}
          {% endunless %}
          
        </div>

        {% comment %} Description - bottom {% endcomment %}
        {% if section.settings.product_description_position == "bottom" %}
          {% if product.description != blank %}
            <div class="description content bottom has-padding-top">
              {{ product.description | split: '<!-- split -->' | first }}
            </div>
          {% endif %}
        {% endif %}
 
        <!--Start tab labels-->
<div class="row">
<div class="nine columns alpha">

       <div class="row cc-two-columns">
<div class="sixteen columns alpha">
</div>
        {% comment %} Collections, type, tags {% endcomment %}
        {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
          <div class="product__classification-links has-padding-top">
            {% if section.settings.display_collections %}
              <p class="product__collections-list tags">
                <span class="product__classification-title">{{ 'products.product.collections' | t }}:</span>
                {% for col in product.collections %}
                  <span class="tag tag--{{ settings.tag_style }}">
                    <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>
                  </span>
                {% endfor %}
              </p>
            {% endif %}

            {% if section.settings.display_type %}
              <p class="product__type-list tags">
                <span class="product__classification-title">{{ 'products.product.product_types' | t }}:</span>
                <span class="tag tag--{{ settings.tag_style }}">{{ product.type | link_to_type }}</span>
              </p>
            {% endif %}

            {% if section.settings.display_tags and product.tags.size > 0 %}
              <p class="product__tags-list tags">
                <span class="product__classification-title">{{ 'products.product.tags' | t }}:</span>
                {% for tag in product.tags %}
                  {% unless tag contains 'meta-' %}
                    <span class="tag tag--{{ settings.tag_style }}">
                      <a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>
                    </span>
                  {% endunless %}
                {% endfor %}
              </p>
            {% endif %}
          </div>
        {% endif %}

        {% comment %} Social share icons {% endcomment %}
        {% if section.settings.display_social_buttons %}
          <div class="product__social-share has-padding-top">
            {% render 'social-share-buttons' %}
          </div>
        {% endif %}

      </div>
    </div>

    {% comment %} Description - split {% endcomment %}
    {% if product.description contains "<!-- split -->"  %}
      <div class="product-description-split">
        <div class="description content">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </div>
    {% endif %}
  </div>
</section>
{% comment %} JavaScript {% endcomment %}
<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-data
>
  {
    "gallery_arrows": {{ section.settings.gallery_arrows | json }},
    "thumbnail_arrows": {{ section.settings.gallery_arrows | json }},
    "enable_zoom": {{ section.settings.enable_zoom | json }},
    "enable_product_lightbox": {{ section.settings.enable_product_lightbox | json }},
    "enable_thumbnail_slider": {{ section.settings.enable_thumbnail_slider | json }},
    "slideshow_speed": {{ section.settings.slideshow_speed | json }},
    "slideshow_transition": {{ section.settings.slideshow_transition | json }},
    "thumbnails_enabled": {{ section.settings.display_thumbnails | json }},
    "thumbnail_position": {{ section.settings.thumbnail_position | json }},
    "product_media_amount": {{ product.media.size }},
    "template": "classic"
  }
</script>
<script src="{{ 'z__jsProduct.js' | asset_url }}"></script>
<div>
</section>
<section class="section is-width-{{ width }} {{ css_class }}">
   <!--Start CSS For Tabs-->
        
<style>
    ul.tabs  {
    display: none
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 510;
    padding-top: 0px;
	padding-bottom: 0px;
    align-items: left;
    background: lightgrey; /* CHANGE THE COLOUR HERE */
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

  .twelve {
  border-color: #71823c;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 3px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  }

  li.tabs {
  cursor: pointer;
  }

  ul.tabs-content {
  font-family: sans-serif;
  align-items: left;
  justify-content: top;
  margin-bottom: 1px;
  padding: 2.2em 2.2em;
  vertical-align: top;  
  padding-top: 0em;
}
  
  .accordion {
  
  }

</style>
<div class="row">
  <div class="twelve columns alpha desktop-tabs {% if product.handle == "gift-card" %}hide{% endif %}"> 
  <ul class="tabs">{% if product.metafields.overview.info != blank %}
  <li><a class="tabs active" href="#tab1">Overview</a></li>
  {% endif %}
  {% if product.metafields.features.detail != blank %}
  <li><a{% if product.metafields.overview.info == blank %} class="active"{% endif %} href="#tab2">Features</a></li>
  {% endif %}
  {% if product.metafields.size.guide != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail == blank %} class="active"{% endif %} href="#tab3">Size Guide</a></li>
  {% endif %}
  {% if product.metafields.custom.fit != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit == blank %} class="active"{% endif %} href="#tab4">Custom Fit</a></li>
  {% endif %}
  {% if product.metafields.techi.info != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info == blank %} class="active"{% endif %} href="#tab5">Tech Info</a></li>
  {% endif %}
  {% if product.metafields.terms.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text == blank %} class="active"{% endif %} href="#tab6">T&Cs</a></li>
  {% endif %}
  {% if product.metafields.specifications.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text == blank %} class="active"{% endif %} href="#tab7">Specifications</a></li>
  {% endif %}
  {% if product.metafields.lithium.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text == blank %} class="active"{% endif %} href="#tab8">Lithium</a></li>
  {% endif %}
  {% if product.metafields.charging.advice != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice == blank %} class="active"{% endif %} href="#tab9">Charging Advice</a></li>
  {% endif %}
  {% if product.metafields.warranty.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text == blank %} class="active"{% endif %} href="#tab10">Warranty</a></li>
  {% endif %}
  {% if product.metafields.care_instructions.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text == blank %} class="active"{% endif %} href="#tab11">Care Instructions</a></li>
  {% endif %}
  {% if product.metafields.returns.policy != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy == blank %} class="active"{% endif %} href="#tab12">Returns</a></li>
  {% endif %}
  {% if product.metafields.goretex.info != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info  == blank %} class="active"{% endif %} href="#tab13">Gore Tex Info</a></li>
  {% endif %}
  {% if product.metafields.interface1.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text  == blank %} class="active"{% endif %} href="#tab14">Interface-1</a></li>
  {% endif %}
  {% if product.metafields.video.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text  == blank %} class="active"{% endif %} href="#tab15">Video</a></li>
  {% endif %}
  {% if product.metafields.Personalisation.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text and product.metafields.Personalisation.text  == blank %} class="active"{% endif %} href="#tab16">Personalisation</a></li>
  {% endif %}</ul>
  
  <!--Start tab content-->
  <ul class="tabs-content">{% if product.metafields.overview.info !=blank %}
  <li class="tab1 active">{{product.metafields.overview.info}}
  {% endif %} 
  {% if product.metafields.features.detail !=blank %}
  <li class="tab2">{{product.metafields.features.detail}}</li>
  {% endif %} 
  {% if product.metafields.size.guide !=blank %}
  <li id="tab3">{{product.metafields.size.guide}}</li>
  {% endif %}
  {% if product.metafields.custom.fit !=blank %}
  <li id="tab4">{{product.metafields.custom.fit}}</li>
  {% endif %}
  {% if product.metafields.techi.info !=blank %}
  <li id="tab5">{{product.metafields.techi.info}}</li>
  {% endif %}
  {% if product.metafields.terms.text !=blank %}
  <li id="tab6">{{product.metafields.terms.text}}</li>
  {% endif %}
  {% if product.metafields.specifications.text !=blank %}
  <li id="tab7">{{product.metafields.specifications.text}}</li>
  {% endif %}
  {% if product.metafields.lithium.text !=blank %}
  <li id="tab8">{{product.metafields.lithium.text}}</li>
  {% endif %}
  {% if product.metafields.charging.advice !=blank %}
  <li id="tab9">{{product.metafields.charging.advice}}</li>
  {% endif %}
  {% if product.metafields.warranty.text !=blank %}
  <li id="tab10">{{product.metafields.warranty.text}}</li>
  {% endif %}
  {% if product.metafields.care_instructions.text !=blank %}
  <li id="tab11">{{product.metafields.care_instructions.text}}</li>
  {% endif %}
  {% if product.metafields.returns.policy !=blank %}
  <li id="tab12">{{product.metafields.returns.policyt}}</li>
  {% endif %}
  {% if product.metafields.goretex.info !=blank %}
  <li id="tab13">{{product.metafields.goretex.info}}</li>
  {% endif %}
  {% if product.metafields.interface1.text !=blank %}
  <li id="tab14">{{product.metafields.interface1.text}}</li>
  {% endif %}
  {% if product.metafields.video.text !=blank %}
  <li id="tab15">{{product.metafields.video.text}}</li>
  {% endif %}
  {% if product.metafields.Personalisation.text !=blank %}
  <li id="tab16">{{product.metafields.personalisation.text}}</li>
  {% endif %}</ul>
    </div>
  
  
  <!--Start mobile accordion content-->
  
  <div class="mobile-accordion four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
    <div id="accordion">
    {% if product.metafields.overview.info != blank %}
      <div class="button mobile-accordion-button active" role="button">
          <h5>Overview</h5>
      </div>
      <div  class="slide mobile-accordion-slide {% if product.metafields.overview.info != blank %}overview-slide{% endif %}">
        {% if product.metafields.overview.info !=blank %}
          <p>{{product.metafields.overview.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.features.detail!= blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Features</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.features.detail !=blank %}
          {{product.metafields.features.detail}}
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.size.guide != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Size Guide</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.size.guide !=blank %}
          <p>{{product.metafields.size.guide}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.custom.fit != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Custom Fit</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.custom.fit !=blank %}
          <p>{{product.metafields.custom.fit}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.techi.info != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Tech Info</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.techi.info !=blank %}
          <p>{{product.metafields.techi.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.terms.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>T&Cs</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.terms.text !=blank %}
          <p>{{product.metafields.terms.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.specifications.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Specifications</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.specifications.text !=blank %}
          <p>{{product.metafields.specifications.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.lithium.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Lithium</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.lithium.text !=blank %}
          <p>{{product.metafields.lithium.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.charging.advice != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Charging Advice</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.charging.advice !=blank %}
          <p>{{product.metafields.charging.advice}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.warranty.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Warranty</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.warranty.text !=blank %}
          <p>{{product.metafields.warranty.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.care_instructions.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Care Instructions</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.care_instructions.text !=blank %}
          <p>{{product.metafields.care_instructions.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
    
    {% if product.metafields.returns.policy != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Returns</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.returns.policy !=blank %}
          <p>{{product.metafields.returns.policy}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.goretex.info != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Gore Tex Info</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.goretex.info !=blank %}
          <p>{{product.metafields.goretex.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.interface1.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Interface-1</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.interface1.text !=blank %}
          <p>{{product.metafields.interface1.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.video.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Video</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.video.text !=blank %}
          <p>{{product.metafields.video.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
      {% if product.metafields.Personalisation.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Personalisation</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.Personalisation.text !=blank %}
          <p>{{product.metafields.Personalisation.text}}</p>
        {% endif %} 
      </div>
      {% endif %}
  
    </div>
  </div>
  <!--End mobile accordion content-->
  {% comment%}
  <div class="four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
  <dl class="accordion bottom-accordion">
  <dt><a href="/products/gift-card"><i class="fa fa-gift" aria-hidden="true"></i>Gift Vouchers<small class="right"><i class="fa fa-chevron-down" aria-hidden="false"></i></small></a></dt>
  <dd>
    Available from £10 to any value. The cards can be used online or at our shops in St Andrews.
    <a class="desc-link" href="#">Buy here <i class="fa fa-chevron-right" aria-hidden="false"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-wrench custom-icons" aria-hidden="true"></i>Golf Services<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We have a full custom fitting suite in St Andrews using state of the art Trackman technology where our qualified custom fitters will help and advise you on the most suitable fit and brand of clubs for your game.
    <a class="desc-link" href="/pages/custom-club-fitting-services">Book A Custom Fitting <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  	<a class="desc-link" href="/pages/club-rental-services"><br>Club Rental <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a class="desc-link" href="/pages/golf-workshop-repair-services"><br>Golf Workshop Services <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    </dd>
  <dt><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Old Course<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    The Old Course collection from Auchterlonies of St Andrews features a wide range of clothing, accessories and apparel with our unique Old Course St Andrews crest.
    <a class="desc-link" href="/collections/old-course-catalogue">Explore the range <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-truck custom-icons" aria-hidden="true"></i>Shipping Info<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We are currently offering free UK shipping on all purchases over £75 in basket for UK and EU customers and £100 for US and rest of the world customers. (Free shipping applies to non-discounted items)
    <a class="desc-link" href="#">Find out more <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-check-circle custom-icons" aria-hidden="true"></i> Authorised Stock<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We are Authorised Stockists of the finest golf brands. All available online and in our store here in St Andrews.
    <a class="desc-link" href="/pages/collections">Search our brands <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  </dl>
  </div>
  {% endcomment %}
  
  <div class="description-accordion four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
    <div class="testingexample" id="accordion">
  
      <div class="button description-accordion-button active" role="button">
          <i class="fa fa-gift" aria-hidden="true"></i><h5>Gift Vouchers</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide first-slide">
        Available from £10 to any value. The cards can be used online or at our shops in St Andrews.
        <a class="desc-link" href="/products/gift-card"><br>Buy here <i class="fa fa-chevron-right" aria-hidden="false"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-wrench custom-icons" aria-hidden="true"></i><h5>Golf Services</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We have a full custom fitting suite in St Andrews using state of the art Trackman technology where our qualified custom fitters will help and advise you on the most suitable fit and brand of clubs for your game. We also have the latest clubs for hire and a full club repair service.
        <a class="desc-link" href="/pages/custom-club-fitting-services"><br>Book A Custom Fitting <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      	<a class="desc-link" href="/pages/club-rental-services"><br>Club Rental <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        <a class="desc-link" href="/pages/golf-workshop-repair-services"><br>Golf Workshop Services <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-shopping-basket" aria-hidden="true"></i><h5>Old Course</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        The Old Course collection from Auchterlonies of St Andrews features a wide range of clothing, accessories and apparel with our unique Old Course St Andrews crest.
        <a class="desc-link" href="/collections/old-course-catalogue"><br>Explore the range <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-truck custom-icons" aria-hidden="true"></i><h5>Shipping Info</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We are currently offering free UK shipping on all purchases over £75 in basket for UK and EU customers and £100 for US and rest of the world customers. (Free shipping applies to non-discounted items)
        <a class="desc-link" href="#"><br>Find out more <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-check-circle custom-icons" aria-hidden="true"></i><h5>Authorised Stock</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We are Authorised Stockists of the finest golf brands. All available online and in our store here in St Andrews.
        <a class="desc-link" href="/pages/collections"><br>Search our brands <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
         
{% render "custom-video" %}
  
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
  <script>
    window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
      {% assign models = product.media | where: 'media_type', 'model' | json %}
      ShopifyXR('addModels', {{ models }});
  </script>
{% endif %}

{% if section.blocks.size > 0 %}

  <div class="product__blocks dynamic-blocks is-flex is-flex-wrap is-justify-center" data-check-for-order="true">
    {% for block in section.blocks %}
      {%- assign animation = block.settings.animation | default: 'none' -%}
      {%- assign width = block.settings.width -%}

      <div id="shopify-section-{{ block.id }}" {{ block.shopify_attributes }} class="shopify-section product__block block__{{ block.type | downcase | replace: '_', '-' }}
        {% if block.type == 'featured_collection' %}
          jsFeaturedCollection
        {% elsif block.type == 'image_with_overlay' %}
          overlaid-header-option
        {% elsif block.type == 'featured_product' %}
          jsProduct
        {% elsif block.type == 'map' %}
          jsMap
        {% elsif block.type == 'video' %}
          jsVideo
        {% endif %}">
        {% if block.type == 'product_reviews' %}
          {% comment %} Product reviews {% endcomment %}
          {% include 'include-reviews', type: 'block' %}

        {% elsif block.type == 'image_with_overlay' %}
          {% comment %} Image with text overlay {% endcomment %}
          {% include 'include-image-with-text-overlay', type: 'block' %}

        {% elsif block.type == 'image_with_text' %}
          {% comment %} Image with text {% endcomment %}
          {% include 'include-one-image-with-text', type: 'block' %}

        {% elsif block.type == 'rich_text' %}
          {% comment %} Rich text {% endcomment %}
          {% include 'include-rich-text', type: 'block' %}

        {% elsif block.type == 'video' %}
          {% comment %} Featured video {% endcomment %}
          {% include 'include-video', type: 'block' %}

        {% elsif block.type == "blog" %}
          {% comment %} Blog {% endcomment %}
          {% include 'include-featured-blog', type: 'block' %}

        {% elsif block.type == 'featured_collection' %}
          {% comment %} Featured collection {% endcomment %}
          {% include 'include-featured-collection', type: 'block' %}

        {% elsif block.type == 'logo_list' %}
          {% comment %} Logo list {% endcomment %}
          {% include 'include-logo-list', type: 'block' %}

        {% elsif block.type == "divider" %}
          {% comment %} Divider {% endcomment %}
          {% include 'include-divider', type: 'block' %}

        {% elsif block.type == 'map' %}
          {% comment %} Map {% endcomment %}
          {% include 'include-map', type: 'block' %}

        {% elsif block.type == "page" %}
          {% comment %} Page {% endcomment %}
          {% include 'include-content-page', type: 'block' %}

        {% elsif block.type == 'recommended_products' %}
          {% comment %} Recommended products {% endcomment %}
          <section class="section is-width-{{ width }}" data-product-recommendations-container
              {% if animation != "none" %}
                data-scroll-class="{{ animation }}"
              {% endif %}>
          </section>

          {% style %}
            #shopify-section-{{ block.id }} {
              padding-top: {{ block.settings.padding_top }}px;
              padding-bottom: {{ block.settings.padding_bottom }}px;
              width: 95%;
              {% if block.settings.width == 'wide' %}
                width: 100%;
              {% endif %}
            }
          {% endstyle %}

        {% endif %}
      </div>

    {% endfor %}

  </div>
{% endif %}

{% comment %} Used to ensure product review app installs succesfully {% endcomment %}
<div class="is-hidden">
  <div id="shopify-product-reviews" data-id="{{ product.id }}">
    {{ product.metafields.spr.reviews }}
  </div>
</div>

 

 

Regards
Rob Moore - NEWBY!!
0 Likes
Michal_Morek
Shopify Partner
482 38 74

This is an accepted solution.

Hi @RobMoore007 

Backup product_main.liquid and replaces its content with:

{% comment %}
** Product - main content area **
- Product template
{% endcomment %}

{% assign id = section.id %}
{% comment %} Layout {% endcomment %}
{% assign width = section.settings.width %}
{% assign padding_top = section.settings.padding_top %}
{% assign padding_bottom = section.settings.padding_bottom %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
  .section__wrapper {
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
  }

span.flex-style {
    display: flex;
}

  .section--has-sidebar-option.has-sidebar-enabled {
    {% if width == 'wide' -%}
      width: 100%;
      max-width: 95%;
    {%- endif %}
  }

  .section--has-sidebar-option.has-sidebar-disabled {
    width: 100%;
    max-width: none;
  }

  {% if section.settings.product_breadcrumb == false %}
    .breadcrumb__container {
      display: none;
    }

  {% endif %}

  {% render 'css-loop',
          css: custom_css,
          id: id
  %}
{% endstyle %}

{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}
{% assign product_tags = product.tags | join: ' ' %}

{% render 'product__structured-data' %}

{% comment %} HTML markup {% endcomment %}
<section class="section is-width-{{ width }} {{ css_class }}">
  <div class="product-{{ product.id }}">
    <div class="product_section
                js-product_section
                container
                is-justify-space-between
                has-padding-bottom
                {% if section.settings.product_images_position == 'right' %}
                  is-flex-row-reverse
                {% endif %}"
                data-rv-handle="{{ product.handle }}">

      <div class="product__images
                  one-half
                  column
                  medium-down--one-whole">
        {% render 'product__images',
                product: product,
                display_thumbnails: section.settings.display_thumbnails,
                thumbnail_position: section.settings.thumbnail_position,
                enable_thumbnail_slider: section.settings.enable_thumbnail_slider,
                product_height: section.settings.product_height,
                set_product_height: section.settings.set_product_height,
                video_looping: section.settings.video_looping
                gallery_arrows: section.settings.gallery_arrows,
                slideshow_transition: section.settings.slideshow_transition,
                enable_product_lightbox: section.settings.enable_product_lightbox,
                enable_zoom: section.settings.enable_zoom
        %}
      </div>

      <div class="product__information
                  has-product-sticker
                  one-half
                  column
                  medium-down--one-whole">

        {% comment %} Sale sticker {% endcomment %}
        {% if settings.stickers_enabled %}
          {% render 'product-thumbnail__sticker',
                  context: 'product',
                  collection_handles: collection_handles
          %}
        {% endif %}

        {% comment %} Review stars {% endcomment %}
        {% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
          <div class="spr-badge-container">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </div>
        {% endif %}

        {% comment %} Vendor {% endcomment %}
        {% if section.settings.display_vendor %}
          <p class="vendor">
            <span class="vendor">{{ product.vendor | link_to_vendor }}</span>
          </p>
        {% endif %}

        {% comment %} Sku {% endcomment %}
        {% if variant.sku != blank and section.settings.display_sku %}
          <p class="sku">
            {{ variant.sku }}
          </p>
        {% endif %}

        <div>

          {% comment %} Name {% endcomment %}
          <h1 class="product_name title">{{ product.title }}</h1>
          {% for tag in product.tags %}
            {% if tag contains 'meta-size-chart-' %}
              {% assign meta-size-chart = true %}
            {% endif %}
          {% endfor %}

          {% comment %} Size chart Mobile {% endcomment %}
          {% if settings.size_chart != blank or meta-size-chart %}
            <a href="javascript&colon;;" class="product__size-chart size-chart--medium-down" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
            {% render 'popup-size-chart', product_id: product.id %}
          {% endif %}

          {% comment %} Price {% endcomment %}
          <p class="modal_price subtitle">
            {% if collection_handles contains 'coming-soon' %}
              {% if settings.stickers_enabled == false %}
                {{ 'collections.general.coming_soon' | t }}
              {% endif %}
            {% else %}

              {% comment %} Sold out {% endcomment %}
              <span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>

             
               <span class="flex-style">
                   {% comment %} Compare at (original) price {% endcomment %}
                   <span class="was-price">
                        {% if variant.price < variant.compare_at_price and variant.available %}
                            <span class="money">
                                {% render 'price-element', price: variant.compare_at_price %}
                            </span>
                        {% endif %}
                     </span>

        {% comment %} Savings {% endcomment %}
              {% if section.settings.display_savings %}
                  {% if variant.price < variant.compare_at_price and variant.available %}
                     <span class="sale savings">
                    {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% </span>
                  {% endif %}
              {% endif %}

               </span>
  
             {% comment %} Current price {% endcomment %}
              <span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
                <span class="current_price {% if product.available == false %}hidden{% endif %}">
                  {% if variant.price > 0 %}
                    <span class="money">
                      {% render 'price-element', price: variant.price %}
                    </span>
                  {% else %}
                    {{ settings.free_price_text }}
                  {% endif %}
                </span>
              </span>
              {% comment %} Size chart {% endcomment %}
              {% if settings.size_chart != blank or meta-size-chart %}
                <a href="javascript&colon;;" class="product__size-chart medium-down--hidden" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline">{{ 'products.product.size_chart' | t }} {% render 'icon', name: 'right-caret' %}</a>
                {% render 'popup-size-chart', product_id: product.id %}
              {% endif %}


            {% endif %}
          </p>
        </div>

        {% comment %} Description - top {% endcomment %}
        {% if section.settings.product_description_position == "top" %}
          {% if product.description != blank %}
            <div class="description content has-padding-top">
              {{ product.description | split: '<!-- split -->' | first }}
            </div>
          {% endif %}
        {% endif %}
        <!--Advanced Product Start-->
   <!--Advanced Product end -->
        {% comment %} Purchase form {% endcomment %}
        <div class="product-form-container has-padding-top">

          {% comment %} Notify form {% endcomment %}
          {% render 'product__notify-me-form', product: product %}

          {% comment %} Product form {% endcomment %}
          {% unless collection_handles contains 'coming-soon' %}
            {% render 'product__form',
                    context: 'product',
                    show_payment_button: section.settings.show_payment_button,
                    collection_handles: collection_handles
            %}
          {% endunless %}
          
        </div>

        {% comment %} Description - bottom {% endcomment %}
        {% if section.settings.product_description_position == "bottom" %}
          {% if product.description != blank %}
            <div class="description content bottom has-padding-top">
              {{ product.description | split: '<!-- split -->' | first }}
            </div>
          {% endif %}
        {% endif %}
 
        <!--Start tab labels-->
<div class="row">
<div class="nine columns alpha">

       <div class="row cc-two-columns">
<div class="sixteen columns alpha">
</div>
        {% comment %} Collections, type, tags {% endcomment %}
        {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
          <div class="product__classification-links has-padding-top">
            {% if section.settings.display_collections %}
              <p class="product__collections-list tags">
                <span class="product__classification-title">{{ 'products.product.collections' | t }}:</span>
                {% for col in product.collections %}
                  <span class="tag tag--{{ settings.tag_style }}">
                    <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>
                  </span>
                {% endfor %}
              </p>
            {% endif %}

            {% if section.settings.display_type %}
              <p class="product__type-list tags">
                <span class="product__classification-title">{{ 'products.product.product_types' | t }}:</span>
                <span class="tag tag--{{ settings.tag_style }}">{{ product.type | link_to_type }}</span>
              </p>
            {% endif %}

            {% if section.settings.display_tags and product.tags.size > 0 %}
              <p class="product__tags-list tags">
                <span class="product__classification-title">{{ 'products.product.tags' | t }}:</span>
                {% for tag in product.tags %}
                  {% unless tag contains 'meta-' %}
                    <span class="tag tag--{{ settings.tag_style }}">
                      <a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>
                    </span>
                  {% endunless %}
                {% endfor %}
              </p>
            {% endif %}
          </div>
        {% endif %}

        {% comment %} Social share icons {% endcomment %}
        {% if section.settings.display_social_buttons %}
          <div class="product__social-share has-padding-top">
            {% render 'social-share-buttons' %}
          </div>
        {% endif %}

      </div>
    </div>

    {% comment %} Description - split {% endcomment %}
    {% if product.description contains "<!-- split -->"  %}
      <div class="product-description-split">
        <div class="description content">
          {{ product.description | split: '<!-- split -->' | last }}
        </div>
      </div>
    {% endif %}
  </div>
</section>
{% comment %} JavaScript {% endcomment %}
<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-data
>
  {
    "gallery_arrows": {{ section.settings.gallery_arrows | json }},
    "thumbnail_arrows": {{ section.settings.gallery_arrows | json }},
    "enable_zoom": {{ section.settings.enable_zoom | json }},
    "enable_product_lightbox": {{ section.settings.enable_product_lightbox | json }},
    "enable_thumbnail_slider": {{ section.settings.enable_thumbnail_slider | json }},
    "slideshow_speed": {{ section.settings.slideshow_speed | json }},
    "slideshow_transition": {{ section.settings.slideshow_transition | json }},
    "thumbnails_enabled": {{ section.settings.display_thumbnails | json }},
    "thumbnail_position": {{ section.settings.thumbnail_position | json }},
    "product_media_amount": {{ product.media.size }},
    "template": "classic"
  }
</script>
<script src="{{ 'z__jsProduct.js' | asset_url }}"></script>
<div>
</section>
<section class="section is-width-{{ width }} {{ css_class }}">
   <!--Start CSS For Tabs-->
        
<style>
    ul.tabs  {
    display: none
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 510;
    padding-top: 0px;
	padding-bottom: 0px;
    align-items: left;
    background: lightgrey; /* CHANGE THE COLOUR HERE */
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

  .twelve {
  border-color: #71823c;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 3px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  }

  li.tabs {
  cursor: pointer;
  }

  ul.tabs-content {
  font-family: sans-serif;
  align-items: left;
  justify-content: top;
  margin-bottom: 1px;
  padding: 2.2em 2.2em;
  vertical-align: top;  
  padding-top: 0em;
}
  
  .accordion {
  
  }

</style>
<div class="row">
  <div class="twelve columns alpha desktop-tabs {% if product.handle == "gift-card" %}hide{% endif %}"> 
  <ul class="tabs">{% if product.metafields.overview.info != blank %}
  <li><a class="tabs active" href="#tab1">Overview</a></li>
  {% endif %}
  {% if product.metafields.features.detail != blank %}
  <li><a{% if product.metafields.overview.info == blank %} class="active"{% endif %} href="#tab2">Features</a></li>
  {% endif %}
  {% if product.metafields.size.guide != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail == blank %} class="active"{% endif %} href="#tab3">Size Guide</a></li>
  {% endif %}
  {% if product.metafields.custom.fit != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit == blank %} class="active"{% endif %} href="#tab4">Custom Fit</a></li>
  {% endif %}
  {% if product.metafields.techi.info != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info == blank %} class="active"{% endif %} href="#tab5">Tech Info</a></li>
  {% endif %}
  {% if product.metafields.terms.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text == blank %} class="active"{% endif %} href="#tab6">T&Cs</a></li>
  {% endif %}
  {% if product.metafields.specifications.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text == blank %} class="active"{% endif %} href="#tab7">Specifications</a></li>
  {% endif %}
  {% if product.metafields.lithium.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text == blank %} class="active"{% endif %} href="#tab8">Lithium</a></li>
  {% endif %}
  {% if product.metafields.charging.advice != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice == blank %} class="active"{% endif %} href="#tab9">Charging Advice</a></li>
  {% endif %}
  {% if product.metafields.warranty.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text == blank %} class="active"{% endif %} href="#tab10">Warranty</a></li>
  {% endif %}
  {% if product.metafields.care_instructions.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text == blank %} class="active"{% endif %} href="#tab11">Care Instructions</a></li>
  {% endif %}
  {% if product.metafields.returns.policy != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy == blank %} class="active"{% endif %} href="#tab12">Returns</a></li>
  {% endif %}
  {% if product.metafields.goretex.info != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info  == blank %} class="active"{% endif %} href="#tab13">Gore Tex Info</a></li>
  {% endif %}
  {% if product.metafields.interface1.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text  == blank %} class="active"{% endif %} href="#tab14">Interface-1</a></li>
  {% endif %}
  {% if product.metafields.video.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text  == blank %} class="active"{% endif %} href="#tab15">Video</a></li>
  {% endif %}
  {% if product.metafields.Personalisation.text != blank %}
  <li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.care_instructions.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text and product.metafields.Personalisation.text  == blank %} class="active"{% endif %} href="#tab16">Personalisation</a></li>
  {% endif %}</ul>
  
  <!--Start tab content-->
  <ul class="tabs-content">{% if product.metafields.overview.info !=blank %}
  <li class="tab1 active">{{product.metafields.overview.info}}
  {% endif %} 
  {% if product.metafields.features.detail !=blank %}
  <li class="tab2">{{product.metafields.features.detail}}</li>
  {% endif %} 
  {% if product.metafields.size.guide !=blank %}
  <li id="tab3">{{product.metafields.size.guide}}</li>
  {% endif %}
  {% if product.metafields.custom.fit !=blank %}
  <li id="tab4">{{product.metafields.custom.fit}}</li>
  {% endif %}
  {% if product.metafields.techi.info !=blank %}
  <li id="tab5">{{product.metafields.techi.info}}</li>
  {% endif %}
  {% if product.metafields.terms.text !=blank %}
  <li id="tab6">{{product.metafields.terms.text}}</li>
  {% endif %}
  {% if product.metafields.specifications.text !=blank %}
  <li id="tab7">{{product.metafields.specifications.text}}</li>
  {% endif %}
  {% if product.metafields.lithium.text !=blank %}
  <li id="tab8">{{product.metafields.lithium.text}}</li>
  {% endif %}
  {% if product.metafields.charging.advice !=blank %}
  <li id="tab9">{{product.metafields.charging.advice}}</li>
  {% endif %}
  {% if product.metafields.warranty.text !=blank %}
  <li id="tab10">{{product.metafields.warranty.text}}</li>
  {% endif %}
  {% if product.metafields.care_instructions.text !=blank %}
  <li id="tab11">{{product.metafields.care_instructions.text}}</li>
  {% endif %}
  {% if product.metafields.returns.policy !=blank %}
  <li id="tab12">{{product.metafields.returns.policyt}}</li>
  {% endif %}
  {% if product.metafields.goretex.info !=blank %}
  <li id="tab13">{{product.metafields.goretex.info}}</li>
  {% endif %}
  {% if product.metafields.interface1.text !=blank %}
  <li id="tab14">{{product.metafields.interface1.text}}</li>
  {% endif %}
  {% if product.metafields.video.text !=blank %}
  <li id="tab15">{{product.metafields.video.text}}</li>
  {% endif %}
  {% if product.metafields.Personalisation.text !=blank %}
  <li id="tab16">{{product.metafields.personalisation.text}}</li>
  {% endif %}</ul>
    </div>
  
  
  <!--Start mobile accordion content-->
  
  <div class="mobile-accordion four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
    <div id="accordion">
    {% if product.metafields.overview.info != blank %}
      <div class="button mobile-accordion-button active" role="button">
          <h5>Overview</h5>
      </div>
      <div  class="slide mobile-accordion-slide {% if product.metafields.overview.info != blank %}overview-slide{% endif %}">
        {% if product.metafields.overview.info !=blank %}
          <p>{{product.metafields.overview.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.features.detail!= blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Features</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.features.detail !=blank %}
          {{product.metafields.features.detail}}
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.size.guide != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Size Guide</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.size.guide !=blank %}
          <p>{{product.metafields.size.guide}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.custom.fit != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Custom Fit</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.custom.fit !=blank %}
          <p>{{product.metafields.custom.fit}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.techi.info != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Tech Info</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.techi.info !=blank %}
          <p>{{product.metafields.techi.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.terms.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>T&Cs</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.terms.text !=blank %}
          <p>{{product.metafields.terms.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.specifications.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Specifications</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.specifications.text !=blank %}
          <p>{{product.metafields.specifications.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.lithium.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Lithium</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.lithium.text !=blank %}
          <p>{{product.metafields.lithium.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.charging.advice != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Charging Advice</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.charging.advice !=blank %}
          <p>{{product.metafields.charging.advice}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.warranty.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Warranty</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.warranty.text !=blank %}
          <p>{{product.metafields.warranty.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.care_instructions.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Care Instructions</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.care_instructions.text !=blank %}
          <p>{{product.metafields.care_instructions.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
    
    {% if product.metafields.returns.policy != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Returns</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.returns.policy !=blank %}
          <p>{{product.metafields.returns.policy}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.goretex.info != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Gore Tex Info</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.goretex.info !=blank %}
          <p>{{product.metafields.goretex.info}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.interface1.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Interface-1</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.interface1.text !=blank %}
          <p>{{product.metafields.interface1.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
    {% if product.metafields.video.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Video</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.video.text !=blank %}
          <p>{{product.metafields.video.text}}</p>
        {% endif %} 
      </div>
    {% endif %}
  
      {% if product.metafields.Personalisation.text != blank %}
      <div class="button mobile-accordion-button" role="button">
          <h5>Personalisation</h5>
      </div>
      <div class="slide mobile-accordion-slide">
        {% if product.metafields.Personalisation.text !=blank %}
          <p>{{product.metafields.Personalisation.text}}</p>
        {% endif %} 
      </div>
      {% endif %}
  
    </div>
  </div>
  <!--End mobile accordion content-->
  {% comment%}
  <div class="four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
  <dl class="accordion bottom-accordion">
  <dt><a href="/products/gift-card"><i class="fa fa-gift" aria-hidden="true"></i>Gift Vouchers<small class="right"><i class="fa fa-chevron-down" aria-hidden="false"></i></small></a></dt>
  <dd>
    Available from £10 to any value. The cards can be used online or at our shops in St Andrews.
    <a class="desc-link" href="#">Buy here <i class="fa fa-chevron-right" aria-hidden="false"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-wrench custom-icons" aria-hidden="true"></i>Golf Services<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We have a full custom fitting suite in St Andrews using state of the art Trackman technology where our qualified custom fitters will help and advise you on the most suitable fit and brand of clubs for your game.
    <a class="desc-link" href="/pages/custom-club-fitting-services">Book A Custom Fitting <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  	<a class="desc-link" href="/pages/club-rental-services"><br>Club Rental <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a class="desc-link" href="/pages/golf-workshop-repair-services"><br>Golf Workshop Services <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    </dd>
  <dt><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Old Course<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    The Old Course collection from Auchterlonies of St Andrews features a wide range of clothing, accessories and apparel with our unique Old Course St Andrews crest.
    <a class="desc-link" href="/collections/old-course-catalogue">Explore the range <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-truck custom-icons" aria-hidden="true"></i>Shipping Info<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We are currently offering free UK shipping on all purchases over £75 in basket for UK and EU customers and £100 for US and rest of the world customers. (Free shipping applies to non-discounted items)
    <a class="desc-link" href="#">Find out more <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  <dt><a href="#"><i class="fa fa-check-circle custom-icons" aria-hidden="true"></i> Authorised Stock<small class="right"><i class="fa fa-chevron-down" aria-hidden="true"></i></small></a></dt>
  <dd>
    We are Authorised Stockists of the finest golf brands. All available online and in our store here in St Andrews.
    <a class="desc-link" href="/pages/collections">Search our brands <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </dd>
  </dl>
  </div>
  {% endcomment %}
  
  <div class="description-accordion four columns omega {% if product.handle == "gift-card" %}hide{% endif %}">
    <div class="testingexample" id="accordion">
  
      <div class="button description-accordion-button active" role="button">
          <i class="fa fa-gift" aria-hidden="true"></i><h5>Gift Vouchers</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide first-slide">
        Available from £10 to any value. The cards can be used online or at our shops in St Andrews.
        <a class="desc-link" href="/products/gift-card"><br>Buy here <i class="fa fa-chevron-right" aria-hidden="false"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-wrench custom-icons" aria-hidden="true"></i><h5>Golf Services</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We have a full custom fitting suite in St Andrews using state of the art Trackman technology where our qualified custom fitters will help and advise you on the most suitable fit and brand of clubs for your game. We also have the latest clubs for hire and a full club repair service.
        <a class="desc-link" href="/pages/custom-club-fitting-services"><br>Book A Custom Fitting <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      	<a class="desc-link" href="/pages/club-rental-services"><br>Club Rental <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
        <a class="desc-link" href="/pages/golf-workshop-repair-services"><br>Golf Workshop Services <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-shopping-basket" aria-hidden="true"></i><h5>Old Course</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        The Old Course collection from Auchterlonies of St Andrews features a wide range of clothing, accessories and apparel with our unique Old Course St Andrews crest.
        <a class="desc-link" href="/collections/old-course-catalogue"><br>Explore the range <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-truck custom-icons" aria-hidden="true"></i><h5>Shipping Info</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We are currently offering free UK shipping on all purchases over £75 in basket for UK and EU customers and £100 for US and rest of the world customers. (Free shipping applies to non-discounted items)
        <a class="desc-link" href="#"><br>Find out more <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
  
      <div class="button description-accordion-button" role="button">
        <i class="fa fa-check-circle custom-icons" aria-hidden="true"></i><h5>Authorised Stock</h5><i class="fa fa-chevron-down" aria-hidden="true"></i>
      </div>
      <div class="slide description-slide">
        We are Authorised Stockists of the finest golf brands. All available online and in our store here in St Andrews.
        <a class="desc-link" href="/pages/collections"><br>Search our brands <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
         
{% render "custom-video" %}
  
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
  <script>
    window.ShopifyXR=window.ShopifyXR||function(){(ShopifyXR.q=ShopifyXR.q||[]).push(arguments)}
      {% assign models = product.media | where: 'media_type', 'model' | json %}
      ShopifyXR('addModels', {{ models }});
  </script>
{% endif %}

{% if section.blocks.size > 0 %}

  <div class="product__blocks dynamic-blocks is-flex is-flex-wrap is-justify-center" data-check-for-order="true">
    {% for block in section.blocks %}
      {%- assign animation = block.settings.animation | default: 'none' -%}
      {%- assign width = block.settings.width -%}

      <div id="shopify-section-{{ block.id }}" {{ block.shopify_attributes }} class="shopify-section product__block block__{{ block.type | downcase | replace: '_', '-' }}
        {% if block.type == 'featured_collection' %}
          jsFeaturedCollection
        {% elsif block.type == 'image_with_overlay' %}
          overlaid-header-option
        {% elsif block.type == 'featured_product' %}
          jsProduct
        {% elsif block.type == 'map' %}
          jsMap
        {% elsif block.type == 'video' %}
          jsVideo
        {% endif %}">
        {% if block.type == 'product_reviews' %}
          {% comment %} Product reviews {% endcomment %}
          {% include 'include-reviews', type: 'block' %}

        {% elsif block.type == 'image_with_overlay' %}
          {% comment %} Image with text overlay {% endcomment %}
          {% include 'include-image-with-text-overlay', type: 'block' %}

        {% elsif block.type == 'image_with_text' %}
          {% comment %} Image with text {% endcomment %}
          {% include 'include-one-image-with-text', type: 'block' %}

        {% elsif block.type == 'rich_text' %}
          {% comment %} Rich text {% endcomment %}
          {% include 'include-rich-text', type: 'block' %}

        {% elsif block.type == 'video' %}
          {% comment %} Featured video {% endcomment %}
          {% include 'include-video', type: 'block' %}

        {% elsif block.type == "blog" %}
          {% comment %} Blog {% endcomment %}
          {% include 'include-featured-blog', type: 'block' %}

        {% elsif block.type == 'featured_collection' %}
          {% comment %} Featured collection {% endcomment %}
          {% include 'include-featured-collection', type: 'block' %}

        {% elsif block.type == 'logo_list' %}
          {% comment %} Logo list {% endcomment %}
          {% include 'include-logo-list', type: 'block' %}

        {% elsif block.type == "divider" %}
          {% comment %} Divider {% endcomment %}
          {% include 'include-divider', type: 'block' %}

        {% elsif block.type == 'map' %}
          {% comment %} Map {% endcomment %}
          {% include 'include-map', type: 'block' %}

        {% elsif block.type == "page" %}
          {% comment %} Page {% endcomment %}
          {% include 'include-content-page', type: 'block' %}

        {% elsif block.type == 'recommended_products' %}
          {% comment %} Recommended products {% endcomment %}
          <section class="section is-width-{{ width }}" data-product-recommendations-container
              {% if animation != "none" %}
                data-scroll-class="{{ animation }}"
              {% endif %}>
          </section>

          {% style %}
            #shopify-section-{{ block.id }} {
              padding-top: {{ block.settings.padding_top }}px;
              padding-bottom: {{ block.settings.padding_bottom }}px;
              width: 95%;
              {% if block.settings.width == 'wide' %}
                width: 100%;
              {% endif %}
            }
          {% endstyle %}

        {% endif %}
      </div>

    {% endfor %}

  </div>
{% endif %}

{% comment %} Used to ensure product review app installs succesfully {% endcomment %}
<div class="is-hidden">
  <div id="shopify-product-reviews" data-id="{{ product.id }}">
    {{ product.metafields.spr.reviews }}
  </div>
</div>

If you have any further questions, please do reach out either here on the forum, or via private message/email. 

If you found this comment useful then please hit Like and Accept the Solution!
If you would like to hire us as Shopify experts, please reach out via email or private message.
Founder of Shopify agency - Accomplishify.com
Contact me on: community@accomplishify.com