How do I add a thin border around products in the Supply theme?

Store Design
, ,

Topic summary

A user wants to add a thin border around product images in their product grids on the Supply theme. They provided an example image and their store URL (defiancerc.myshopify.com, password protected).

Solution provided:

A community member shared CSS code to achieve this effect:

  1. Navigate to: Shopify Admin → Online Store → Themes → Actions → Edit code
  2. Open the Assets folder and locate the CSS file (base.css, style.css, or theme.css)
  3. Add the following CSS at the bottom:
.grid-item.one-half--small.one-quarter--medium.one-quarter--large.on-sale {
  border: 1px solid black;
  padding: 20px;
  height: 380px;
}

#div.collection-rows--collection-row-1 a.product-grid-item {
  object-fit: cover;
}
  1. Save the file

The helper included a screenshot showing the expected result with bordered product cards.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I’d like to add a thin border around my products in all my product grids. Something like this:

Example.jpg
Example.jpg1460×1557 217 KB

I’m using the Supply theme. Any help would be appreciated. Thanks.

1 Like
2

Hi @Ting_Wang ,

Would you mind to share your URL website? with password if its protected. Thanks!

3
1 Like
4

Thank you for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
  4. And Save.
.grid-item.small--one-half.medium--one-quarter.large--one-quarter.on-sale {}
a.product-grid-item {
    border: 1px solid black;
    padding: 20px;
    height: 380px
}
div#collection-rows--collection-row-1 a.product-grid-item {
    object-fit: cover
}

Result:

Ribe_Dagandara_0-1689870785705.png
Ribe_Dagandara_0-1689870785705.png1099×488 59.6 KB

I hope it help.