FROM CACHE - en_header
Promotion image

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
‎02-04-2024 12:57 PM

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!

1,264 Views
0 Likes
Report
Accepted Solution (1)
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 03:01 PM

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? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

1,169 Views
0 Likes
Report
Replies 18 (18)

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 01:13 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,250 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 01:24 PM

Hi! It didn't change anything 😞

 

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

1,242 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 01:30 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,238 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 02:05 PM

Just added it back 🙂

1,216 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 02:11 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,214 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 02:16 PM

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

1,209 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 02:22 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,205 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 02:25 PM

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

1,199 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 02:29 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,196 Views
0 Likes
Report
In response to ThePrimeWeb

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 02:33 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,192 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 02:36 PM

That is the issue! Here is the Preview Link:

https://kp5h80jb5q6d4mnn-75721343252.shopifypreview.com

 

Thank you!!!

1,184 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 03:01 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,170 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 03:59 PM

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.

1,152 Views
0 Likes
Report
In response to babystore123

babystore123
Excursionist
54 1 4
‎02-04-2024 04:25 PM

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!

1,149 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 07:10 PM

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? [email protected] or check out the website
Check out our interview with Shopify!
1,128 Views
0 Likes
Report
In response to ThePrimeWeb

babystore123
Excursionist
54 1 4
‎02-04-2024 07:12 PM
Can you send me a message? I want to explain more about the side-to-side!
1,128 Views
0 Likes
Report
In response to babystore123

ThePrimeWeb
Shopify Partner
2138 616 502
‎02-04-2024 07:29 PM

Sent

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!
1,114 Views
0 Likes
Report
In response to babystore123

Splurgee
Visitor
1 0 0
‎07-13-2024 06:17 PM

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.

422 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy