Discount

Store Design
1

Hello everyone! I have a question about a shopify store design. I would like to desplay the % amount saved after my price like the store in the first picture (but with my couler of course) how would I be able to do this? the first picture is the wanted outcome and the second one is my current design. (my typografie is Aleo, 20PX and my colour code is #8B3737) Thanks!

image
image406×130 7.1 KB

image
image510×101 3.55 KB

2

So you need the main price colour change and the save percentage value, right??

Also what theme are you using since almost every theme does provide this, at least the known ones that are commonly used by merchants?

Best

3

I use dwell and i want the samen as in the first picture (the box with the save % amount) but just with my branding

4

@user1671 ,

Add this right after the price in Dwell’s product price snippet
(usually: snippets/price.liquid or sections/main-product.liquid)

{% if product.compare_at_price > product.price %}
  {% assign savings = product.compare_at_price | minus: product.price %}
  {% assign percent = savings | times: 100 | divided_by: product.compare_at_price | round %}

  <span class="discount-badge">
    Save {{ percent }}%
  </span>
{% endif %}

CSS (matches your branding)

Add this in Theme settings → Custom CSS or base.css

.discount-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  background: #8B3737;
  color: #ffffff;
  font-family: 'Aleo', serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1.2;
}

Result

  • Same boxed “Save XX%” style as the first image
  • Fully dynamic (auto-calculated)
  • Uses your brand color (#8B3737)
  • Works cleanly with Dwell theme
5

now it looks like this:

image
image710×181 13.4 KB

6

Go to price.liquid file from the theme code editor and after line 114 add this code

{% if product.compare_at_price > product.price %}

          {% assign discount_amount = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price %}

          {% assign discount_percentage = discount_amount  | times: 100 | divided_by: product.selected_or_first_available_variant.compare_at_price | round  %}

            <span class="discount-badge">{{ discount_percentage | round }}% OFF</span>

          {% endif %}

like this

image
image788×381 26.9 KB

And then after line 73 add this code

<style>

   .discount-badge{

    display: inline-block;

  margin-left: 10px;

  padding: 4px 10px;

  background: #8B3737;

  color: #ffffff;

  font-family: 'Aleo', serif;

  font-size: 20px;

  font-weight: 600;

  border-radius: 4px;

  line-height: 1.2;

  }

  </style>

like this

image
image295×388 11.4 KB

You can change the font-size and other stuffs from here. The result should be this

image
image647×268 22.1 KB

Best

7

Didn’t work my code is different now my compar eat price is also gone? check my website: https://evelynrose-vancouver.com/

image
image518×260 8.98 KB