Jump to content

Product Prices - is it possible to make them Bold and in color?

Go to solution Solved by tuanphan,

Recommended Posts

 

Hello everyone, 

Can anyone please help me with the code to change the font size/color of my prices? I want the price to stand out via bold and red or maybe green. Can anyone help me on how to do this? I have 7.1 Squarespace.

Thank you!

Link to comment
  • Replies 8
  • Views 243
  • Created
  • Last Reply

Top Posters In This Topic

the only custom codes I have installed are to move down the price to be near the 'add to cart' button. I am trying to change the color and bold the price within the product blocks that aren't in my shop. I have attached images below. image.thumb.png.18e8727dcdf018f04edc1420669aae1d.png

Screenshot 2024-04-29 at 7.56.38 AM.png

Link to comment
  • Solution
On 4/29/2024 at 8:21 PM, MJKing said:

the only custom codes I have installed are to move down the price to be near the 'add to cart' button. I am trying to change the color and bold the price within the product blocks that aren't in my shop. I have attached images below. image.thumb.png.18e8727dcdf018f04edc1420669aae1d.png

Screenshot 2024-04-29 at 7.56.38 AM.png

You can use this code to Website > Website Tools > Custom CSS. If it doesn't work, you can share link to page where you use product block, we can check easier.

div.product-block .product-price, body.view-item .product-price {
	font-weight: bold !important;
	color: #f1f !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/1/2024 at 7:28 PM, MJKing said:

Yes, that worked! Thank you! Is there a way to increase the size of the price though on the selected products page? The other pages, the size and color are perfect.

https://www.mjkingart.com/shop-1/p/through-the-vines

Screenshot 2024-05-01 at 8.27.43 AM.png

You can use this CSS code

body.view-item .product-price {
    font-size: 20px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.