Show compared price next to the current price on product grid

AmoreAzzare
Tourist
5 0 1

Hello,

I want to put the previous(without discount price) before the current price with a scratch line.

The current theme is dawn where can I edit it and what do I need to put?

Thanks in advance!

Website: https://amore-azzare.com/

 Heres how it is:

Screenshot_1.png

How I want it to show:

Screenshot_2.png

Replies 4 (4)

Moeed
Shopify Partner
3898 985 1233

Hey @AmoreAzzare 

To add a previous price with a scratch line (strikethrough) in the Dawn theme on Shopify, you'll need to make changes to your theme's Liquid code. Follow these steps:

 

  • Log in to your Shopify admin dashboard.
  • From the sidebar, click on "Online Store" and then select "Themes."
  • In the "Themes" section, find your active theme (Dawn) and click on the "Actions" button (represented by three dots).
  • Select "Edit code" from the dropdown menu.
  • In the theme editor, locate the "Product template" file. It is usually named "product.liquid" or "product-template.liquid".
  • Look for the code that displays the current price of the product. It might look like {{ product.price | money }}.
  • Before that code, add the following code to display the previous price with a strikethrough:
{% if product.compare_at_price > product.price %}
  <p class="previous-price">
    <span class="strikethrough">{{ product.compare_at_price | money }}</span>
  </p>
{% endif %}

This code checks if the compare at price (product.compare_at_price) is greater than the current price (product.price). If it is, it displays the previous price with the strikethrough style.

 

  • Save the changes to update your theme.

  • Preview the changes on your live website to ensure everything appears as expected.

  • If you're satisfied with the changes, click on "Publish" to make the changes live on your website.

Make sure to test the changes on your website and verify that the previous prices are displayed correctly with the strikethrough style.

 

Note that modifying your theme's code requires some technical knowledge. If you're not comfortable making these changes yourself, it's advisable to reach out to a Shopify expert or developer who can assist you.

 

Remember to backup your theme before making any modifications to ensure you can revert to a previous version if needed.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
AmoreAzzare
Tourist
5 0 1

There is no "product.liquid" or "product-template.liquid".

Moeed
Shopify Partner
3898 985 1233

Apologies for the confusion. The Dawn theme on Shopify might have different Liquid file names for the product template. Here's an alternative approach to adding the previous price with a strikethrough in the Dawn theme:

 

  1. Log in to your Shopify admin dashboard.

  2. From the sidebar, click on "Online Store" and then select "Themes."

  3. In the "Themes" section, find your active Dawn theme and click on the "Actions" button (represented by three dots).

  4. Select "Edit code" from the dropdown menu.

  5. In the theme editor, navigate to the "Sections" folder and look for a file named "product-template.liquid" or a similar name that represents the product template.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
AmoreAzzare
Tourist
5 0 1

Theres no product-template.liquid