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

Success.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
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

Success.

@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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
3 0 0

You're the best !

0 Likes