Tutorial: Displaying Saved Amount/Percentage on the Sale Badge

This tutorial goes through displaying the saved amount in the sale badge of your product. Following this tutorial will see your product sale badge change from this:

To this:

Note:

If you’re using a free theme from Shopify, then our Support team might be able to help you with this tutorial. Although Shopify can help you with many customizations, some kinds of customizations aren’t supported.

If you’re using a paid theme, then your theme was made by a third-party developer and Shopify’s Support team can’t help you with it. If you need help customizing a paid theme, then consider hiring a Shopify Expert. Similar to free themes, some kinds of customizations aren’t supported because of limitations associated with the theme or Shopify admin.

The following tutorials are tested on themes published in Oct 2020

Debut

1. Open ‘product-price-listing.liquid’ if your theme version does not have this, open ‘product-price.liquid’.

2. Find {{ ‘products.product.on_sale’ | t }}, replace this with the code below.

To show savings amount:

{% if template == 'product' %}
      {{ 'products.product.on_sale' | t }}
    {% else %}
      {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}

      Save up to {{ saved_amount }}
    {% endif %}

To show saving percentage:

{% if template == 'product' %}
      {{ 'products.product.on_sale' | t }}
    {% else %}      
      {% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 

      Save up to {{ percentage }}%
    {% endif %}

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Supply

Note: In order to show a sale badge, please ensure you have this enabled in your theme settings. You can find this setting under 'Online store > Themes > Customize’, go to ‘Collection pages’ and check ‘Show saved amount’.

1. To edit the collection page, open ‘price-sale.liquid’.

2. Find {{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}, replace this with either snippets of code below.

To show savings amount:

{% assign amount = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% else %}
  {% for variant in product.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% endif %}
{% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
Save up to {{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}
    {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
  {% else %}
    {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
{% endif %}

Save up to {{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

Brooklyn

Part 1: Editing ‘product-grid-item.liquid’.

1. Open ‘product-grid-item.liquid’.

2. Find {{ ‘products.general.save_html’ | t: saved_amount: saved_amount }} and replace this with either snippets of code below:

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}

      Save up to 
{{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to 
{{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Part 2 (optional): editing badge color:

If your badges overlap with the product image, you might find your badge unreadable. For example:

You’ll want to edit the badge color by following the guide here.

## Boundless

Part 1: editing sale badge content

1. To edit the collection page, open ‘product-grid-item.liquid’. To edit the search result page, open ‘search-template’.

2. Find {{ ‘products.product.on_sale’ | t }} and replace this with the code below:

To show savings amount:

{% assign amount = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% else %}
  {% for variant in product.variants %}
    {% assign saving = variant.compare_at_price | minus: variant.price %}
    {% assign amount = saving | at_least: amount %}
  {% endfor %} 
{% endif %}
{% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
Save up to 
{{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}
    {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
  {% else %}
    {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
{% endif %}
Save up to 
{{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Part 2 (optional): editing sale badge position:

Depending on how long your badge text is, you may see the text being cut off. To fix this, follow these steps:

1. Open ‘theme.scss.liquid’.

2. Paste either of these code snippets of code on the bottom of the file:

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to 
{{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to 
{{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Simple

1. Open ‘product-grid-item.liquid’.

2. Find {{ ‘products.product.on_sale’ | t }} and replace this with either snippets of code below:

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to 
{{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to 
{{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Part 2 (optional): Editing Sale Badge Position:

Depending on how long your badge text is, you may see your text being cut off or looking uneven. To fix this, follow these steps:

1. Open ‘theme.liquid’.

2. Find add this code right above it:


You may need to change the padding and width under .badge span depending on the length of the text.

4. To change the position of the badge, paste the following code above {% endunless %} from step 3.

.badge--sale {
  top: -10px;
  right: -15px;
}

Adjust the numbers accordingly.

5. Click Save.

Venture

1. Open ‘product-card.liquid’.

2. Find {{ ‘products.product.on_sale’ | t }} and replace this with either snippets of code below:

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to {{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to {{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Express

1. Open ‘product-price-listing.liquid’.

2. Find {{ ‘products.product.on_sale’ | t }} and replace this with the code below.

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to {{ saved_amount }}

To show saving percentage:

{% assign percentage = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
      {% endfor %} 
      Save up to {{ percentage }}%

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Narrative:

1. Open ‘product-card.liquid’.

2. Find {{ ‘products.product.on_sale’ | t }} and replace this with the code below:

To show savings amount:

{% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}
      Save up to 
{{ saved_amount }}

The code above will generate a text “Save up to $x” or “Save up to x%”. To change the messaging, you can edit the words “Save up to”

3. Click Save.

Part 2 (optional): Editing Sale Badge Position:

Depending on how long your badge text is, you may see the text being cut off. To fix this please follow these steps:

1. Open ‘theme.scss.liquid’.

2. Paste this code on the bottom of the file:

.card__badge {
  width: 220px;
  padding-top: 45px;
}

You may need to change the numbers above depending on the length of the text.

3. Click Save.

Hi There

Thanks for this. I am using the Debut template. This works for showing a saved percentage when I view products in list/grid form, but when I select that particular product to view it singularly, it goes back to just “Sale” without showing “Save up to X%”. How can I adjust it so it always shows the percentage saving wherever that particular product is viewed?

Hey there, @Luvita

Great question! Here are some additional steps to achieve this:

  1. Open ‘product-price.liquid’ and find {{ ‘products.product.on_sale’ | t }}, replace this with the code below:
{% assign percentage = 0 %}
{% for variant in product.variants %}
  {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
  {% assign percentage = saving | at_least: percentage %}
{% endfor %} 
Save up to {{ percentage }}%
  1. Click Save.

Let me know how this goes and if there is anything else I can assist you with, I’m happy to help!

All the Best,

Bo

Thanks Bo, this works perfectly! :slightly_smiling_face:

  • Luvita Team

I am having quantity variants with different price options the above codes does not show percentage off for differently for different prices but shows up to % off on all variants. Is there a way to provide % off for different variants

The code works perfectly, but i need to reduce the font size of it, please can you show me css code or something to achieve this?

Hey there, @ethenblack and @THERAHULSINGLA . If you could please confirm which theme you are using I will be more than happy to check in with our themes team regarding this.

All the Best,

Bo

Debut theme

Hey there, @THERAHULSINGLA

I was able to check in with the team regarding this. This tutorial is for changing the Sale sign on the collection page, specifically. It was not built to change on the product page based on the variant selected. We would suggest hiring a Shopify Expert to make that change for you.

All the Best,

Bo

I actually managed to reduce the the font size and change the color but now I notice that I’m having other issues as mentioned in the screenshot below

I should not have any discount showed next to the price when the product is not on sale

https://evidence-sleepwear.com/

https://ex7s4u9mq3mvxuin-41495658649.shopifypreview.com/products_preview?preview_key=147cbc252ebd9221dd263acc71ed52f9

Here is the entire code

{%- liquid
  assign no_sold_out = product.available
  if no_sold_out 
   assign remove_soldout = settings.remove_sold_out 
  else 
   assign remove_soldout = false  
  endif
assign pr_variants = product.variants 
assign variants_size = pr_variants.size 
assign selected_variant = product.selected_variant
assign pr_curent = settings.pr_curent
if pr_curent == '2' 
  assign current_variant = selected_variant |default: pr_variants.first 
  if remove_soldout and current_variant.available == false and no_sold_out 
    assign current_variant = product.first_available_variant 
  endif
else 
  assign current_variant = product.selected_or_first_available_variant 
endif
assign default = product.has_only_default_variant
assign on_sale = false
if current_variant.compare_at_price > current_variant.price 
  assign on_sale = true 
endif
assign ck_external = false
assign pr_metafields = product.metafields
assign pr_metafields_meta = pr_metafields.meta
assign external = pr_metafields.external 
assign on_link = external.on_link  
if on_link != blank 
  assign ck_external = true 
  assign title = on_link | split:'|||' | first | strip
  assign link = on_link | split:'|||' | last | strip 
elsif external != blank 
  assign ck_external = true 
  assign title = external | first | first  
  assign link = external | first | last 
endif
assign ck_inventory = settings.ck_inventory
if template.suffix == "quick_view" 
  assign call_cl = '_qv' 
else 
  assign call_cl = '_ppr' 
endif
assign des_pr_layout = settings.des_pr_layout
assign pr_incoming_mess = settings.pr_incoming_mess
assign pid = product.id
assign hd_up = 'group-' |append:pid
assign nav_up = linklists[hd_up].links | where:'type','product_link'
assign nav_up_size = nav_up.size
assign price_varies = product.price_varies | default:product.compare_at_price_varies
assign pr_tags = product.tags
assign style_tag_arr = pr_tags | where:'stylet4_'
assign style_tag = style_tag_arr | first | remove:'stylet4_'
assign nav_style = linklists[style_tag].links | where:'type','product_link' 
assign nav_style_size = nav_style.size

assign inventory_quantity = current_variant.inventory_quantity
assign inventory_management = current_variant.inventory_management
if inventory_quantity <= 0  and inventory_management == 'shopify'
  assign classdn1 = 'dn' 
  assign classdn2 = ''
  assign ck_preoder = true
else 
  assign classdn1 = '' 
  assign classdn2 = 'dn'
  assign ck_preoder = false
endif
assign PR_no_pick = false
if pr_curent == '1' and variants_size > 1 and selected_variant == blank
  assign PR_no_pick = true
endif
assign locale_url = product.url | split:'/products/' | first -%}

{%- for block in section.blocks -%}
   {%- case block.type -%}

      {%- when 'title' -%}
        {%- if call_cl == "_ppr" -%}
        # {{product.title}}

 

        {%- else -%}
        # {{product.title}}
        {%- endif -%}

      {%- when 'pricereview' -%}
        
           

            {%- if nav_up_size == 0 and current_variant.unit_price_measurement -%}
                {%- if price_varies -%}{%- endif -%}
                {%- if on_sale -%}<del>{{ current_variant.compare_at_price  | money }}</del><ins>{{ current_variant.price | money }}</ins>{%- else -%}{{ current_variant.price | money }}{%- endif -%}
                {%- if price_varies -%}{%- endif -%}
               {%- capture unit_price_base_unit -%}
                
                  {%- if current_variant.unit_price_measurement -%}
                    {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                      {{- current_variant.unit_price_measurement.reference_value -}}
                    {%- endif -%}
                    {{ current_variant.unit_price_measurement.reference_unit }}
                  {%- endif -%}
                
               {%- endcapture -%}
               {{ current_variant.unit_price | money }}/{{- unit_price_base_unit -}}
            {%- elsif nav_up_size == 0 -%}
               {%- if price_varies -%}
                   {%- if block.settings.price == '1' -%}{{ product.price_min | money }} – {{ product.price_max | money }}
                   {%- elsif block.settings.price == '2' -%}{{ 'products.product.from' | t }} {{ product.price_min | money }}
                   {%- else -%}
                     {%- if on_sale -%}<del>{{ current_variant.compare_at_price | money }}</del> <ins>{{ current_variant.price | money }}</ins>
                   {%- else -%}{{ current_variant.price | money }}{%- endif -%}
                     {%- endif -%}
               {%- elsif on_sale -%}<del>{{ current_variant.compare_at_price | money }}</del> <ins>{{ current_variant.price | money }}</ins>
               {%- else -%}{{ current_variant.price | money }}{%- endif -%}
               
            {%- else -%}
              {%- if on_sale -%}
              {{ product.price | money }}–{{ product.compare_at_price | money }}
              {%- else -%}
              {{ product.price | money }}
              {%- endif -%}
            {%- endif -%}
                   {% assign percentage = 0 %}
{% if template contains 'search' %}
  {% for variant in item.variants %}
    {% assign saving = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}
    {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
  {% else %}
    {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
      {% assign percentage = saving | at_least: percentage %}
    {% endfor %} 
{% endif %}
{{ percentage }}% de réduction
           

           {%- if block.settings.rating -%}
           
              {%- case settings.app_review -%}              
                  {%- when '1' -%}
                     
                  {%- when '2' -%}
                     {%- if call_cl == '_qv' -%}
                     

                     {%- else -%}
                     

                     {%- endif -%}
                  {%- when '3' -%}
                     {%- if call_cl == '_qv' -%}
{%- else -%}{%- endif -%}
                  {%- when '4' -%}
                     

                  {%- when '5' -%}
                     {%- capture the_snippet_review_avg %}{% render 'ssw-widget-avg-rate-profile' %}{% endcapture -%}
                     {%- unless the_snippet_review_avg contains 'Liquid error' %}{{ the_snippet_review_avg }}{% endunless -%}
                  {%- else -%}
                    {%- render 'review_pr_other' -%}

              {%- endcase -%}
           
           {%- endif -%}
        

        {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
          
            {%- if shop.taxes_included -%}
              {{ 'products.product.include_taxes' | t }}
            {%- endif -%}
            {%- if shop.shipping_policy.body != blank -%}
              {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
            {%- endif -%}
          

        {%- endif -%}

      {%- when 'des' -%}
        {%- if pr_tags contains 'hidet4_des' %}{% continue %}{% endif -%}
        {%- if block.settings.des == '1' and settings.des_pr_layout != '1' and call_cl != '_qv' %}{% continue %}{% endif -%}
        
          {%- assign length = block.settings.length | default: 31 -%}
          {%- assign page_content = pages[block.settings.page].content -%}
          {%- capture readm -%}
            {%- if block.settings.readm and call_cl != "_qv" %} {{block.settings.readm_txt}}{% endif -%}
          {%- endcapture -%}

           {%- if block.settings.des == '1' -%}
             {{- product.description -}}

           {%- elsif pr_metafields_meta.description_excerpt != blank -%}
              

{{- pr_metafields_meta.description_excerpt -}}{{readm}}

           
           {%- elsif page_content.size > 0 -%}
               {{- page_content -}}{{readm}}
           
           {%-else-%}
             

{{- product.description | strip_html | truncatewords: length -}}{{readm}}

           
           {%-endif-%}
        

     {%- when 'frm' -%}
        
           {%- if nav_up_size == 0 -%}
              

                 {%- if nav_style_size > 0 %}{% render 'choose_style',call_cl:call_cl,default:default,style_tag_arr:style_tag_arr,style_tag:style_tag,nav_style:nav_style,pid:pid %}{% endif -%}

                 {%- assign id_frm = 'cart-form' | append:call_cl -%}{%- assign cl_frm = 'nt_cart_form variations_form variations_form' | append:call_cl -%}
                 {%- form 'product', product, id: id_frm, data-productid: pid, class: cl_frm -%}
                    {%- if no_sold_out and settings.enable_sub_reCharge %}{% include 'subscription-product' %}{% endif -%} 
                    {%- if settings.enable_infiniteoptions %}

{% endif -%} 
                    {%- if default -%}
                       
                       

                       {%- if pr_incoming_mess and inventory_management and inventory_quantity <= 0 and current_variant.incoming -%}
                           {%- assign idate = current_variant.next_incoming_date | date: format: settings.date_in -%}
                           {{ 'products.product.will_not_ship_until_html' | t: date:idate }}

                       {%- endif -%}
                       {{-product.metafields.meta.customProperty -}}
                    {%- else -%}
                       

                       {%- case block.settings.swatch_design -%}
                          {%- when '1' -%}{%- render 'swatch',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '2' -%}{%- render 'swatch_2',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '3' -%}{%- render 'swatch_radio',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '4' -%}{%- render 'swatch_radio_2',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '5' -%}{%- render 'swatch_radio_3',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '6' -%}{%- render 'swatch_radio_4',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '7' -%}{%- render 'swatch_rectangle',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '8' -%}{%- render 'swatch_rectangle_2',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '9' -%}{%- render 'swatch_simple',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                          {%- when '10' -%}{%- render 'swatch_simple_2',product:product,block:block,remove_soldout:remove_soldout,call_cl:call_cl,locale_url:locale_url -%}
                       {%- endcase -%}
                       {{-product.metafields.meta.customProperty -}}
                        

                       {%- if pr_incoming_mess -%}
                          {%- if inventory_quantity <= 0 and current_variant.incoming and variants_size < 2 and inventory_management  -%}
                              {%- assign idate = current_variant.next_incoming_date | date: format: settings.date_in -%}
                              {{ 'products.product.will_not_ship_until_html' | t: date:idate }}

                          {%- else -%}
                              {{ 'products.product.will_not_ship_until_html' | t: date:'[19041994]' }}

                          {%- endif -%}
                       {%- endif -%}
                    {%- endif -%}

                   {%- if price_varies and current_variant.unit_price_measurement -%}
                        
                           
                            {%- if on_sale -%}<del>{{ current_variant.compare_at_price  | money }}</del><ins>{{ current_variant.price | money }}</ins>{%- else -%}{{ current_variant.price | money }}{%- endif -%}
                           
                           {%- capture unit_price_base_unit -%}
                            
                              {%- if current_variant.unit_price_measurement -%}
                                {%- if current_variant.unit_price_measurement.reference_value != 1 -%}
                                  {{- current_variant.unit_price_measurement.reference_value -}}
                                {%- endif -%}
                                {{ current_variant.unit_price_measurement.reference_unit }}
                              {%- endif -%}
                            
                           {%- endcapture -%}
                           {{ current_variant.unit_price | money }}/{{- unit_price_base_unit -}}
                        
                   {%- elsif price_varies and on_sale -%}<del>{{ current_variant.compare_at_price | money }}</del> <ins>{{ current_variant.price | money }}</ins>
                   {%- elsif price_varies -%}{{ current_variant.price | money }}{%- endif -%}
                    
                    {%- assign PR_buy_pr = false -%}
                    {%- if block.settings.enable_payment_btn and ck_external == false and no_sold_out -%}
                    {%- assign PR_buy_pr = true -%}
                    {%- endif -%}
                    

                       

                          {%- if ck_external -%}{{title}}{%- render 'nt_add_w',class:"order-3",tooltip:"ttip_nt tooltip_top_left" -%}
                          {%- elsif no_sold_out == false -%}
                                {{'products.product.outofstock' | t}}
                                {%- render 'nt_add_w',tooltip:"ttip_nt tooltip_top_left" -%}
                          {%- else -%}
                             
 
                                
                                

                             
 
                             {{'products.product.outofstock' | t}}
                             {%- render 'nt_add_w',class:"order-3",tooltip:"ttip_nt tooltip_top_left" -%}
                             
                          {%- endif -%}
                       

                       {%- if PR_buy_pr -%}{{- form | payment_button -}}{%- endif -%} 
                    

                 {%- endform -%}

                {%- assign uavailable_v = pr_variants | where: "available", false -%}
                {%- if settings.use_notify_me and uavailable_v.size > 0 -%}
                 
                    {%- form 'contact',class:'frm_notify w_100' -%}
                           {%- assign formId = 'ContactForm'| append:call_cl | append:current_variant.id -%}
                           {%- assign post_message = 'products.product.success_notify_me' -%}
                           {%- render 'form-status', form: form, form_id: formId, success_message: post_message -%}
                           

{{ 'products.product.title_notify_me' | t }}

                           
                             {%- if customer and customer.name != blank -%}
                             

                               
                             

                             {%- endif -%}
                             
                               
                               
                             

                             
                               
                               
                             

                           

                           
                           
                    {%- endform -%}
                 

                 {%- endif -%}

              

           {%- else -%}
              {%- comment %}product group{% endcomment -%}
              {%- render 'grouped_product',block:block,nav_up:nav_up,call_cl:call_cl,pid:pid -%}
           {%- endif -%}
        

      {%- when 'store_avai' %}{% if no_sold_out == false %}{% continue %}{% endif -%}
         
        

      {%- when 'size' -%}
        
           {%- if block.settings.size_chart != '1' -%}
              {%- assign ck_s = true -%}
              {%- assign sc_type = block.settings.sc_type -%}
              {%- assign handle_size = pr_metafields_meta.page_size_chart | default:collection.metafields.meta.page_size_chart -%}
              {%- assign page_size = pages[handle_size] -%}
              {%- assign page_size_2 = pages[block.settings.page] -%}
              {%- assign img_meta = pr_metafields_meta.img_size_chart | default:collection.metafields.meta.img_size_chart -%}
              {%- assign image = images[img_meta] -%}
              {%- assign image_2 = block.settings.image -%}

              {%- if block.settings.size_chart == '2' -%}
                 {%- assign ck_s = false -%}
                 {%- assign size_ck = block.settings.size_ck | append:',size,sizes,Größe' -%}{%- assign get_size = size_ck | downcase | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq -%}
                 {%- for option in product.options_with_values -%}{%- assign name = option.name | downcase -%}{%- if get_size contains name -%}{%- assign ck_s = true -%}{%- break -%}{%- endif -%}{%- endfor -%}
              {%- endif -%}
             
              {%- if sc_type == '1' and ck_s and page_size != blank -%}

                {{ 'products.product.product_size_guide' | t }}

              {%- elsif sc_type == '2' and image != blank and ck_s -%}

                {{ 'products.product.product_size_guide' | t }}

              {%- elsif sc_type == '1' and ck_s and page_size_2 != blank -%}
                
                {{ 'products.product.product_size_guide' | t }}
               
              {%- elsif sc_type == '2' and ck_s and image_2 != blank -%}

                {{ 'products.product.product_size_guide' | t }}

              {%- endif -%}

           {%- endif -%}

           {%- assign page_delivery = pages[block.settings.page_dr] %}{% if block.settings.delivery and page_delivery != blank -%}
           {{ 'products.product.delivery_return' | t }}
           {%- endif -%}
           
           {%- comment -%}
           {%- assign page_ask = pages[block.settings.page_ask] %}{% if block.settings.ask and page_ask != blank -%}
           {{ 'products.product.ask_question' | t }}
           {%- endif -%}
           {%- endcomment -%}
           {%- if block.settings.ask -%}
           {{ 'products.product.ask_question' | t }}
           {%- endif -%}
           
        

      {%- when 'meta' -%}
        {%- assign ck_meta = false -%}
        {%- capture meta -%}
          {%- if block.settings.show_pr_vendor and product.vendor != blank -%} {%- assign ck_meta = true -%}
          {{ 'products.product.product_vendor' | t }} {{ product.vendor | link_to_vendor }}
          {%- endif -%}
          {%- if block.settings.show_sku -%} {%- assign ck_meta = true -%}{%- if current_variant.sku != blank -%}{%-endif-%}
          {{ 'products.product.product_sku' | t }} {{current_variant.sku}}{{ 'products.product.na' | t }}
          {%- endif -%}
          {%- if block.settings.show_available -%} {%- assign ck_meta = true -%}
          {{ 'products.product.available' | t }} {{ 'products.product.in_stock' | t }}{{ 'products.product.in_stock_pre_oder' | t }}{{ 'products.product.outofstock' | t }}
          {%- endif -%}
          {%- if product.collections.size > 0 and block.settings.show_category_product -%} {%- assign ck_meta = true -%}
          {{ 'products.product.product_category' | t }}
          {% for collection in product.collections -%}{{ collection.title | link_to: collection.url }}{%- if forloop.last == false -%}, {% endif -%}{%- endfor -%}
          
          {%- endif -%}
          {%- if pr_tags.size > 0 and block.settings.show_tag_product and product.collections.size > 0 -%} {%- assign ck_meta = true -%}
          {{ 'products.product.product_tag' | t }}
           {% for tag in pr_tags -%}
             {%- if tag contains 't4_' or tag contains 'badge_' %}{% continue %}{% endif -%}
             {{ tag | remove:'type ' | remove:'Type ' }}{%- unless forloop.last -%}, {% endunless -%}
           {%- endfor -%}
          {%- endif -%}
        {%- endcapture -%}
        {%- if ck_meta -%}
{{- meta -}}
{%- endif -%}

      {%- when 'social' %}{% if des_pr_layout == '2' and call_cl == '_ppr' or settings.social_pr == false %}{% continue %}{% endif -%}
        
          {%- if settings.share_source == '1' %}{%- render 'social-sharing' -%}
          {%- elsif settings.share_source == '3' %}
              {% capture the_snippet_share %}
                {% render  'ssw-widget-share-links' with 1 %}
              {% endcapture %}
              {% unless the_snippet_share contains 'Liquid error' %}
                {{ the_snippet_share }}
              {% endunless %}
          {%- else -%}
          

          {% endif %}
        

      
      {%- when 'img' -%}
        
          {%- if block.settings.mess -%}

{{block.settings.mess}}

{%- endif -%}
          {%- assign image = block.settings.image -%}
          {%- if block.settings.source == '1' and image != blank  -%}{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              
          {%- else block.settings.svg -%}
              {%- assign arr = block.settings.svg | remove: ' ' | split:"," -%}
            
            {%- for img in arr -%}
![{{img | replace:'_',' '}}|38x24](upload://dxGKGd01WSI1rwrRlBwVu6FMUyF.svg)
{%- endfor -%}
          {%- endif -%}
        

      {%- when 'countdown' -%}
         {%- assign meta = pr_metafields_meta.countdown -%}
         {%- if meta != blank -%}{%- assign _meta = meta | remove: "/" | remove: ":" | remove: " " -%}

           
             {%- if block.settings.mess != blank -%}
                

                {%- if block.settings.icon != '1' -%}
                  {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
                {%- endif -%}
                {{block.settings.mess}}

             {%- endif -%}
             

             {{block.settings.day}}{{block.settings.hr}}{{block.settings.min}}{{block.settings.sec}}
           

         {%- elsif block.settings.stock_time != blank or pr_metafields_meta.countdown_day != blank -%}

           {%- if block.settings.source == '2' -%}{%- unless pr_tags contains 'has_stock_countdown' -%}{%- continue -%}{%- endunless -%}{%- endif -%}
           
             {%- if block.settings.mess != blank -%}
                

                {%- if block.settings.icon != '1' -%}
                  {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
                {%- endif -%}
                {{block.settings.mess}}

             {%- endif -%}
             

             {{block.settings.day}}{{block.settings.hr}}{{block.settings.min}}{{block.settings.sec}}
           

         {%- endif -%}

      {%- when 'stock' -%}
          {%- if block.settings.mess == blank or no_sold_out == false -%}{%- continue -%}{%- endif -%}
          {%- assign arr = block.settings.mess | split:'[stock_number]' -%}
          
           

            {%- if block.settings.icon != '1' -%}
              {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
            {%- endif -%}
            {{arr[0]}}  {{arr[1]}}

           {%- if block.settings.progress -%}
           

           {%- endif -%}
          

      {%- when 'time' -%}
        {%- if block.settings.text == blank -%}{%- continue -%}{%- endif -%}
        
          {%- if block.settings.icon != '1' -%}
            {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
          {%- endif -%}
          {{ block.settings.text | replace:'[count]','' }}
        

      {%- when 'sold' -%}
        {%- if block.settings.text == blank or no_sold_out == false -%}{%- continue -%}{%- endif -%}
        
          {%- if block.settings.icon != '1' -%}
            {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
          {%- endif -%}
          {{ block.settings.text | replace:'[sold]','' | replace:'[hour]','' }}
        

      
      {%- comment -%}
      {%- when 'free' -%}
        
          {%- if block.settings.icon == '2' or block.settings.icon == '3' -%}
            {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%} 
          {%- endif -%}
          Free Shipping For Over $100 toThis item no ship to 
        

      {%- endcomment -%}

      {%- comment %}Free Shipping For Over [money] to [country]{% endcomment -%}
      {%- comment %}This item no ship to [country]{% endcomment -%}

      {%- when 'order' %}{% unless no_sold_out %}{% continue %}{% endunless -%}
        
          {%- if block.settings.icon == '2' or block.settings.icon == '3' -%}
            {%- if block.settings.icon == '3' and block.settings.img != blank -%}{%- else -%}{%- endif -%}
          {%- endif -%}
            {{ block.settings.txt | replace:'[hour]','' | replace:'[date_start]','' | replace:'[date_end]',''}}
            {{block.settings.hr}}{{block.settings.min}}
        

      {%- when 'html' %}{% if block.settings.page == blank %}{% continue %}{% endif -%}
        {{pages[block.settings.page].content}}

      {%- when 'text' -%}{% if block.settings.text == blank %}{% continue %}{% endif -%}
        {{block.settings.text}}

      {%- comment -%}
      {%- when 'metafield' -%}
        {%- if pr_metafields_meta.option -%}{%- continue -%}{%- endif -%}
        {{pr_metafields_meta.option}}

      {%- endcomment -%}

   {%- endcase -%}
{%- endfor -%}
{%- if call_cl == "_qv" -%}{{ 'products.product.product_view_details' | t }}  {%- endif -%}

{%- schema -%}
  {
    "name": "Product summary",
    "class": "summary entry-summary mt__30",
    "max_blocks": 30,
    "blocks": [
      {
        "type": "title",
        "name": "Product Title",
        "limit": 1,
        "settings": [
            {
              "type": "range",
              "id": "size",
              "min": 10,
              "max": 60,
              "step": 1,
              "label": "Font size",
              "unit": "px",
              "default": 16
            }
        ]
      },
      {
        "type": "pricereview",
        "name": "Product Price, reivew",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "price",
            "options": [
              {
                "value": "0",
                "label": "None"
              },
              {
                "value": "1",
                "label": "$39.00 – $59.00"
              },
              {
                "value": "2",
                "label": "From $39.00"
              }
            ],
            "label": "Price varies settings",
            "default": "0"
          },
          {
           "type": "checkbox",
           "id": "rating",
           "label": "Use Rating?",
           "default": true
          }
        ]
      },
      {
        "type": "des",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "des",
            "options": [
              {
                "value": "1",
                "label": "Full description"
              },
              {
                "value": "2",
                "label": "Short description"
              }
            ],
            "label": "Description mode:",
            "default": "2"
          },
          {
            "type": "paragraph",
            "content": "—————————————————"
          },
          {
            "type": "paragraph",
            "content": "== Short description settings:"
          },
          {
            "type": "page",
            "id": "page",
            "label": "Short description page",
            "info": "This page content will appear. Short description page that will be displayed for each product content if you don't set metafield excerpt for each product content."
          },
        {
          "type": "range",
          "id": "length",
          "min": 1,
          "max": 100,
          "step": 1,
          "label": "Excerpt length (integer)",
          "info": "Number of words that will be displayed for each product content if you don't set short description page or set metafield excerpt for each product content.",
          "default": 31
        },
        {
         "type": "checkbox",
         "id": "readm",
         "label": "Use Read more?",
         "default": false
        },
        {
         "type": "text",
         "id": "readm_txt",
         "label": "Read more title",
         "default": "Read more"
        }
        ]
      },
      {
        "type": "frm",
        "name": "Product Form",
        "limit": 1,
        "settings": [
         {
           "type": "select",
           "id": "ani",
           "options": [
             {
               "value": "none",
               "label": "None"
             },
             {
               "value": "bounce",
               "label": "Bounce"
             },
             {
               "value": "tada",
               "label": "Tada"
             },
             {
               "value": "swing",
               "label": "Swing"
             },
             {
               "value": "flash",
               "label": "Flash"
             },
             {
               "value": "fadeIn",
               "label": "FadeIn"
             },
             {
               "value": "heartBeat",
               "label": "HeartBeat"
             },
             {
               "value": "shake",
               "label": "Shake"
             }
           ],
           "label": "Add to cart animation"
         },
          {
            "type": "range",
            "id": "time",
            "min": 2,
            "max": 40,
            "step": 1,
            "label": "Loop time (seconnds)",
            "info": "Loop time add to cart animation",
            "unit": "sec",
            "default": 6
          },
         {
           "type": "select",
           "id": "btn_des",
           "options": [
             {
               "value": "1",
               "label": "Design 1"
             },
             {
               "value": "2",
               "label": "Design 2"
             },
             {
               "value": "3",
               "label": "Design 3"
             }
           ],
           "label": "Button Design"
         },
         {
            "type": "select",
            "id": "btn_txt",
            "default": "3",
            "options": [
              {
                "value": "0",
                "label": "None"
              },
              {
                "value": "1",
                "label": "Lowercase"
              },
              {
                "value": "2",
                "label": "Capitalize"
              },
              {
                "value": "3",
                "label": "Uppercase"
              }
            ],
            "label": "Button transform Text:"
         },
         {
           "type": "header",
           "content": "Product Swatch"
         },
         {
           "type": "select",
           "id": "swatch_design",
           "default": "2",
           "options": [
             {
               "group": "Circle:",
               "value": "1",
               "label": "Circle"
             },
             {
               "group": "Circle:",
               "value": "2",
               "label": "Circle + color"
             },
             {
               "group": "Radio:",
               "value": "3",
               "label": "Radio"
             },
             {
               "group": "Radio:",
               "value": "4",
               "label": "Radio + color"
             },
             {
               "group": "Radio:",
               "value": "5",
               "label": "Radio full width"
             },
             {
               "group": "Radio:",
               "value": "6",
               "label": "Radio full width + color"
             },
             {
               "group": "Rectangle:",
               "value": "7",
               "label": "Rectangle"
             },
             {
               "group": "Rectangle:",
               "value": "8",
               "label": "Rectangle + color"
             },
             {
               "group": "Simple:",
               "value": "9",
               "label": "Simple"
             },
             {
               "group": "Simple:",
               "value": "10",
               "label": "Simple + color"
             }
           ],
           "label": "Swatch design setting"
         },
         {
           "type": "select",
           "id": "style_color",
           "options": [
             {
               "value": "1",
               "label": "Swatch color circle"
             },
             {
               "value": "2",
               "label": "Swatch color square"
             }
           ],
           "label": "Swatch color setting for Design"
         },
         {
           "type": "select",
           "id": "swatch_style",
           "options": [
             {
               "value": "1",
               "label": "Swatch color (Default or Upload)"
             },
             {
               "value": "2",
               "label": "Swatch image variant"
             }
           ],
           "label": "Swatch Layout setting for color/img"
         },
         {
           "type": "select",
           "id": "swatch_size",
           "options": [
             {
               "value": "small",
               "label": "Small"
             },
             {
               "value": "medium",
               "label": "Medium"
             },
             {
               "value": "large",
               "label": "Large"
             },
             {
               "value": "exlarge",
               "label": "Extra Large"
             }
           ],
           "label": "Swatch color setting for size",
           "default": "medium"
         },
         {
           "type": "checkbox",
           "id": "show_qty",
           "label": "Show quantity selector",
           "default": true
         },
         {
           "type": "checkbox",
           "id": "btn_atc_full",
           "label": "Use Add to cart full width?",
           "default": false
         },
         {
           "type": "checkbox",
           "id": "enable_payment_btn",
           "label": "Show dynamic checkout button",
           "info": "Lets customers check out directly using a familiar payment method. [Learn more](https:\/\/help.shopify.com\/manual\/using-themes\/change-the-layout\/dynamic-checkout)",
           "default": false
         }
        ]
      },
      {
        "type": "size",
        "name": "Size Chart, Delivery, Ask",
        "limit": 1,
        "settings": [
         {
           "type": "header",
           "content": "== Size Chart"
         },
         {
           "type": "select",
           "id": "size_chart",
           "label": "Show Size chart:",
           "default": "3",
           "options": [
             {
               "value": "1",
               "label": "None"
             },
             {
               "value": "2",
               "label": "Only product has variant name 'size'"
             },
             {
               "value": "3",
               "label": "All product"
             }
           ]
         },
        {
          "type": "select",
          "id": "sc_type",
          "default": "1",
          "options": [
            {
              "value": "1",
              "label": "HTML"
            },
            {
              "value": "2",
              "label": "IMAGE"
            }
          ],
          "label": "Size Chart Type: "
        },
        {
          "type": "paragraph",
          "content": "—————————————————"
        },
        {
          "type": "page",
          "id": "page",
          "label": "HTML Size Chart",
          "info": "This page content will appear."
        },
        {
          "type": "paragraph",
          "content": "—————————————————"
         },
         {
           "type": "image_picker",
           "id": "image",
           "label": "IMAGE Size Chart"
         },
         {
          "type": "paragraph",
          "content": "—————————————————"
         },
         {
           "type": "textarea",
           "id": "size_ck",
           "label": "Enter variant name you want has size guide",
           "info": "Eg: size,sizes,Größe"
         },
         {
           "type": "header",
           "content": "== Delivery & Return"
         },
         {
           "type": "checkbox",
           "id": "delivery",
           "label": "Show Delivery & Return?",
           "default": false
         },
         {
           "type": "page",
           "id": "page_dr",
           "label": "Add page Delivery & Return",
            "info": "This page content will appear."
         },
         {
           "type": "header",
           "content": "== Ask a question"
         },
         {
           "type": "checkbox",
           "id": "ask",
           "label": "Show Ask a question?",
           "default": false
         }/*,
         {
           "type": "page",
           "id": "page_ask",
           "label": "Add page Ask a question"
         }*/
        ]
      },
      {
        "type": "meta",
        "name": "Product meta",
        "limit": 1,
        "settings": [
         {
           "type": "checkbox",
           "id": "show_pr_vendor",
           "label": "Show Product vendors",
           "default": true
         },
         {
           "type": "checkbox",
           "id": "show_sku",
           "label": "Show Sku?",
           "default": true
         },
         {
           "type": "checkbox",
           "id": "show_available",
           "label": "Show Available?",
           "default": true
         },
         {
           "type": "checkbox",
           "id": "show_category_product",
           "label": "Show Category product?",
           "default": true
         },
         {
           "type": "checkbox",
           "id": "show_tag_product",
           "label": "Show product's tags?",
           "default": true
         }
        ]
      },
      {
        "type": "social",
        "name": "Product social",
        "limit": 1,
        "settings": [
         {
           "type": "select",
           "id": "class",
           "label": "Social align",
           "default": "tc",
           "options": [
             {
               "value": "tdf",
               "label": "Default"
             },
             {
               "value": "tc",
               "label": "Center"
             }
           ]
         }
         ]
      },
      {
        "type": "countdown",
        "name": "Countdown Timer",
        "limit": 1,
        "settings": [
         {
           "type": "paragraph",
           "content": "Display a countdown timer in your product page."
         },
         {
            "type": "select",
            "id": "source",
            "label": "Show Countdown Timer:",
            "default": "1",
            "options": [
              {
                "value": "1",
                "label": "All products"
              },
              {
                "value": "2",
                "label": "Only product had tag 'has_stock_countdown'"
              }
            ]
          },
         /*{
           "type": "checkbox",
           "id": "timezone",
           "label": "Use General timezone?",
           "info":"Use to display a countdown accordingly to the General timezone no matter the localtime your computer is.",
           "default": false
         },*/
         {
           "type": "checkbox",
           "id": "loop",
           "label": "Use loop countdown?",
           "info":"Only for countdown Timer Loop In A Day",
           "default": false
         },
         {
            "type": "select",
            "id": "icon",
            "label": "ICON / IMG:",
            "default": "2",
            "options": [
              {
                "value": "1",
                "label": "None"
              },
              {
                "value": "2",
                "label": "Icon"
              },
              {
                "value": "3",
                "label": "Image"
              }
            ]
          },
         {
           "type": "text",
           "id": "icon_name",
           "label": "Icon name",
           "default": "stopwatch",
           "info": "[Get name icon](https://icons8.com/line-awesome)"
         },
         {
           "type": "image_picker",
           "id": "img",
           "label": "Image",
           "info": "25x25 recommend"
         },
         {
           "type": "checkbox",
           "id": "fade",
           "label": "Use fade animation?",
           "default": true
         },
         {
            "type": "select",
            "id": "al",
            "label": "Text Align",
            "default": "tc",
            "options": [
              {
                "value": "tl",
                "label": "Text left"
              },
              {
                "value": "tc",
                "label": "Text center"
              },
              {
                "value": "tr",
                "label": "Text right"
              }
            ]
          },
         {
           "type": "textarea",
           "id": "mess",
           "label": "Message",
           "default": "Hurry up! Sale Ends in",
           "placeholder": "Hurry up! Sale Ends in"
         },
          {
            "type": "range",
            "id": "size",
            "min": 14,
            "max": 50,
            "step": 1,
            "label": "Font size",
            "unit": "px",
            "default": 16
          },
         {
           "type": "textarea",
           "id": "stock_time",
           "label": "Countdown Timer Loop In A Day",
           "default": "8:00:00,16:00:00,23:59:59",
           "placeholder": "8:00:00,16:00:00,23:59:59"
         },
         {
           "type": "text",
           "id": "day",
           "label": "Days",
           "default": "days",
           "placeholder": "days"
         },
         {
           "type": "text",
           "id": "hr",
           "label": "Hours",
           "default": "hours",
           "placeholder": "hours"
         },
         {
           "type": "text",
           "id": "min",
           "label": "mins",
           "default": "mins",
           "placeholder": "mins"
         },
         {
           "type": "text",
           "id": "sec",
           "label": "Secs",
           "default": "secs",
           "placeholder": "secs"
         },
         {
           "type": "paragraph",
           "content": "Hour of the day, 24-hour clock (00..23), Minute of the hour (00..59), Second of the minute (00..59)"
         },
         {
           "type": "select",
           "id": "cd_style",
           "label": "Countdown Design",
           "default": "dark",
           "options": [
             {
               "value": "light",
               "label": "Light"
             },
             {
               "value": "dark",
               "label": "Dark"
             },
             {
               "value": "dark_2",
               "label": "Dark 2"
             },
             {
               "value": "dark_3",
               "label": "Dark 3"
             }
           ]
         },
         {
           "type": "paragraph",
           "content": "Metafields product countdown, Countdown to the end sale date will be shown. Be sure you have set final date of the product sale price. pr_metafields_meta.countdown ( 2019/08/18 ) or ( 2019/08/18 17:34:56 ) or ( 2019/08/18 07:00:00,2019/08/20 17:34:56,2019/08/25 18:30:25 )"
         }
        ]
      },
      {
        "type": "stock",
        "name": " Inventory Quantity",
        "limit": 1,
        "settings": [
            {
              "type": "paragraph",
              "content": "Display the stock level of your product variant."
            },
           {
              "type": "select",
              "id": "icon",
              "label": "ICON / IMG:",
              "default": "2",
              "options": [
                {
                  "value": "1",
                  "label": "None"
                },
                {
                  "value": "2",
                  "label": "Icon"
                },
                {
                  "value": "3",
                  "label": "Image"
                }
              ]
            },
           {
             "type": "text",
             "id": "icon_name",
             "label": "Icon name",
             "default": "hourglass-half",
             "info": "[Get name icon](https://icons8.com/line-awesome)"
           },
           {
             "type": "image_picker",
             "id": "img",
             "label": "Image",
             "info": "25x25 recommend"
           },
           {
             "type": "checkbox",
             "id": "fade",
             "label": "Use fade animation?",
             "default": true
           },
           {
              "type": "select",
              "id": "st",
              "label": "== Stock:",
              "default": "3",
              "options": [
                {
                  "value": "1",
                  "label": "Only default"
                },
                {
                  "value": "2",
                  "label": "Only random"
                },
                {
                  "value": "3",
                  "label": "Default + Random"
                }
              ]
            },
            {
              "type": "header",
              "content": "== Default"
            },
            {
              "type": "range",
              "id": "qty",
              "min": 1,
              "max": 100,
              "step": 1,
              "unit": "Qty",
              "label": "(X) items",
              "info": "Show when less than (X) items are in stock",
              "default": 10
            },
            {
              "type": "header",
              "content": "== Random"
            },
            {
              "type": "range",
              "id": "total_items",
              "label": "Total items",
              "min": 10,
              "max": 100,
              "step": 10,
              "default": 100
            },
            {
              "type": "range",
              "id": "stock_from",
              "label": "from",
              "min": 1,
              "max": 19,
              "step": 1,
              "default": 12
            },
            {
              "type": "range",
              "id": "stock_to",
              "label": "to",
              "min": 20,
              "max": 70,
              "step": 1,
              "default": 20
            },
            {
              "type": "header",
              "content": "Translate labels"
            },
           {
              "type": "select",
              "id": "al",
              "label": "Text Align",
              "default": "tc",
              "options": [
                {
                  "value": "tl",
                  "label": "Left"
                },
                {
                  "value": "tc",
                  "label": "Center"
                },
                {
                  "value": "tr",
                  "label": "Right"
                }
              ]
            },
            {
              "type": "textarea",
              "id": "mess",
              "label": "Message (You can leave it blank)",
              "info": "Hurry! Only [stock_number] left in stock.",
              "placeholder": "Hurry! Only [stock_number] left in stock.",
              "default": "HURRY! ONLY [stock_number] LEFT IN STOCK."
            },
            {
              "type": "range",
              "id": "size",
              "min": 10,
              "max": 35,
              "step": 1,
              "label": "Font size",
              "unit": "px",
              "default": 16
            },
            {
              "type": "paragraph",
              "content": "—————————————————"
            },
            {
             "type": "checkbox",
             "id": "progress",
             "label": "Show progress bar?",
             "default": true
            },
            {
              "type": "range",
              "id": "wbar",
              "min": 40,
              "max": 100,
              "step": 1,
              "unit": "%",
              "label": "Width progress bar",
              "default": 100
            },
            {
              "type": "color",
              "id": "stock_bg_process",
              "label": "Process color",
              "default": "#f76b6a"
            },
            {
              "type": "color",
              "id": "bgten",
              "label": "Less than 10 color",
              "default": "#ec0101"
            },
            {
              "type": "color",
              "id": "stock_bg",
              "label": "Background color",
              "default": "#ffe8e8"
            }
        ]
      },
      {
        "type": "img",
        "name": "Trust Badge",
        "limit": 1,
        "settings": [
         {
           "type": "textarea",
           "id": "mess",
           "label": "Message",
           "default": "Guaranteed Safe Checkout",
           "placeholder": "Guaranteed Safe Checkout"
         },
          {
            "type": "range",
            "id": "size",
            "min": 10,
            "max": 60,
            "step": 1,
            "label": "Font size",
            "unit": "px",
            "default": 16
          },
         {
            "type": "select",
            "id": "source",
            "label": "Source IMG:",
            "default": "1",
            "options": [
              {
                "value": "1",
                "label": "Image"
              },
              {
                "value": "2",
                "label": "SVG"
              }
            ]
          },
          {
            "type": "header",
            "content": "== Image"
          },
         {
           "type": "image_picker",
           "id": "image",
           "label": "Trust seal image"
         },
         {
            "type": "select",
            "id": "al",
            "label": "Image Align",
            "default": "tl",
            "options": [
              {
                "value": "tl",
                "label": "Left"
              },
              {
                "value": "tc",
                "label": "Center"
              },
              {
                "value": "tr",
                "label": "Right"
              }
            ]
          },
          {
            "type": "range",
            "id": "wimg",
            "min": 40,
            "max": 100,
            "step": 1,
            "unit": "%",
            "label": "Width image",
            "default": 60
          },
          {
            "type": "header",
            "content": "== SVG"
          },
         {
           "type": "textarea",
           "id": "svg",
           "label": "SVG list",
           "default": "amazon_payments,american_express,apple_pay,bitcoin,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,google_pay,jcb,klarna,klarna-pay-later,litecoin,maestro,master,paypal,shopify_pay,sofort,visa",
           "info": "amazon_payments,american_express,apple_pay,bitcoin,dankort,diners_club,discover,dogecoin,dwolla,forbrugsforeningen,interac,google_pay,jcb,klarna,klarna-pay-later,litecoin,maestro,master,paypal,shopify_pay,sofort,visa"
         },
        {
          "type": "range",
          "id": "height",
          "min": 1,
          "max": 100,
          "step": 1,
          "label": "Height",
          "unit": "px",
          "default": 50
        }
        ]
      },
      {
        "type": "store_avai",
        "name": "Pickup availability",
        "limit": 1,
        "settings": [
         {
            "type": "paragraph",
            "content":"Engage local shoppers by showing where items are available for pickup — right from the product page."
         }
         ]
      },
      {
        "type": "time",
        "name": "Live view",
        "limit": 1,
        "settings": [
         {
            "type": "paragraph",
            "content":"Display fake the number of people viewing your product page."
         },
         {
            "type": "select",
            "id": "icon",
            "label": "ICON / IMG:",
            "default": "2",
            "options": [
              {
                "value": "1",
                "label": "None"
              },
              {
                "value": "2",
                "label": "Icon"
              },
              {
                "value": "3",
                "label": "Image"
              }
            ]
          },
         {
           "type": "text",
           "id": "icon_name",
           "label": "Icon name",
           "default": "eye",
           "info": "[Get name icon](https://icons8.com/line-awesome)"
         },
         {
           "type": "image_picker",
           "id": "img",
           "label": "Image",
           "info": "25x25 recommend"
         },
         {
           "type": "checkbox",
           "id": "fade",
           "label": "Use fade animation?",
           "default": true
         },
         {
           "type": "range",
           "id": "min",
           "min": 1,
           "max": 100,
           "step": 1,
           "label": "MIn fake real time Visitor",
           "default": 1
         },
         {
           "type": "range",
           "id": "max",
           "min": 10,
           "max": 1000,
           "step": 10,
           "label": "Max fake real time Visitor",
           "default": 100
         },
         {
           "type": "range",
           "id": "time",
           "min": 1,
           "max": 20,
           "step": 1,
           "unit": "sec",
           "label": "Interval time",
           "default": 2
         },
         {
           "type": "textarea",
           "id": "text",
           "label": "Text",
           "default": "[count] People<\/span> are viewing this right now"
         }
        ]
      },
      {
        "type": "sold",
        "name": "Total sold flash",
        "limit": 1,
        "settings": [
         {
            "type": "select",
            "id": "icon",
            "label": "ICON / IMG:",
            "default": "2",
            "options": [
              {
                "value": "1",
                "label": "None"
              },
              {
                "value": "2",
                "label": "Icon"
              },
              {
                "value": "3",
                "label": "Image"
              }
            ]
          },
         {
           "type": "text",
           "id": "icon_name",
           "label": "Icon name",
           "default": "fire",
           "info": "[Get name icon](https://icons8.com/line-awesome)"
         },
         {
           "type": "image_picker",
           "id": "img",
           "label": "Image",
           "info": "25x25 recommend"
         },
         {
           "type": "checkbox",
           "id": "fade",
           "label": "Use fade animation?",
           "default": true
         },
         {
           "type": "range",
           "id": "mins",
           "min": 1,
           "max": 100,
           "step": 1,
           "unit": "qty",
           "label": "Min Quantity",
           "default": 5
         },
         {
           "type": "range",
           "id": "maxs",
           "min": 10,
           "max": 110,
           "step": 1,
           "unit": "qty",
           "label": "Max Quantity",
           "default": 25
         },
         {
           "type": "range",
           "id": "mint",
           "min": 1,
           "max": 24,
           "step": 1,
           "unit": "h",
           "label": "Min Time",
           "default": 3
         },
         {
           "type": "range",
           "id": "maxt",
           "min": 1,
           "max": 24,
           "step": 1,
           "unit": "h",
           "label": "Max Time",
           "default": 24
         },
         {
           "type": "textarea",
           "id": "text",
           "label": "Text",
           "info": "[sold] sold in last [hour] hours",
           "default": "[sold] sold in last [hour] hours"
         }
        ]
      },
      /*{
        "type": "free",
        "name": "Free Shipping Text",
        "limit": 1,
        "settings": [
         {
            "type": "select",
            "id": "icon",
            "label": "ICON / IMG:",
            "default": "2",
            "options": [
              {
                "value": "1",
                "label": "None"
              },
              {
                "value": "2",
                "label": "Icon"
              },
              {
                "value": "3",
                "label": "Image"
              }
            ]
          },
         {
           "type": "image_picker",
           "id": "img",
           "label": "Icon",
           "info": "15x13 recommend"
         },
         {
           "type": "checkbox",
           "id": "fade",
           "label": "Use fade animation?",
           "default": true
         },
         {
           "type": "color",
           "id": "color",
           "label": "Color Primary",
           "default": "#0076bb"
         },
         {
           "type": "textarea",
           "id": "text",
           "label": "Shipping Text",
           "info":"Free Shipping For Over [money] to [country] [flag]",
           "default": "Free Shipping For Over $100"
         }
        ]
      },*/
      {
        "type": "order",
        "name": "Delivery Time",
        "limit": 1,
        "settings": [
         {
            "type": "paragraph",
            "content":"Display an approximate date of delivery."
         },
         {
            "type": "select",
            "id": "icon",
            "label": "ICON / IMG:",
            "default": "2",
            "options": [
              {
                "value": "1",
                "label": "None"
              },
              {
                "value": "2",
                "label": "Icon"
              },
              {
                "value": "3",
                "label": "Image"
              }
            ]
         },
         {
           "type": "text",
           "id": "icon_name",
           "label": "Icon name",
           "default": "truck",
           "info": "[Get name icon](https://icons8.com/line-awesome)"
         },
         {
           "type": "image_picker",
           "id": "img",
           "label": "Image",
           "info": "25x25 recommend"
         },
         {
           "type": "checkbox",
           "id": "fade",
           "label": "Use fade animation?",
           "default": true
         },
         {
           "type": "textarea",
           "id": "txt",
           "label": "Delivery Text",
           "default": "Order in the next [hour] to get it between [date_start] and [date_end]",
           "info":"Order in the next [hour] to get this to you between [date_start] and [date_end], Order in the next [hour] to get it by [date_end], Order in the next [hour] to get it soon"
         },
         {
           "type": "range",
           "id": "ds",
           "min": 0,
           "max": 99,
           "step": 1,
           "label": "Delivery Start Date",
           "info": "From Current date",
           "default": 10
         },
         {
           "type": "range",
           "id": "de",
           "min": 0,
           "max": 99,
           "step": 1,
           "label": "Delivery End Date",
           "info": "From Current date",
           "default": 15
         },
         {
           "type": "select",
           "id": "mode",
           "default": "1",
           "options": [
             {
               "value": "1",
               "label": "Only Delivery"
             },
             {
               "value": "2",
               "label": "Shipping + Delivery"
             }
           ],
           "label": "Exclude Days From"
         },
         {
           "type": "text",
           "id": "cut",
           "label": "Exclude Days",
           "default": "SAT,SUN",
           "info": "Use the 'MON','TUE','WED','THU','FRI','SAT' and 'SUN'. Separate exclude days with a comma (,)."
         },
         {
           "type": "select",
           "id": "frm",
           "default": "1",
           "options": [
             {
               "value": "1",
               "label": "Wednesday, 19th April"
             },
             {
               "value": "2",
               "label": "Wednesday, 19th April 2019"
             },
             {
               "value": "3",
               "label": "Wednesday, 19th April, 2019"
             },
             {
               "value": "4",
               "label": "Wednesday, April 19th, 2019"
             },
             {
               "value": "5",
               "label": "Wednesday, April 19th"
             },
             {
               "value": "6",
               "label": "Wednesday, April 19th 2019"
             },
             {
               "value": "7",
               "label": "Wednesday, April 19"
             },
             {
               "value": "8",
               "label": "Wednesday, April 19 2019"
             },
             {
               "value": "9",
               "label": "Wednesday, 04/19/2019"
             },
             {
               "value": "10",
               "label": "Wednesday, 19/04/2019"
             },
             {
               "value": "20",
               "label": "Wednesday, 2019/04/19"
             }
           ],
           "label": "Date delivery format"
         },
         /*{
           "type": "checkbox",
           "id": "timezone",
           "label": "Use General timezone?",
           "info":"Use to display a countdown accordingly to the General timezone no matter the localtime your computer is.",
           "default": false
         },*/
         {
           "type": "text",
           "id": "time",
           "label": "Delivery Cut Off",
           "info": "Number Only(24 Hours Format - 16:00:00 Means 4PM)",
           "default": "16:00:00"
         },
         {
           "type": "text",
           "id": "hr",
           "label": "Text hours",
           "default": "hours"
         },
         {
           "type": "text",
           "id": "min",
           "label": "Text minutes",
           "default": "minutes"
         }
        ]
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
            {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"
            }
         ]
      },
      {
        "type": "html",
        "name": "Custom HTML",
        "settings": [
          {
            "type": "page",
            "id": "page",
            "label": "Content page",
            "info": "This page content will appear."
          }
        ]
      }
   ],
    "default": {
      "blocks": [
        { "type": "title" },{ "type": "pricereview" },{ "type": "des" },{ "type": "frm" },{ "type": "size" },{ "type": "meta" },{ "type": "social" }
      ]
    }
  }
{% endschema %}

Hi @Bo

Thanks for the tutorial, do you know if it still works currently? as I tried making it work with debut theme, but did not work

Would really appreciate some help making it work

Here is the code I have


      
        {% if template == 'product' %}
      {{ 'products.product.on_sale' | t }}
    {% else %}
      {% assign amount = 0 %}
      {% for variant in product.variants %}
      {% assign saving = variant.compare_at_price | minus: variant.price %}
      {% assign amount = saving | at_least: amount %}
      {% endfor %} 
      {% capture saved_amount %}{{ amount | money_without_trailing_zeros }}{% endcapture %}

      Save up to {{ saved_amount }}
    {% endif %}

      

Thank you

Hi @Bo

" Thanks for this. I am using the Debut template. This works for showing a saved percentage when I view products in list/grid form, but when I select that particular product to view it singularly, it goes back to just “Sale” without showing “Save up to X%”. How can I adjust it so it always shows the percentage saving wherever that particular product is viewed? "

In that reply you posted the code for percentage saved, what would the equivalent amount saved code be?

Many thanks

Hey, how did u managed to display that on ur product page cuz mine is only showing on the collection page

for the Dawn theme, what would be the code? none of them work for me, they all dial 0%.

I’ve got the same issue with Dawn theme showing 0%. Someone is helping me in the community but although it shows numbers now, the numbers are often wrong (57% in stead of 50% or even an odd large number like 6255288393990%). Woule be great to have atutorial for this on the new 2.0 shopify themes!

Did you figure out how to do it?

Sorry for my late reply I must have missed the notification. I haven’t solved it but I do know what to do manually to fix it.. not ideal though.

Example:

Product X = 41,99

-30% = 29,393 → so 29,39

Then is doesn’t show -30% but -300714455822815%

When I change the price to 29,40 is says -30%. I’m using a bulk editor for discounts, so it’s not ideal when we have to change the prices manually when there is sale.

FOR DAWN THEME: (FOR BOTH PRODUCT PAGE & COLLECTION PAGE)

FOR PRODUCT PAGE:

If you want to display the % off in the Product page, then go to Edit Code for Dawn-> Find the Price.liquid-> and go down to line 86. Replace
{{ ‘products.product.on_sale’ | t }}

with

{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF

This will show the % OFF, for example 30% OFF, in product page. If you want to say something else like: HURRY UP 30% OFF, then you can use:
HURRY UP{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF.

In my store I used:
Limited Time Offer: {{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}% OFF

FOR COLLECTION PAGE:

If you want to display the % off in the Collection or Main or Feature Product page, then go to Edit Code for Dawn-> Find the card-product.liquid > and go down to line 131. Replace

{{- ‘products.product.on_sale’ | t -}}

with

{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF

This will show the % OFF, for example 30% OFF, in collection page. See picture below:

As done previously if you want to say something more like: HURRY UP 30% OFF, then you can use:
HURRY UP{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF

Hope this helps. All the best!

Hi Andy! Just logging in to say thank you very much! This worked perfectly on my theme

This worked for my theme, thanks alot! Is there a way of changing the colour of the discount displayed on the product page?