Font style and separation distance between elements on the product page

Topic summary

A user requested help modifying custom CSS code on their Shopify product page to:

Desired changes:

  • Change color or make text bold for two specific descriptions (“Frete Grátis para Todo Brasil” and “Devolução Grátis”)
  • Reduce the spacing between these two sentences by half

Solution provided:
Another community member shared CSS code to be added above the </body> tag in layout >> theme.liquid:

  • Set margin-bottom and margin-top to 0!important for the .product__info-container .free-shipping class
  • Set font-weight: 700 for .product__info-container span.free-shipping__text to make text bold

Resolution:
The original poster confirmed the solution worked successfully and thanked the helper.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.

Hey guys,

I have a custom code for the products page. I would like to make small changes, such as: changing the color or bolding the descriptions (Frete Grátis para Todo Brasil and Devolução Grátis) and also reducing the distance that separates the two sentences in half. Can someone help me?

My site is: smartcasashop.com.br

The code is:

Frete Grátis para Todo Brasil .free-shipping{ padding-top: 0px; padding-bottom: 0px; text-align: Left; } .free-shipping__img{ vertical-align: middle; max-width: 30px; display: inline-block; margin-right: 0px; } .free-shipping__text{ vertical-align: middle; display: inline-block; font-size: 17px; }

Thnaks!!

@Danielpochapski

Hello,

Please use code given below. copy the code and paste above

layout >> theme.liquid


.product__info-container .free-shipping {
margin-bottom: 0!important;
margin-top: 0!important;
}
.product__info-container span.free-shipping__text {
font-weight: 700!important;
}

after paste the whole code looks like this.

1 Like

Thanks, @niraj_patel . Your solution helped me a lot! :slightly_smiling_face:

My pleasure :slightly_smiling_face: