Dawn theme product page spacing customization

[Sivadarshan]

I’m using the Dawn theme and need to customize the product page by removing the padding or margin in the product image area. I’ll attach a reference image. In simple I want to remove the spacing between the images on the product page Please help me with the customization.

Website: https://ju6mhj8jm6am1aid-73415852291.shopifypreview.com

Password: 2512

My need: 

[Dotsquares · Accepted solution]

Hi @Sivadarshan 

These are the steps to remove padding and space using Shopify admin of Product Image Area (Dawn Theme):

1. Go to Shopify Admin → Click Online Store → Select Themes

2. Find the Dawn theme and click Customize

3. In the top dropdown, select Product pages

4. Click on the Product Information section

5. Check if there’s an option for spacing (if so, reduce it)

Manually Remove Padding/Margin via Code.

If no option is available, you’ll need to edit the theme's CSS:

1. Go to Online Store → Click Edit Code

2. Open base.css or section-main-product.css (found under Assets)

3. Add this CSS at the bottom:

/* Remove spacing between product images */

.product__media-wrapper {

    padding: 0 !important;

    margin: 0 !important;

}

.product__media-list {

    gap: 0 !important;

}

4. Click Save and refresh your store preview

Let me know if you need further adjustments!

Hope this helps, let me know if you need more help.

Regards,