Studio Theme - Make Featured Product block smaller

Store Design
, , ,

Topic summary

A user seeks to reduce the height of a Featured Product block on their Shopify store’s homepage to match the height of an adjacent Featured Collection block.

Initial Solution Attempt:

  • A helper provided CSS code to be added to the theme.liquid file above the </body> tag
  • The code targeted .featured-product with specific height properties
  • This initial solution did not resolve the height issue

Revised Solution:

  • Updated CSS code was provided using max-height instead of fixed height
  • The new code successfully reduced the block height

Current Issue:

  • After implementing the height reduction, the product image now overflows its container
  • The user is asking for additional CSS adjustments to make the image size responsive/dynamic to fit properly within the reduced height

The discussion remains open with the image overflow problem unresolved.

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

Hey @boltandchisel

Apologies for the confusion, if you meant to make this section smaller by height then please add the following code.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1692441759027.png
Moeed_0-1692441759027.png1897×646 124 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed