Inverse Sale Price and Normal Price Position

Solved
thomasmrgn99
Explorer
54 0 12

Hi,

I am looking to swap the positions of the Sale Price and Pre-Sale price.

I am running debutify theme, store is pawcopets.co.uk

Thanks in advance!

0 Likes
Ninthony
Shopify Partner
2240 337 895

This is an accepted solution.

You can add this to the bottom of your theme.scss.liquid file:

.price-container {
    display: flex;
}
#ProductPrice {
    order: 1;
    padding-left:10px;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
thomasmrgn99
Explorer
54 0 12

Ledge @Ninthony thank you.. Do you know how I can change the font on the sale price?

0 Likes
thomasmrgn99
Explorer
54 0 12

The font size*

0 Likes
Ninthony
Shopify Partner
2240 337 895

You can add this underneath the other code you posted.

#ComparePrice {
    font-size: 10px;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
thomasmrgn99
Explorer
54 0 12

@Ninthony Thanks man appreciate it

Any idea how I can make the font bigger for the add to cart button text?

0 Likes
Ninthony
Shopify Partner
2240 337 895

This is an accepted solution.

.btn__add-to-cart-text {
    font-size: 20px;
}

.material-icons-outlined.button-cart-icon {
    font-size: 20px;
}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
thomasmrgn99
Explorer
54 0 12

Hi @Ninthony do you know why the 2 prices take a different line height when I change the font size on one? And if it is fixable

Screenshot 2021-09-28 at 13.01.27.png

0 Likes
Ninthony
Shopify Partner
2240 337 895

Define the line height in the price container:

.price-container {
    display: flex;
    line-height: 1em;
}

 

It might look a little off but that's just your eyes playing tricks:


Ninthony_0-1632834323457.png

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
thomasmrgn99
Explorer
54 0 12

Thank you sir! Appreciate @Ninthony 

By any chance do you know if there is a solution to this?

https://community.shopify.com/c/shopify-design/change-size-of-images-in-text-columns-with-image/m-p/...

0 Likes