Product image and product name alignment

Store Design
,

Topic summary

Goal: Align the top of the product image with the product title in a Shopify theme. A screenshot is provided and central to understanding the desired layout.

Key suggestions:

  • Content cause: Misalignment often results from extra empty space (“air”) at the top of product images. Cropping images tightly and consistently is the most robust fix.
  • CSS approach: If images are consistent, adjust theme CSS to force top alignment. Suggested rules include setting the image wrapper’s top margin to 0 (!important), positioning images to the top (object-position: top), and aligning the media container to the start (align-self: flex-start). Placement: Theme → Customize → Theme settings → Custom CSS or in base.css. Exact selectors may vary by theme.

Requests for details:

  • Several respondents asked for the store URL (and password if protected) to inspect theme markup and provide theme-specific CSS.

Status:

  • No confirmation from the original poster yet; no verified resolution. Next step is to share the store link so tailored CSS can be provided, or implement consistent image cropping plus the suggested CSS and test alignment.
Summarized with AI on December 11. AI used: gpt-5.
1

Is it possible to have the top of the product image and product name in alignment with each other as shown in the attached image?

Screenshot 2025-11-16 at 10.44.27 AM
Screenshot 2025-11-16 at 10.44.27 AM1920Ă—1063 97.1 KB

1 Like
2

@beckstead can you please share this page link? I will check the code and give you the css

3

Hi @beckstead

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

This often happens because you have some “air” in your image.

The best way to fix it would be to crop your images tightly.

It also possible to compensate for this with some CSS, but you must be sure that all your images have same amount of empty space at the top, otherwise it would not look good.

5

Hi @beckstead ,
Yes, this alignment is possible. You just need to adjust the vertical positioning of the product image so the top of the image lines up with the product title.

Add this CSS to Theme → Customize → Theme settings → Custom CSS or base.css:

.product__media-wrapper {
    margin-top: 0 !important;
}

.product__media img {
    object-position: top;
}

If your theme uses a different wrapper, you can also try:

.product__media {
    align-self: flex-start;
}

This forces the product image to start at the top, aligning it with the product title section. Adjust margin as needed based on your theme.

6

Hello @beckstead,

It’s possible to align the top of the product image with the product title in Shopify.
This can be achieved with a small CSS adjustment to your theme.

Kindly share your store URL and I can give you the exact CSS code that matches your theme structure. Thank you.