Using Rich Text Field on Product Standard Override Card

Search
1

Hi Team,

I am trying to use a rich text description field on a product standard override card and the text is not being formatted properly in the answers experience. Bold formatting is applied but not displaying that way in answers or the live preview.

Here is the details format I am using:
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, "richTextDescription", "_top") : null, // The text in the body of the card

image
image752×620 37.1 KB

image
image1324×335 21.3 KB

I have been following this HH module and have already disabled Show More/Show Less Functionality and added {{{ }}} to the Details section of the Handlebars Template with no change.

Does anyone have any suggestions for how I can get the bold formatting to apply?

Thanks,
Tori

2

Hi @Tori_Rest - it looks like you’ve configured rich text formatting correctly, but the <strong> tag is not rendering on your frontend. We’ll have our tech team take a look and get back to you!

Best,
Sam

3

Hi @Tori_Rest ,

I’ve also seen this a few times on my own experiences. While the tech team investigates, you could also add some quick CSS to your answers.scss file to ensure the bold formatting applies.

For example, the <strong> tag was not properly applying bold styling for my FAQ cards, so I added the following CSS to fix it:

.HitchhikerFaqAccordion-detailsText strong {
  font-weight: 600;
}

Hope this helps!

Best,
DJ

4

Hell Tori,

The theme uses the light and normal font weights to differentiate between the standard and bold text. Our most recent font “Source Sans Pro” supports both both of these weights however not all fonts have this support. In this case, the Theme’s styling is applying a font weight of 300 for the standard text and 400 for the strong text, however Roboto loads the same fonts for these values and therefore no bold formatting is visible.

In this situation, you can either make the strong text bolder like DJ_Corbett suggested, or you can add an additional lighter font to the site which will be used whenever a font weight of 300 is used by the styling.

Best,
Connor