Add Compare Price on collection

Solved
Highlighted
New Member
3 0 0

Hello everybody, 

i work on the Brooklyn theme. I try to add the old price to the collection page (using https://community.shopify.com/c/Shopify-Design/Display-Normal-Price-next-to-Sale-Compare-at-Price/m-... )

Sans-titre-3.jpg

 

As you can see, it works, but the sale price is smaller than the old price. ideally, I wish the prices were as on the product page (the 2 prices at the same size, and the new price in red), and maybe a "-" betwen the title and the price.

Sans-titre-4.jpg

Do someone knows how to do it please ?

I didn't put the theme online yet, so I can't send you the link

 

Thanks

(And sorry for my english)

 

0 Likes
Highlighted

This is an accepted solution.

Hello 

1. To dsiplay compare at price:

Go to Online Store-> Themes -> Edit code->Snippets->product-grid-item.liquid

Search below span

 <span class="grid-product__price">

And add below code after end of that span

 <span id="ComparePrice" class="product-single__price--compare-at"> {{ product.compare_at_price_min | money_without_trailing_zeros }} </span>

 

2. To add - between title and price:

Go to Online Store-> Themes -> Edit code->Snippets->product-grid-item.liquid
Search below span

         <span class="grid-product__price">

And add below code above that span

<span class="long-dash">—</span>
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
2 Likes
Highlighted
New Member
3 0 0

1.jpg

 

Thank you so much!!

Is it possible to put it in red, as on my product page (picture in my 1st post) and before the price crossed out ?

 

0 Likes
Highlighted

This is an accepted solution.

@Monox,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.grid-product__price {
	color: red !important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
2 Likes
Highlighted
New Member
3 0 0

You're the best !

0 Likes
Highlighted
New Member
1 0 0

Thanks for this! I've been looking for this solution for a while now!

 

Do you know how to set the red sale price to only apply for items that are on sale?

0 Likes
Highlighted
New Member
2 0 0

This is great however it displays a Zero when the article is not on sale

0 Likes
Highlighted
Excursionist
21 0 2

Great help here! Have been looking for answers to this question for some time now..
This thread solved all my questions and should be highlighted since there are so many asking for this. 

 

Great help @oscprofessional !

0 Likes
Highlighted
New Member
1 0 1

i didnt know exactly where to add the color snippet to change only the regular price, when i added it at the end as manox said the title color change also.

 

another question how to show compare price beside regular price in collections for only the items that have compare price.

because now its showing 0 with strike through if no compare price

1 Like
Highlighted
New Member
2 0 1

So I'm not really a coder, I just know enough to be dangerous. And the price does this on the product page correctly, just not on the collection page. So I just copy and pasted an entire if/than statement about the compare price from there to the place where the guy above said to place it. And it worked!! Here's the code snippet. I did have to add a style to make the font 14px because it was slightly larger than the sale price -- removed that here, as it could just be my theme. But it worked! And no zero-crossed-out on ones without a compare price. 

      {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at" style="font-size:14px">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}

 

1 Like