How to resize the height of the prodcut image and text font to make them smaller on product page?

Technical Q&A
, ,

Topic summary

A Shopify store owner seeks to reduce the height of product boxes and adjust text sizing on their product pages.

Initial Request:

  • Originally asked about resizing product image height and text fonts
  • Provided store URL and screenshot showing the current layout

Solutions Offered:

Two community members provided CSS-based solutions:

  • One suggested adding custom CSS code in the theme.liquid file above the </body> tag
  • Another recommended adding CSS to base.css or theme.css targeting product media images, titles, prices, and descriptions with specific pixel values

Clarification:
The original poster clarified they want to reduce the overall product box height, not just the product image itself. Included a new screenshot to illustrate the specific area needing adjustment.

Status: The discussion remains open as the initial solutions didn’t fully address the clarified requirement for reducing the product box container height.

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

Hello all,

I want to resize the height of the product image and text font to make them smaller on the product page.

My store URL: https://u7yeji-na.myshopify.com/

IMG_6990.PNG
IMG_6990.PNG1125Ă—2436 259 KB

1 Like
2

Hey @Mamdouh_USD

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-1751099781509.png
Moeed_0-1751099781509.png368Ă—627 54.4 KB

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

Best Regards,
Moeed

3

Hello there!

Ian here from Fast Bundle.

Here’s what you can do:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click “Customize” on your current theme.
  3. Click the “Theme settings” at the bottom left.
  4. Go to “Custom CSS” or go back and click “Edit code” under “Actions”.
  5. In the code editor, open the file:
    Assets > base.css or Assets > theme.css (depends on your theme name).
  6. Scroll to the bottom and paste this code:
/* Resize product image */
.product__media img {
  max-height: 300px; /* Adjust this number as needed */
  object-fit: contain;
}

/* Resize product title */
.product__title {
  font-size: 22px; /* Change to your desired size */
}

/* Resize product price */
.price {
  font-size: 18px;
}

/* Resize product description */
.product__description {
  font-size: 16px;
}
4

Hi @FastBundle-Ian

So sorry but I want to make the height of product box smaller not the product image. Hope you can help.

IMG_6994.PNG
IMG_6994.PNG1125Ă—2436 205 KB