MEGASTORE Theme: How to center a product image in the product sheet

Store Design

Topic summary

Main issue: Center product images within their containers on the product page using the Megastore (Shopify) theme. Images appear off-center, and the merchant seeks a theme-specific fix.

Attempts made: (A) Applied a CSS-based centering approach, but it had no effect (exact code not provided). (B) Tried general guidance—checking theme “Customize” settings for alignment options (notably on collection pages) and ensuring the source image itself is centered via editing tools like Photoshop/Canva—without success.

Evidence: A screenshot was shared illustrating the misalignment of the product image within its container. This visual suggests a layout or CSS constraint rather than an image-cropping issue.

Status: Unresolved and open. The user requests concrete steps or code tailored to the Megastore theme to center product images on the product sheet. Key needs include where in theme settings or code (e.g., CSS classes, object-fit, image wrappers) to modify alignment and whether Megastore overrides standard centering rules.

Summarized with AI on December 28. AI used: gpt-5.
1

Hello,

Could you please help us to center product images in their containers? We use the Megastore theme.

We already followed the following solutions with no success.

  A.CSS Solution

image
image903×657 43.3 KB

  B. Other solutions
  1. Check Theme Settings: Some themes have built-in alignment options under the ‘Customize’ section for collection pages.
  2. Image Content: Ensure the actual image file (edited in Photoshop/Canva) is centered, as CSS can only center its container.

Looking forward to hearing from you.

Thank you!

2 Likes
2

Hi @Phatou

Add this at the very bottom of your main CSS file:

Online Store → Themes → … → Edit code → assets → theme.css or base.css

.product-card__image,
.product-card__image-wrapper,
.product-card__image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__image img,
.product-card img {
  object-fit: contain !important;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

Best regards,
Devcoder :laptop:

3

@Phatou can you please share your website link?

4

Hi @devcoders,

Thank you for your message.

Unfortunately, the code doesn’t work.

If you have another solution, it would be helpful.

Best regards,

5

Hi @suyash1,

Here is the website link (under construction) https://ethniciabeauty.com/ along with the temporary password Shopify#123

Best,

6

Hi @Phatou

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.product__media-wrapper {
    align-items: center!important;
}

image
image1357×598 88.3 KB

7

Hi @devcoders

Thank you for helping us.

It appears that this code is not working.

Best,

1 Like
8

Hi @Phatou

The code I shared is working, dear.
Could you please send me a proper screenshot showing how you want it to be centered?

image
image1312×509 80.7 KB

9

Hi @Phatou

The code I shared is working, dear.
Could you please send me a proper screenshot showing how you want it to be centered?

image
image1312×509 80.7 KB

10

Hi @devcoders

You’re right, the code is working.

Thank you!

1 Like
11

Hi @Phatou

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop:

1 Like
12

HI @devcoders

Noted.

Happy New Year!!!

Best regards,

Phatou

1 Like
13

@Phatou

Happy new Year :grinning_face: