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 </head> tag: 

<style>
.price__sale {
    display: flex !important;
    flex-direction: column !important;
}
span:has(.price-item.price-item--regular) {
    order: 2;
}

span.price-item.price-item--sale.price-item--last {
    order: 1;
}
</style>

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 😍

[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".  

[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 </body> on theme.liquid
<style>
  .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;
  }
</style>

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