In product grid how to adjust space between product image, description, price and the next item?

Store Design
,

Topic summary

A user working with the Shopify SUPPLY theme sought to reduce spacing in their product grid, specifically wanting to:

  • Move product titles closer to images
  • Remove excess space below items
  • Address layout issues worsened by the Osaria media player

Screenshots showed significant vertical gaps between grid elements on earcave.com.

Solution provided:

Custom CSS code targeting .product-grid-image, .grid-item, and related classes was added to the theme’s CSS file (base.css/style.css/theme.css). The code adjusted:

  • Bottom margins on product images (12px)
  • Paragraph spacing (5px)
  • Grid item padding (10px)
  • Product title margins and image heights

The original poster confirmed both initial and follow-up CSS solutions successfully tightened the layout.

Another user later reported difficulty implementing the solution on their theme, suggesting the CSS may be theme-specific and require adjustment for different Shopify themes.

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

I’ve tried a few other suggestions in editing the code, but none of them seemed to work for our theme SUPPLY.02

Here’s a few screenshots.. how do we clean this up and tighten up the product by moving the Title closer to the Image, and removing the space under the item. We are trying to use the Osaria media player, and it made the current justification worse.

Screen Shot 2023-09-27 at 11.47.54 AM.png
Screen Shot 2023-09-27 at 11.47.54 AM.png826×1287 179 KB

Screen Shot 2023-09-27 at 11.48.46 AM.png
Screen Shot 2023-09-27 at 11.48.46 AM.png1110×1211 185 KB

site is : https://earcave.com

1 Like
2

Hi @madmosaic

TRy this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-grid-image {
    margin-bottom: 12px;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
    margin-bottom: 5px;
}
.grid-item {
    padding-left: 10px;
}
1 Like
3

Hi @madmosaic ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

1 Like
4

thank you for your reply, how would you move the product closer to the product below it?

1 Like
5

excellent! that worked!

6

Try this one for then.

Same instruction.

span.h1.medium--left {
    margin: 0px !important;
}
.product-grid-image {
    height: 185px !important;
}
.grid-item.small--one-half.medium--one-fifth.large--one-fifth p {
    margin-top: 25px;
}

And Save.

Result:

Made4uoRibe_0-1695833767772.png
Made4uoRibe_0-1695833767772.png1050×426 144 KB

7

this worked too ! thank you for your time

8

Hello I can’t seem to make it work on my theme