Product page image square custom

Store Design
, ,

Topic summary

A user is trying to customize their product page images in the Dawn theme. They want transparent PNG/WEBP images to display centered on a square background (#F3F3F3) in the media section, rather than the current layout.

Technical Solution Attempted:

  • Modify section-main-product.css in the assets folder
  • Add background color code to .product-media__list .product-media__item
  • Adjust width/height percentages (changing 65%/35% to 55%/45%)

Current Status:

  • Initial CSS changes successfully added the background color
  • However, images still appear rounded instead of square
  • Percentage adjustments haven’t resolved the layout issue

Ongoing Challenge:
The helper (@Shadab_dev) suggests direct store access would make troubleshooting easier, as CSS modifications aren’t producing expected results. The user prefers not to share store URL publicly. The discussion remains unresolved, with the helper willing to continue assistance but noting that back-and-forth troubleshooting without live preview access is challenging.

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

@sy42941 honestly I don’t get when u say middle of the square media area.

Do you want the product details to come down and image be in the middle.

Sorry about this but can u please be a bit more clearer, may be an example photo would help.

Thanks & Regards