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

[Artey]

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

[AK_Design_Dev]

Hello @Artey

Please share Your store url

[Artey]

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

[AK_Design_Dev]

You want this type

or this type

[BSSCommerce-HDL]

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

[niraj_patel]

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.

[Artey]

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”

[Artey]

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”.