Solved

How to change the price to a different color and font then regular on Focal Theme

MS-Ecom2024
Excursionist
33 1 9

Hey guys, I want to make the compared price and the normal price the same size and change the appearance to the one sent as reference here. 

I would be happy if anyone has a solution for that. 😀

Current state: 

 

Bildschirmfoto 2024-01-05 um 21.36.28.png



Reference:

 

Bildschirmfoto 2024-01-05 um 21.15.53.png

Accepted Solution (1)
Moeed
Shopify Partner
3544 893 1108

This is an accepted solution.

Hey @MS-Ecom2024 

 

You can add this code in end of theme.liquid file, it should work for you

<style>
 @media screen and (min-width: 768px) {
  product-meta.product-meta span.price.price--compare {
  font-size: 22px !important;
}
  }
  @media screen and (max-width: 767px) {
 product-meta.product-meta span.price.price--compare {
  font-size: 19px !important;
}
  }
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
5126 1222 1496

Hi @MS-Ecom2024 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MS-Ecom2024
Excursionist
33 1 9

Can I send it to you privatly? 

Made4uo-Ribe
Shopify Partner
5126 1222 1496

Yes, sure,. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
5126 1222 1496

Hi @MS-Ecom2024 

Thanks, like this right? 

Made4uoRibe_0-1704491760697.png

If it is check this one. 

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:

 

span.price.price--compare {
  font-size: 22px !important;
}

 

And Save. 

The size that i used is from the original price size. 

 

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MS-Ecom2024
Excursionist
33 1 9

Hey, thank you! The Code you've sent works perfectly on desktop but is too big on mobile view. If you can fix that for me, I would be really happy!

MS-Ecom2024
Excursionist
33 1 9

Hey, thank you! The Code you've sent works perfectly on desktop but is too big on mobile view. If you can fix that for me, I would be really happy!

Moeed
Shopify Partner
3544 893 1108

This is an accepted solution.

Hey @MS-Ecom2024 

 

You can add this code in end of theme.liquid file, it should work for you

<style>
 @media screen and (min-width: 768px) {
  product-meta.product-meta span.price.price--compare {
  font-size: 22px !important;
}
  }
  @media screen and (max-width: 767px) {
 product-meta.product-meta span.price.price--compare {
  font-size: 19px !important;
}
  }
</style>

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App