How can I change the appearance of sale prices on my website (Dawn theme)?

[BoldAttire]

How can I change the appearance of sale prices on my website?

i have exactly same issue

[NovakNorth906 · Accepted solution]

Hi @BoldAttire! Here is what you'll need to do.

Online Stores > themes

Find the theme you want to update and click the "..." then select edit theme files

Locate the snippets/price.liquid file

Around line 86 look for 

<div class="price__sale">

​Locate the closing div tag around line 103 (if you click the opening div tag listed above it will highlight the closing tag

</div>

Delete everything between the opening and closing div tags. Then replace with the following:

<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>
      
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
        {% if product.compare_at_price_max > product.price %}
          <span>|</span>
          <span class="sale-percentage">{{ 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'}}% OFF</span>
        {% endif %}
      {%- endunless -%}

You can then add the following css at the bottom of the same file

<style> 
  .price-item--sale { color: red; } 
  .sale-percentage { color: red; margin-left: 10px; }
  .price__badge-sale { display: none !important; }
</style>

Click save and then preview.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Cheers!

Mark

[Moeed]

Hey @BoldAttire 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[BoldAttire]

www.gencraze.com

[Moeed]

Hey @BoldAttire 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.price__sale {
    font-weight: bold !important;
}
span.price-item.price-item--sale.price-item--last {
    color: red !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BoldAttire]

i want to show price first then compare at price then a bar ( | ) and then % off ............i can do google meet or zoom meet as well

[BoldAttire]

i want to show price first then compare at price then a bar ( | ) and then % off just like below image ............i can do google meet or zoom meet as well

[BoldAttire]

www.gencraze.com

[NovakNorth906 · Accepted solution]

Hi @BoldAttire! Here is what you'll need to do.

Online Stores > themes

Find the theme you want to update and click the "..." then select edit theme files

Locate the snippets/price.liquid file

Around line 86 look for 

<div class="price__sale">

​Locate the closing div tag around line 103 (if you click the opening div tag listed above it will highlight the closing tag

</div>

Delete everything between the opening and closing div tags. Then replace with the following:

<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
      <span class="price-item price-item--sale price-item--last">
        {{ money_price }}
      </span>
      
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
        <span>
          <s class="price-item price-item--regular">
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </s>
        </span>
        {% if product.compare_at_price_max > product.price %}
          <span>|</span>
          <span class="sale-percentage">{{ 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'}}% OFF</span>
        {% endif %}
      {%- endunless -%}

You can then add the following css at the bottom of the same file

<style> 
  .price-item--sale { color: red; } 
  .sale-percentage { color: red; margin-left: 10px; }
  .price__badge-sale { display: none !important; }
</style>

Click save and then preview.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Cheers!

Mark

[BoldAttire]

css is not applying.........plz check again......rest are working

[NovakNorth906 · Accepted solution]

Hi @BoldAttire, please check the updated CSS in my original post. Let me know if this works and if not I will fix again! If the updated CSS works, please don't forget to Like it and Mark it as Solution!


Kind regards,

Mark

[BoldAttire]

Mark you are the best......Thank you so so so so much!!!!!!!!
glad that i got an answer from you

[harpernz]

Hey, I tried this and it worked but it actually changed ALL prices on my website to be like this, is there a way to have this work only on sale items and not everything on the website?

I've searched through and tried quite a few different codes and yours is the only one thats changed anything, but it just changed too much hahaha. thank you.

[NovakNorth906]

Hi @harpernz! Could you please provide a link to your Shopify store so I can take a peek? The solution might vary based on the theme you are using.