Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
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.
Hi! It didn't change anything 😞
I'd like to change it both on the product and collection page!
Hey @babystore123,
Could you show me how you applied the code? I don't see any trace of it in the website
Just added it back 🙂
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.
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 %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} – {{ 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...
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;
}
Hi! Thank you! I did that too but nothing changed!
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.
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.
That is the issue! Here is the Preview Link:
https://kp5h80jb5q6d4mnn-75721343252.shopifypreview.com
Thank you!!!
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
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.
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!
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;
}
}
Sent
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.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024