How do I change the color of the 'compare at" price?

New Member
2 0 0

I am currently using the Minimal theme and would like to display the sale price in a different color (#d12611) to stand out. I have tried to work my way through the code to figure it out, but I have had no luck. 

 


 
0 Likes
New Member
5 0 0

Try saving the following code as a javascript file in your Assets folder.  Call it something like "sale_price.js".

$('span.price').each(function(){ 
	if($(this).children('del').length) {
		$(this).css('color','#d12611'); 
		$(this).children('del').css('color','#1b9d84');
	} 
});

Then add this line into your theme.liquid file.  

{{ 'sale_price.js' | asset_url | script_tag }}

Make sure to place it below the line where jquery is loaded.

0 Likes
New Member
5 0 0

Try saving the following code as a javascript file in your Assets folder.  Call it something like "sale_price.js".

$('span.price').each(function(){ 
	if($(this).children('del').length) {
		$(this).css('color','#d12611'); 
		$(this).children('del').css('color','#1b9d84');
	} 
});

Then add this line into your theme.liquid file.  

{{ 'sale_price.js' | asset_url | script_tag }}

Make sure to place it below the line where jquery is loaded.

0 Likes
Shopify Partner
199 0 20

Hi Ashley, 

I think i would be able to help you, however would you mind posting the code that displays the <h2> tag for the price? it should be in the Product.liquid file. If i can see how that is set up for your specific store, It could make the process much quicker

thank

-brendin

0 Likes
Astronaut
1925 0 379

There are two main locations where your prices are listed: the collection page and the product page.  And of course there is the sale price and the compare_at price.

Open Assets/styles.scss.liquid.  Around Lines 434-435, you'll find:

.purchase h2.price { margin: 0 0 10px; display: block; font-size: 24px !important; color: {{ settings.price_color }}; }
.details .price { color: {{ settings.price_color }}; }

Try replacing that with:

.purchase h2.price { margin: 0 0 10px; display: block; font-size: 24px !important; color: #d12611; }
.purchase h2.price del { color: {{ settings.price_color }}; }
.details .price { color: #d12611; }
.details .price del { color: {{ settings.price_color }}; }

The first line changes the color of the sale price in the product page, the second line changes the compare_at price in the product page, the third line changes the sale price in the collection page and the fourth line changes the compare_at price in the product page.

I hope this helps.

1 Like
Tourist
4 0 1

@Alex:  This will not work.  This will change the color of all prices regardless of whether or not is has a child <del>.  I wrote a solution (on my other computer) in jquery, but this forum kept logging me out every time I tried to post it.

0 Likes
Tourist
4 0 1

Here's a solution that wouldn't require you to change your dom structure:

Try saving this bit of code in a javascript file in your Assets folder.  Call it something like "sale_price.js". 

$(document).ready(function(){
	$('.price').each(function(){ 
		if ($(this).children('del').length) { 
			$(this).css('color','#d12611'); 
			$(this).children('del').css('color', '#1b9d84'); 
		} 
	});
});

Then add the following line to your theme.liquid file.

{{ sale_price.js | asset_url | script_tag }}

Make sure to add it below the line where jquery is loaded.

EDIT: Forgot to wrap it in the document.ready function so it waits until all the elements are on the page before trying to manipulate them.

EDIT: Removed 'span' from the .price selector after seeing that you have <h2> elements that needed to change too.

1 Like
New Member
2 0 0

I believe the code in the "product.liquid" file is:

 

   {% assign variant = product.selected_or_first_available_variant %}
        <h2 class="price" id="price-preview">
          <span itemprop="price">{{ variant.price | money }}</span>{% if variant.price < variant.compare_at_price %} <del>{{ variant.compare_at_price | money }}</del>{% endif %}
        </h2>
      </div>

I have tried to follow the forums and advice given, but can't seem to find the exact code needed.

 

 

0 Likes
Highlighted
New Member
8 0 0

Did anyone figure this out?

0 Likes