How can I modify my product price design color?

Store Design
1

I was wondering how I could change my product price design from,

this

fouzzy_1-1693082112242.png

to this

fouzzy_2-1693082127438.png

but the crossed one red and the red price to just black.

2 Likes
2

Hi @fouzzy

You mean like this?

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
s.price-item.price-item--regular {
    color: red;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Thank you, how do I make them both the same size? and how do I do this for the like all products page?

1 Like
4

It will apply all the color all the products you have. For the font try this one.

Same Instruction.

.product__info-container .price--on-sale .price-item--regular {
    font-size: 1.8rem !important;
}

And Save.

i hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Thank you so much, there is just a small problem because when I go to the products page where it showcases all my products, the red color works but it doesn’t make it the same size and it doesn’t remove " from".

Btw thank you so much for your time and trying to help me!

1 Like
6

Deleting the From it needs a liquid code to delete.

For the font size try this one.

#product-grid > li > div > div > div.card__content > div.card__information > div > div.price.price--on-sale > div > div.price__sale > span:nth-child(2) > s {
    font-size: 1.6rem;
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

Thank you so much!!

1 Like
8

Hi @fouzzy

Try this one again, it for the product page.

#price-template--19326416650570__main  div.price__sale > span > s {
    color: red !important;
    font-size: 1.8rem !important;
}

And for the homepage.

#Slide-template--19326416486730__de5411bf-4a10-40d9-afb4-d7298c677b3b-1 > div > div > div.card__content > div.card__information > div > div.price.price--on-sale > div > div.price__sale > span > s {
    color: red !important;
    font-size: 1.8rem !important;
}
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

9

I added this under the code you gave me last time in base.css, and it works for some products but not all and on the home page it makes it different sizes. And on mobile none of the codes work.

1 Like
10

.product__info-container .price–on-sale .price-item–regular {
font-size: 1.6rem !important;
}

#product-grid > li > div > div > div.card__content > div.card__information > div > div.price.price–on-sale > div > div.price__sale > span:nth-child(2) > s {
font-size: 1.6rem;
}

#price-template–19326416650570__main div.price__sale > span > s {
color: red !important;
font-size: 1.6rem !important;
}

#Slide-template–19326416486730__de5411bf-4a10-40d9-afb4-d7298c677b3b-1 > div > div > div.card__content > div.card__information > div > div.price.price–on-sale > div > div.price__sale > span > s {
color: red !important;
font-size: 1.6rem !important;
}
}

1 Like
11

oh, Sorry I forgot to tell you please delete the other code that I give first. And remain the code that I give today. And check if it still not working. And I will check the homapage if still not work on the code that I give.

12

Delete this.

Ribe_Dagandara_1-1693343634271.png
Ribe_Dagandara_1-1693343634271.png733Ă—136 9.89 KB

And Remain the one that I give today and also delete the 2nd bracket on the the very last code.

Ribe_Dagandara_2-1693343729244.png

I didnt notice it. I was about to give you a media query code. But when i check it work on mobile. Test it first, im only using inspect tools so I cant check it well. Thanks!

13

now it stopped working for desktop too and it doesnt work on ipad or mobile :disappointed_face: Im gonna leave the code so you can see.