How to add some gap in the images

Topic summary

A Shopify store owner needs help adding spacing between small product images on their product page. The issue involves thumbnail images appearing too close together without gaps.

Three solutions were proposed:

  1. Remove existing CSS: Delete conflicting CSS code from the theme file that may be preventing proper spacing.

  2. Add custom CSS to theme.liquid: Insert CSS code in the theme.liquid file before the closing body tag to adjust image spacing.

  3. Modify component-slider.css: Add specific CSS targeting the mobile slider component:

    .slider.slider--mobile {
      column-gap: 3rem !important;
      row-gap: unset !important;
    }
    

    This solution includes a visual result showing the spacing applied.

All responses provide step-by-step navigation through Shopify’s theme editor. The discussion remains open with no confirmed resolution from the original poster yet.

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

Hello guys, how can i adjust in my small images some space in between?

Here is the URL and password:

https://www.nistore.de/products/3-in-1-dog-hair-brush-cat-hair-brush-electric-pet-cleaning-brush-steam-spray-brush-massage-hair-removal-comb-anti-flying-brush

nikthe

1 Like

Hi

Remove the below css from your theme file . This will solve your issue.

Darshan17_0-1745929545736.png

Thanks!


Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> component-slider.css
add this code at the end of the file and save.

.slider.slider--mobile {
column-gap: 3rem !important;
row-gap: unset !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks