How to display the sale price first and the strike-through price (original price) afterward?

ROEDADK
Tourist
7 0 5

Hey there, 


How to display the sale price first and the strike-through price (original price) afterward on Shopify product page, my theme is dawn.

 

Link to the page: Ayatul-Kursi Bracelet Cuff – ClassyCuff

 

screenshot for context:

ROEDADK_0-1710541000588.png

 

 

 

Replies 6 (6)

Vinsinfo
Shopify Partner
158 56 50
Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.
 
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.
Before:
Vinsinfo_0-1710568981195.png

After:

Vinsinfo_1-1710568993628.png

4. Save the file.

 
Now, the sale price will appear first and strike through price will appear next.
Vinsinfo_2-1710569338194.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Vinsinfo
Shopify Partner
158 56 50

@ROEDADK 

Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.
 
1. From admin, go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.
Before:
Vinsinfo_0-1710570154786.png

 

After:

Vinsinfo_1-1710570155243.png

 

4. Save the file.

 
Now, the sale price will appear first and strike through price will appear next.
Vinsinfo_2-1710570154718.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

devcoders
Shopify Partner
63 6 21

Hi @ROEDADK 

Admin, go to online store > themes > actions > edit code.
Asset > base.css and paste this at the bottom of the file.

 

.price--on-sale .price__sale {
    display: flex;
    align-items: baseline;
}
.price--on-sale .price__sale span {
    order: 2;
}
span.price-item.price-item--sale.price-item--last {
    order: 0;
}

 

 

devcoders_0-1710570921585.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

Vinsinfo
Shopify Partner
158 56 50

@ROEDADK Please follow below steps to display sale price first and strike through price after. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Go to "price.liquid" and search "<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span> ". Select this code and below code as shown in below "Before" screenshot and paste the codes above next to the line "<div class="price__sale">" as shown in "After" screenshot.

Before:

Vinsinfo_0-1710580306453.jpeg

 

After:

Vinsinfo_1-1710580306454.jpeg

 

4. Save the file.

Now, the sale price will appear first and strike through price will appear next.

Vinsinfo_2-1710580306455.jpeg

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

ROEDADK
Tourist
7 0 5

Hi there, I tried it but it didnt work

ROEDADK_0-1710608285989.png

 

devcoders
Shopify Partner
63 6 21

Hi @ROEDADK 

Admin, go to online store > themes > actions > edit code.
Asset > base.css and paste this at the bottom of the file.

 

.price--on-sale .price__sale {
    display: flex!important;
    align-items: baseline;
}
.price--on-sale .price__sale span {
    order: 2;
}
span.price-item.price-item--sale.price-item--last {
    order: 0;
}

devcoders_0-1710611048927.png

 

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!