Jump to content

Font color in product description

Recommended Posts

I want to highlight one sentence in a product description by changing its color.  I cannot believe that in the text format box there is no standard options for changing color of text.  Just like there is right here where I am typing this!  I have now spent 3 hours trying to figure out how to do it with no luck at all.  I do not want to add a code block to the additional information area.  I want this to appear right next to the product image, not underneath.  There must be a way to do this?  This should be something quick and simple... I just don't get it.

I want my description to look like this: (which took me 1 second to do here)

Design size is 24" x 27" stitched 2 over 2 on 28 count fabric.

This is a digital file that will be emailed to you within 3 business days after purchase.

I want the second sentence to be red.  How do I do this?

Thank you.

Link to comment

It may depend on the exact template you are using, but you would target the product description and set up italics to be red instead of italics in Custom CSS. Then when you write out your description, put what you want to be red in italics. So something like this in Design > Custom CSS

.ProductItem-details-excerpt em {
color: #990000 !important;
font-style: normal !important;
}

 

Edited by christyprice
Link to comment

Thank you for your response.  I have yet to change anything in the CSS.  I have no experience with that.  I added what you typed there exactly and it didn't work.  I am guessing I have to have more code than that.

So I am guessing there is no easy way to do this...  something that should be a standard thing.

Thank you again.

Link to comment

@xstitchboutique,

Try copying and pasting in the code above to Design > Custom CSS. Make sure you have all of it and that there is no error in the window.

Then, edit a product description and italicize the sentence you want to be in the red color. You won't see the red here.

Save it, then open up a new browser window and look at that product on the live site. The sentence you italicized will show up in red.

 

Link to comment

Thanks so much @xstitchboutique! Could you please vote up my solution (the arrow on top of the 0 on the left of the post) and like the post (bottom right thumbs up symbol)? That lets others know it was solved.

Link to comment
  • 4 months later...

@xstitchboutique try adding this code to Design > Custom CSS. Make sure you have all of it and that there is no error in the window.

Then, edit the product additional information and italicize the sentence you want to be in the red color. You won't see the red here.

Save it, then open up a new browser window and look at that product on the live site. The sentence you italicized will show up in red.

.ProductItem-additional em {
color: #990000 !important;
font-style: normal !important;
}

 

Edited by christyprice
Link to comment
  • 2 weeks later...

We made an add-on you can use to customize text on your site as well. Comes in handy for headlines you want to emphasize, etc. Can be found here: https://www.squareaddons.com/shop

Screen Shot 2020-04-24 at 1.35.11 PM.png

If you are looking for a way to add Anchor Links, Gallery Blocks, or a Rotating Banner with Content Blocks overlaid in Squarespace 7.1, you can find all these plugins in our Squarespace add-on store here: www.Squareaddons.com -- Enjoy! 

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.