Re: Switch 'Was Price' and 'New Price' Position in Dawn Theme so 'New Price' Comes First

Solved

Switch 'Was Price' and 'New Price' Position in Dawn Theme so 'New Price' Comes First

babystore123
Excursionist
54 1 4

Hi, 

I want to switch the position between compare price and price of my theme on all pages.

Basically this would switch 'Was Price' and 'New Price' Position so 'New Price' Comes First.

 

See photo.

This is my store url/not live theme that I am editing:
https://babybliss.co/?_ab=0&_fd=0&_sc=1

Any help would be greatly appreciated,

Thank you!

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

Hey @babystore123,

 

Ok you can proceed to add this to the theme.liquid file 

<style>
.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}
</style>

 

If you want to add it to the Custom CSS box in the theme customizer, then add this instead

 

.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}

 

Whichever works for you 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 18 (18)

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @babystore123,

 

Try this and let me know if it works 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.price-list.price-list--centered {
    flex-direction: revert !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707070399341.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

Hi! It didn't change anything 😞

 

I'd like to change it both on the product and collection page!

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @babystore123,

 

Could you show me how you applied the code? I don't see any trace of it in the website

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

Just added it back 🙂

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @babystore123,

 

I still don't see it. Can you check if you added it on the correct theme? 

 

Please also send me a screenshot of how you added it.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

Here is the website theme I am editing: https://babybliss.co/?_ab=0&_fd=0&_sc=1

 

It's not the live website!

 

Whenever I try to attach a photo it won't let me... 😞

 

Under theme.liquid:

 

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>

 

Added here:

<style>
.price-list.price-list--centered {
flex-direction: revert !important;
}
</style>

 


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

<title>
{{ page_title }}
{%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
{%- if settings.animations_reveal_on_scroll -%}
<script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

 

etc...

ThePrimeWeb
Shopify Partner
2139 616 506

I still don't see it @babystore123.

 

Nevermind, can you add it here instead?

 

Just go to the Theme Customizer, select "Settings" and add it on the Custom CSS

.price-list.price-list--centered {
    flex-direction: revert !important;
}

ThePrimeWeb_0-1707074506418.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

Hi! Thank you! I did that too but nothing changed!

ThePrimeWeb
Shopify Partner
2139 616 506

Hey @babystore123,

 

Are you sure you are doing this on the right theme?

I am not seeing the code anywhere in the website at all.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ThePrimeWeb
Shopify Partner
2139 616 506

If you are working on a different theme, make sure you click on "Share preview" and send me the preview link. Right now I am seeing the live theme from your URL. 

ThePrimeWeb_0-1707075195008.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

That is the issue! Here is the Preview Link:

https://kp5h80jb5q6d4mnn-75721343252.shopifypreview.com

 

Thank you!!!

ThePrimeWeb
Shopify Partner
2139 616 506

This is an accepted solution.

Hey @babystore123,

 

Ok you can proceed to add this to the theme.liquid file 

<style>
.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}
</style>

 

If you want to add it to the Custom CSS box in the theme customizer, then add this instead

 

.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}

 

Whichever works for you 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4

Thank you! It does work but the only issue is that on the collection page, the was price/price is not centered. It's all the way to the right. How do I make it centered?

 

When there is no sale - just regular price - all text is centered.

babystore123
Excursionist
54 1 4

I just want the 'was price' / is price to be side-to-side on mobile. But right now it's all messed up after coding!

ThePrimeWeb
Shopify Partner
2139 616 506

It cannot be side by side on mobile @babystore123 , there's just not enough space. It can only be top and bottom. 

 

Replace the previous code with one below.

 

Just use this if you are applying it on theme.liquid

<style>
.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}

@media only screen and (max-width: 768px) {
    .price.price--on-sale .price__sale {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 0px !important;
        justify-content: center !important;
    }    
}
</style>

 

Or this if you are adding it onto Custom CSS. 

.price.price--on-sale .price__sale {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 10px !important;
}

@media only screen and (max-width: 768px) {
    .price.price--on-sale .price__sale {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 0px !important;
        justify-content: center !important;
    }    
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
babystore123
Excursionist
54 1 4
Can you send me a message? I want to explain more about the side-to-side!
ThePrimeWeb
Shopify Partner
2139 616 506

Sent

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Splurgee
Visitor
1 0 0

Hey, Were you able to find a solution for this issue? I am also experiencing the same challenge as you for switching the price fields.

 

I tried applying the steps provided by ThePrimeWeb but still side-by-side price issue occured, which you also mentioned.


I am new to all this so I really hope you can help with it.