Display Normal price next to sale / compare price brooklyn theme

Store Design
1

Hi!

https://community.shopify.com/c/shopify-design/display-normal-price-next-to-sale-compare-at-price/m-p/410083/highlight/true#M106480

I followed this tutorial, which worked successfully. However, the compare at price is in bold, which creates a weird contrast. Can I make them the same font, not one thicker than the other, and the new discounted price in a different, more eyecatching color, perhaps red?

Here is a visual example

https://boltactive.com/collections/tops

Screen Shot 2021-12-02 at 2.42.17 PM.png
Screen Shot 2021-12-02 at 2.42.17 PM.png284×256 14.5 KB

Thanks so much

2

@riapatag

Please add following code your assets/timber.scss.liquid bottom of the file.

.grid-product__price {
    font-size: 1.2em !important;
    font-weight: normal !important;
    color:red !important;
}

.product-single__price, .product-single__price--compare-at {font-weight: normal !important;}

Thanks!

3

Thank you so much!

It works, however, the products that are not marked down are in red. can i make it black?

Thanks

Ria

Ex: https://boltactive.com/collections/all