Original price, crossed out, next to discounted price in red

Store Design
1

Hi everyone!

I’m looking to change the price label of my products on my home page and the collection pages. Right now it show one number which is the current price. I have activated a discount code of 20% but I would like to appear the original price crossed so: 99.99€ (crossed) 79.99€ (and the discount price in red). So I’d like to replace the discount code and put the prices crossed. Actually, I’d like to have all the products with a 20% discount for Black Friday promotion. I’m using the new Dawn theme.

Thank you very much everyone!

2

Hi @EstherBen ,

Please go to snippets/price.liquid file and change all code: https://i.imgur.com/SF9hNPm.png

{% comment %}
    Renders a list of product's price (regular, sale)

    Accepts:
    - product: {Object} Product Liquid object (optional)
    - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
    - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
    - price_class: {String} Adds a price class to the price element (optional)

    Usage:
    {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign available = target.available | default: false
  assign money_price = price | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

  

    {%- 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 %}
              {{ price | money_with_currency }}
            {% else %}
              {{ price | money }}
            {% endif %}
          </s>
        
      {%- endunless -%}
      {{ 'products.product.price.sale_price' | t }}
      
        {%- assign price_discount = price | times: 0.2 -%}
        {% if settings.currency_code_enabled %}
          {{ price | minus: price_discount | money_with_currency }}
        {% else %}
          {{ price | minus: price_discount | money }}
        {% endif %}
      
    

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

Hope it helps!

2 Likes
3

This helped on the collection and pain pages, but the actual product pages still show the full price. How can I change the product pages as well?

4

Hi @FRUHD ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

1 Like
5

I’m also looking for the answer to how do you show the discounted price on the actual product page?

6

Did you ever get an answer to that question ?

7

…

8

Of course not

9

I’d love to have an answer to that aswel