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

Store Design
,

Topic summary

A Shopify store owner is experiencing inconsistent spacing between product page slider images—some products show visible gaps while others have images touching directly. This affects mobile display particularly.

Proposed Solutions:

Multiple respondents suggest adding custom CSS code to standardize the gap:

  • Location: Online Store → Themes → Edit Code → base.css, theme.liquid, or component-product.css (varies by theme)
  • Method: Insert CSS targeting .product__media-thumbnails with display: flex and a consistent gap value (6-8px recommended)
  • Key properties: Override existing margins/padding with !important, use flex-wrap: nowrap for horizontal scrolling

Mobile-specific fix: Wrap the CSS in a media query (@media screen and (max-width: 768px)) to adjust gap size for smaller screens.

The issue likely stems from inconsistent image dimensions or theme-specific spacing variations in Flexbox/Grid layouts. The discussion remains open pending confirmation from the original poster on whether the solutions resolved the problem.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
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: