Editing Product Card in Collection pages to show discounted price before the original price.

Hi everyone,

I am on Dawn 15.0 theme. I would like to change the layout of the prices below the product card in the collections page as shown below. Can you provide instructions on how to implement this?

https://www.artey.com.au/collections/canvas-prints

3 Likes

Hello @Artey

Please share Your store url

https://www.artey.com.au/collections/canvas-prints

You want this type

or this type

Hi @Artey ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

Hello @Artey

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.collection .price__sale { display: flex !important; flex-direction: column !important; } span:has(.price-item.price-item--regular) { order: 2; } span.price-item--sale.price-item--last { order: 1; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Hello. Thank you for the initial response. What about for changing the words used? I want to change the word “From” to “Was”. I might also change the word “Sale” to “Now”

Hello. Thank you for the initial response. What about for changing the words used? I want to change the word “From” to “Was”. I might also change the word “Sale” to “Now”.