Dawn theme product page spacing customization

Store Design
, , , , , , , ,

Topic summary

A user working with Shopify’s Dawn theme wants to eliminate spacing between product images on the product page. They provided a preview link and screenshot showing the unwanted gaps.

Proposed Solution:

A responder outlined two approaches:

  1. Theme Customizer Method:

    • Navigate to Online Store → Themes → Customize
    • Select Product pages from the dropdown
    • Access Product Information section
    • Adjust spacing settings if available

  2. CSS Code Method:

    • Go to Online Store → Edit Code
    • Open base.css or section-main-product.css in Assets
    • Add custom CSS targeting .product__media-wrapper and .product__media-list
    • Set padding, margin, and gap properties to 0 !important

The solution remains pending implementation and confirmation from the original poster.

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

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:

Screenshot 2025-03-23 at 10.59.19 AM.png
Screenshot 2025-03-23 at 10.59.19 AM.png2318×1324 633 KB

2

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;

}

  1. 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,

1 Like