Adding space between product images -- Baseline Theme

Store Design

Topic summary

Issue: The store using Shopify’s Baseline theme wants a thin, adjustable vertical gap only between stacked product images on the product page, similar to the reference site. The gap should not introduce white space on the sides.

Proposed solution: A reply suggested adding CSS via Theme Settings > Custom CSS, targeting the Splide product gallery list items with margin-bottom: 20px and adding a white background to the image list. This was demonstrated with screenshots.

Feedback/concerns: The merchant clarified they do not want side white space, only a small vertical gap between images (bottom of one to top of the next). They also want the gap smaller than 20px and easily adjustable. The provided CSS appears to add side white space due to the background rule and the margin felt too large.

Status and next steps: No resolution yet. The merchant requested an alternative CSS approach that strictly adds vertical spacing between images (smaller, adjustable) without affecting side spacing. Awaiting a revised code snippet addressing these constraints.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello,

I am using Baseline Theme and I can’t find a solution for this simple change I’d like to make.

If you see here the product images are listed vertically: https://contrakidsmutiny.com/collections/new-arrivals/products/we-stand-tall-long-sleeve-t-shirt-1

I like the way the images appear, I simply want to add a very small amount of space ONLY between the product images, here is an example where you can see a very thin white line between each image: https://wearebraindead.com/products/lifted-stripe-long-sleeve-sweater-navy-multi?variant=44725162868867

I would like also a solution that can allow the amount of space (padding value?) to be easily changed later as well.

Thank you!

2

Hi @MJ82

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div#shopify-section-product > section.grid > .relative > div.splide.splide--product ul.splide__list > li {
    margin-bottom: 20px;
}
div#shopify-section-product > section.grid > .relative > div.splide.splide--product ul.splide__list {
    background: white !important;
}​

Here is the result: https://prnt.sc/UfVeCVkhTbeh

I hope this helps

Best,

Daisy

3

Thanks but I don’t want white space on the sides of the product images, I
only want a space between the bottom of one image and the top of the next
image underneath it as you scroll down.

Also I’d like to gap to be smaller, is this possible?

Thanks

4

Hi Daisy,

Are you able to advise about any alternative code further to my last message above?

Kind regards x