How to change the font size of the “You may also like” portion on a product page?

Store Design
, ,

Topic summary

A user needs to modify the “You may also like” section on their product pages by:

Requirements:

  • Change recommended product title font size to 19px
  • Reduce spacing between product titles and images

Solutions Provided:

Two community members offered CSS code solutions to add to the theme.css file:

  1. First approach targets .product-recommendations__inner classes to adjust font size and product image height using CSS custom properties

  2. Second approach uses media queries for mobile screens (max-width: 749px), targeting .h4.item__title.product-card__title for font sizing and adjusting margin-bottom with negative spacing to reduce gaps

Both solutions involve editing the theme.css file through the store’s code editor (Actions > Edit code > Assets > theme.css). The second response includes a screenshot demonstrating the visual result of the changes.

Status: Multiple solutions provided; awaiting user confirmation of which approach worked.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I need to change the font size of the recommended product title to 19px.
Then shorten the space between the title and the product image, it looks like it’s wasting too much space.

Any help will be highly appreciated!

store URL: https://www.hookeroad.com/

3.png
3.png359×590 48.4 KB

1 Like
2

Hi @Dawn555 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.product-recommendations__inner .product-card__title {
   font-size: 19px;
}
.product-recommendations__inner .product-item--media {
   --product-image-height: 255px;
}
1 Like
3

Hello @Dawn555
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.h4.item__title.product-card__title {
font-size: 19px !important;
}
.half_row_mobile .use_align_height .product-card .product-card__image-with-placeholder-wrapper {
margin-bottom: -6rem !important;
}
}

result

88.png
88.png350×581 56.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks

1 Like