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

Store Design
,
1

Hi everyone,

I’m facing an issue with the image slider under the main product photos on my Shopify store. For some products (for example, Flower ring), there is a small visible gap between the images in the slider. However, for other products, the images in the slider are directly touching each other, without any gap.

I would like the gap between the images to be consistent across all products, no matter which device (especially mobile) a customer is using.

Does anyone know which code I could add to make sure that the spacing between the images in the product page slider is always the same?

Thank you in advance for your help!

IMG_4130.jpeg
IMG_4130.jpeg1170×2532 130 KB

IMG_4131.jpeg
IMG_4131.jpeg1170×2532 113 KB

2 Likes
2

  • your Shopify Admin, go to Online Store > Themes.

  • Click Customize next to your theme.

  • Click the three dots (⋮) in the top left, then choose Edit code.

  • Open the base, theme, or custom file (the name depends on your theme).

  • Scroll to the bottom and paste the code above.

  • Click Save.

1 Like
3

Hey @JoaquinExcitare

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1747077628924.png
Moeed_0-1747077628924.png340×756 42.7 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi JoaqquinExcitare

if you want to lock in even spacing for all your slider pics, go to Online Store > Themes > Edit code and open your main CSS file.

look for the selector that wraps each slide (it might be called something like “slide” or “carousel-item”) and give it a consistent right (or bottom) margin—whatever feels right for your design.

Save your changes, refresh a few product pages on mobile and desktop, and you should see the same gap everywhere.

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: