How to make the gap between images in the product page slider consistent across all products? Post

Store Design
,
5

Hi there :waving_hand:

It sounds like your product image thumbnails (slider) are styled inconsistently—possibly due to different image sizes or variations in how the theme applies spacing (margin/padding) between them. This is common in themes like Dawn or custom ones using a Flexbox or Grid layout.

To fix this and make the gap uniform across all product pages and devices, you can add some custom CSS.

:hammer_and_wrench: Try This Custom CSS:1. Go to:

Online Store → Themes → … → Edit Code

  1. Open this file:
    assets/base.css or assets/component-product.css
    (The exact file may vary depending on your theme version)

  2. Scroll to the bottom and add this code:

css

CopyEdit

.product__media-thumbnails {
display: flex;
gap: 8px; /* Adjust the gap as needed */
flex-wrap: nowrap;
overflow-x: auto;
}

.product__media-thumbnail {
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
}

What this does:- Forces equal spacing (gap) between thumbnail images

  • Overrides any inconsistent margins/padding

  • Keeps it responsive on mobile

:mobile_phone: Tip for Mobile:

If you’re seeing weird spacing only on smaller screens, you can also wrap this CSS inside a media query:

css

CopyEdit

@media screen and (max-width: 768px) {
.product__media-thumbnails {
gap: 6px;
}
}

Let me know which theme you’re using if you’re unsure where to place the code—I’d be happy to guide you step by step. :blush: