Shopify themes, liquid, logos, and UX
How to i get the new price to the left and the crossed through price to the right, so how do i flip them?
Solved! Go to the solution
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.price__sale {
display: flex!important;
flex-direction: column;
}
.price-item--sale {
order: -1;
}
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.price-item.price-item--sale.price-item--last {
font-size: 20px;
}
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container .price--on-sale .price-item--regular {
font-size: 20px;
}
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.price__sale {
display: flex!important;
flex-direction: column;
}
.price-item--sale {
order: -1;
}
that did it, thanks!
Hi @Svds
Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.
Thank you!
do you also know how i increase the size of the new price a bit?
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.price-item.price-item--sale.price-item--last {
font-size: 20px;
}
thank you, but it looks like the price moved just a bit down and isnt aligned with the compare price anymore.
This is an accepted solution.
Hello There,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
.product__info-container .price--on-sale .price-item--regular {
font-size: 20px;
}
How can i delete the "EUR" that is after the original and compare price ?
And do you also know how to change the numbers underneath the product page pictures to dots?
Hi @Svds
These two tasks cannot be done with CSS alone. You'll need to go into the theme and make changes to the custom JavaScript (JS) and Liquid code to achieve them.
Thank you!
okay, could you do that for me? or someone else, to hire you or them for that?
now the products that are not on sale are like this: (see picture) how can i solve this?
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025