Display both discount price and original price on the Home Page and the Collections Page

Highlighted
Tourist
22 0 1

Hi,

I am using Brooklyn Template and I want to display both discount price and original price on the Home Page and the Collections Page.

I have changed the code from: 

<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

to: 

<span class="grid-product__price">
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>

{% if on_sale %}
<span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}

Averyyip_1-1605257921452.png

 

 

However, I want both prices at the same size and discount price show in gold color, as the below picture.

Averyyip_0-1605257891517.png

How can I solve this problem?  Thank you so much!

 

Avery

 

1 Like
Highlighted
Shopify Partner
9267 1180 3265

Hello, @Averyyip 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
22 0 1

Hi, 

My store URL is www.deasuraswimwear.com

Thanks,

Avery

0 Likes
Highlighted
Tourist
22 0 1

Hi @KetanKumar , 

My store URL is www.deasuraswimwear.com

Thanks,

Avery

0 Likes