Change sale banner Turbo Theme

Dani_Guti
Tourist
4 0 2

Hi!

I need to change the text of the "sale" bagde to an automatic discount percentage calculation. Im al ready edit the code of "product-template.liquid" for this:

{% if product.compare_at_price_max > product.price %}-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%

 

But it doesn't work and it only shows -0% always

Captura de pantalla 2021-07-08 a la(s) 19.16.24.png

Also on the home page nothing appears

Captura de pantalla 2021-07-08 a la(s) 19.16.44.png

I hope someone can help me please.

The theme i'm using is Turbo Theme and the url of the store is https://tienda-movilockers.myshopify.com/ 

Thank you!

KetanKumar
Shopify Partner
20534 2122 7742

@Dani_Guti 

sorry for that issue i have checked but i can that code but can you please try this

https://liquify.design/shopify-developer-guide-display-percentage-discount-shopify/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Dani_Guti
Tourist
4 0 2

Hi!

Thanks for your answer! but as i understand, the solution you share is for show the discount next to the price. And what i need is show the discount in the sale tag (the red sticker over the image) like this:

Captura de pantalla 2021-07-09 a la(s) 09.46.44.png

 

But mine shows nothing

Captura de pantalla 2021-07-08 a la(s) 19.16.44_2.jpg

 

 

KetanKumar
Shopify Partner
20534 2122 7742

@Dani_Guti 

sorry for that are added code but i can't see where do i check this 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Dani_Guti
Tourist
4 0 2

No problem!

mmm, i dont know if this will help but this is the entire code of my section "product-template.liquid1" after i added the new code to calculate the discount on the tag. The code for this is in line 32.

I hope you can help me to find the solution.

 

{% comment %}
** Product - default view **
- Product template
{% endcomment %}

{% if section.settings.product_breadcrumb == false %}
  {% style %}
    .breadcrumb__wrapper {
      display: none;
    }
  {% endstyle %}
{% endif %}

