Display discount percentage beside price or beside sale badge in the picture

Store Design
1

How to display discount percentage beside the price or beside the sale badge in the picture? My store url is: https://toubaby.com Thank you very much!

2

@toubaby

can you try this code

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

3

Hi Ketan, thank you for the quick help. I have found the file: price.liquid but don’t know where to insert the code. The part of the code is:


  

    {%- comment -%}
      Explanation of description list:
        - div.price__regular: Displayed when there are no variants on sale
        - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    

      {{ 'products.product.price.regular_price' | t }}
      
        {{ money_price }}
      
    

    
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        {{ 'products.product.price.regular_price' | t }}
        
          <s>
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        
      {%- endunless -%}
      {{ 'products.product.price.sale_price' | t }}
      
        {{ money_price }}
      
    

    <small>
      {{ 'products.product.price.unit_price' | t }}
      
        {{- product.selected_or_first_available_variant.unit_price | money -}}
        /
         {{ 'accessibility.unit_price_separator' | t }} 
        
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        
      
    </small>
  

  {%- if show_badges -%}
    
      {{ 'products.product.on_sale' | t }}
    

    
      {{ 'products.product.sold_out' | t }}
    
  {%- endif -%}

Thank you indeed, Ketan.

4

May I ask two solutions:

1 add it beside the sale price.

2 add it in the sale badge.

Thank you sooooo much, Ketan!