<div class="one-whole column product-{{ product.id }}">
  <div class="product product-name--{{ product.handle }} product_section js-product_section is-flex media-position--{{ section.settings.product_images_position }}" data-rv-handle="{{ product.handle }}">

    <div class="three-fifths columns medium-down--one-whole product__images">
      {% render 'product-images',
              product: product,
              video_looping: section.settings.video_looping,
              set_product_height: section.settings.set_product_height
      %}
    </div>

    <div class="two-fifths columns medium-down--one-whole">
      {%- assign collection_handles = product.collections | map: 'handle' -%}
      {%- assign variant = product.selected_or_first_available_variant -%}

      {% if product.available %}
        {% if settings.sale_banner_enabled and product.compare_at_price > product.price %}
          <div class="sale_banner_product">{{ 'collections.general.sale' | t }}
    {% if product.compare_at_price_max > product.price %}-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
       </div>
        {% endif %}
      {% endif %}
{% endif %}
      {% if collection_handles contains 'new' %}
        <div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
      {% endif %}
      {% if collection_handles contains 'pre-order' %}
        <div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
      {% endif %}

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

      {% if variant.sku != blank and section.settings.display_sku %}
        <p class="sku">
          <span>{{ variant.sku }}</span>
        </p>
      {% endif %}
      <h1 class="product_name">{{ product.title }}</h1>
      {% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
        <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endif %}
      <div class="feature_divider"></div>

      {%- assign product_tags = product.tags | join: ' ' -%}
      {% if product_tags contains 'meta-size-chart-' %}
        {% for tag in product.tags %}
          {% if tag contains 'meta-size-chart-' %}
            <a href="javascript&colon;;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
            {% render 'popup-size-chart', product_id: product.id %}
          {% endif %}
        {% endfor %}
      {% elsif settings.size_chart != blank %}
        <a href="javascript&colon;;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
      {% endif %}

      {% if collection_handles contains 'coming-soon' %}
        <p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
      {% else %}
        <div class="modal_price">
          {% unless product.available == false and settings.display_price == false %}
            <div class="price__container price__container--display-price-{{ settings.display_price }} {% if settings.display_price %}has-margin-right{% endif %}">
              <span content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
                <span class="current_price">
                  {% if variant.price > 0 %}
                    <span class="money">{% render 'price-element', price: variant.price %}</span>
                  {% else %}
                    {{ settings.free_price_text }}
                  {% endif %}
                </span>
              </span>
              <span class="was_price">
                {% if variant.price < variant.compare_at_price %}
                  {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{%- assign compare_at = variant.compare_at_price | minus: variant.price -%}{% render 'price-element', price: compare_at %}</span>)
                {% endif %}
              </span>
              {% if section.settings.display_savings %}
                <span class="sale savings">
                  {% if variant.price < variant.compare_at_price %}
                    {{ 'products.product.savings' | t }}  {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{%- assign compare_at = variant.compare_at_price | minus: variant.price %}{% render 'price-element', price: compare_at -%}</span>)
                  {% endif %}
                </span>
            {% endif %}
            </div>
          {% endunless %}
          <div class="sold-out__container">
            <span class="sold_out">{% if variant.available == false %}{{ settings.sold_out_text }}{% endif %}</span>
          </div>
        </div>
      {% endif %}

      {% if section.settings.product_description_position == "top" %}
        {% if product.description != blank %}
          <div class="description">
            {{ product.description | split: '<!-- split -->' | first }}
          </div>
        {% endif %}
      {% endif %}

      {% unless collection_handles contains 'coming-soon' %}
        {% render 'product-form',
                context: 'product',
                collection_handles: collection_handles
        %}
        {% render 'product-notify-me', product: product %}
      {% endunless %}

      {% if section.settings.product_description_position == "bottom" %}
        {% if product.description != blank %}
          <div class="description bottom">
            {{ product.description | split: '<!-- split -->' | first }}
          </div>
        {% endif %}
      {% endif %}

      {% if section.settings.review_position == "next_to_gallery" %}
        <div class="shopify-reviews reviewsVisibility--{{ settings.enable_shopify_review_comments }}">
          <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
        </div>
      {% endif %}

      {% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
        <div class="product_links">
          {% if section.settings.display_collections %}
            <p>
              <span class="label">{{ 'products.product.collections' | t }}:</span>
              <span>
                {% for col in product.collections %}
                  <a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
                {% endfor %}
              </span>
            </p>
          {% endif %}

          {% if section.settings.display_type %}
            <p>
              <span class="label">{{ 'products.product.product_types' | t }}:</span>
              <span>{{ product.type | link_to_type }}</span>
            </p>
          {% endif %}

          {% if section.settings.display_tags %}
            <p>
              {% for tag in product.tags %}
                {% if forloop.first %}
                  <span class="label">{{ 'products.product.tags' | t }}:</span>
                {% endif %}

                {% unless tag contains 'meta-' %}
                  <span>
                    <a href="{{ routes.collections_url }}/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                    </span>
                {% endunless %}
              {% endfor %}
            </p>
          {% endif %}
        </div>
      {% endif %}

      <div class="meta">
        {% if section.settings.display_social_buttons %}
          {% render 'social-buttons', context: 'product' %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if product.description contains "<!-- split -->"  %}
  <br />
  <div class="one-whole column">
    <div class="description">
      {{ product.description | split: '<!-- split -->' | last }}
    </div>
  </div>
{% endif %}

{% if section.settings.review_position == "below_gallery" %}
  <div class="shopify-reviews reviewsVisibility--{{ settings.enable_shopify_review_comments }}">
    <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
  </div>
{% endif %}

{% if section.settings.display_recently_viewed %}
  {% include 'include-recently-viewed' %}
{% endif %}

<div data-product-recommendations-container></div>

{% if section.settings.set_product_height %}
  {% style %}
    .gallery-wrap model-viewer {
      min-height: {{ section.settings.product_height }}px;
    }

    .gallery-wrap .product_gallery img,
    .gallery-wrap .product_gallery .plyr--html5 video,
    .gallery-wrap .product_gallery .plyr--youtube {
      max-height: {{ section.settings.product_height }}px;
    }
  {% endstyle %}
{% endif %}

{% 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 %}

{% schema %}
  {
    "name": "Product",
    "class": "shopify-section--product-template has-sidebar-option",
    "settings": [
      {
        "type": "header",
        "content": "Product gallery"
      },
      {
        "type": "checkbox",
        "id": "product_thumbs",
        "label": "Show thumbnails",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "gallery_arrows",
        "label": "Show arrows",
        "info": "Only applies to desktop",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "enable_product_lightbox",
        "label": "Enable lightbox",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "activate_zoom",
        "label": "Magnify product images on hover"
      },
      {
        "type": "range",
        "id": "slideshow_speed",
        "label": "Gallery speed",
        "min": 0,
        "max": 6,
        "unit": "sec",
        "default": 0,
        "info": "Set to 0 to disable autoplay."
      },
      {
        "type": "select",
        "id": "slideshow_animation",
        "label": "Transition",
        "options": [
          {
            "value": "slide",
            "label": "Slide"
          },
          {
            "value": "fade",
            "label": "Fade"
          }
        ],
        "default": "slide"
      },
      {
        "type": "select",
        "id": "thumbnail_position",
        "label": "Thumbnails",
        "default": "bottom",
        "options": [
          {
            "value": "bottom",
            "label": "Bottom"
          },
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_thumbnail_slider",
        "label": "Enable thumbnail slider",
        "default": true
      },
      {
        "type": "header",
        "content": "Product information"
      },
      {
        "type": "checkbox",
        "id": "display_vendor",
        "label": "Show vendor"
      },
      {
        "type": "checkbox",
        "id": "product_breadcrumb",
        "label": "Show breadcrumb links"
      },
      {
        "type": "checkbox",
        "id": "display_sku",
        "label": "Show SKU"
      },
      {
        "type": "checkbox",
        "id": "display_collections",
        "label": "Show collections"
      },
      {
        "type": "checkbox",
        "id": "display_type",
        "label": "Show type"
      },
      {
        "type": "checkbox",
        "id": "display_tags",
        "label": "Show tags"
      },
      {
        "type": "checkbox",
        "id": "display_social_buttons",
        "label": "Show social media share icons",
        "default": true
      },
      {
        "type": "radio",
        "id": "product_description_position",
        "label": "Description position",
        "options": [
          {
            "value": "top",
            "label": "Above product form"
          },
          {
            "value": "bottom",
            "label": "Below product form"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "display_savings",
        "label": "Show price savings",
        "default": true
      },
      {
        "type": "header",
        "content": "Dynamic checkout button"
      },
      {
        "type": "checkbox",
        "id": "show_payment_button",
        "label": "Show dynamic checkout button",
        "default": true,
        "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
      },
      {
        "type": "header",
        "content": "Media",
        "info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
      },
      {
        "type": "radio",
        "id": "product_images_position",
        "label": "Media position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "set_product_height",
        "label": "Set height of product media",
        "default": false
      },
      {
        "type": "range",
        "id": "product_height",
        "label": "Product media height",
        "min": 200,
        "max": 800,
        "step": 10,
        "default": 500,
        "unit": "px"
      },
      {
        "type": "checkbox",
        "id": "video_looping",
        "label": "Enable video looping",
        "default": false
      },
      {
        "type": "header",
        "content": "Product reviews"
      },
      {
        "type": "paragraph",
        "content": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)"
      },
      {
        "type": "checkbox",
        "id": "enable_shopify_product_badges",
        "label": "Display star rating on product",
        "default": false
      },
      {
        "type": "radio",
        "id": "review_position",
        "label": "Reviews position",
        "default": "next_to_gallery",
        "options": [
          {
            "value": "next_to_gallery",
            "label": "In product description area"
          },
          {
            "value": "below_gallery",
            "label": "Below image\/description"
          }
        ]
      },
      {
        "type": "header",
        "content": "Recently viewed products"
      },
      {
        "type": "paragraph",
        "content": "To test the recently viewed products, view your online store outside of the Editor and visit multiple product pages. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/115008765228)"
      },
      {
        "type": "checkbox",
        "id": "display_recently_viewed",
        "label": "Show recently viewed products",
        "default": false
      },
      {
        "type": "text",
        "id": "rv_title",
        "label": "Title",
        "default": "Recently Viewed Items"
      },
      {
        "type": "radio",
        "id": "rv_products_style",
        "label": "Layout",
        "default": "grid",
        "options": [
          {
            "value": "slider",
            "label": "Slider"
          },
          {
            "value": "grid",
            "label": "Grid"
          }
        ]
      },
      {
        "type": "range",
        "id": "rv_max_display",
        "label": "Products limit",
        "min": 3,
        "max": 10,
        "step": 1,
        "default": 4
      },
      {
        "type": "range",
        "id": "rv_per",
        "label": "Products per row",
        "min": 3,
        "max": 5,
        "step": 1,
        "default": 4
      }
    ],
    "default": {
      "settings": {

      }
    }
  }
{% endschema %}

 

Thanks!

0 Likes