Add border around each product tile

Store Design
, ,

Topic summary

A user seeks help adding borders and shadow effects to product tiles on their Enterprise theme store.

Initial Solution:

  • Another user provides CSS code to add borders and shadows to product cards
  • After initial failure, the solution successfully works

Follow-up Requests:

  • The original poster asks about increasing card size and spacing (resolved independently)
  • New request: Add a bottom border divider on mobile layout only, constrained to box item width rather than full edge-to-edge

Current Status:

  • CSS code provided for mobile border using media queries and :after pseudo-element
  • Implementation unsuccessful - border not appearing
  • Helper requests clarification on which file the CSS was added to, noting it’s not visible in the storefront source
  • Discussion remains open with troubleshooting in progress
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hey folks,

I was wondering if someone could help me add a border around the product tiles which would be visible on all pages.

The look would be like the below (just the border and shadow effect)

cardboardhouse_0-1747057781645.png
cardboardhouse_0-1747057781645.png676×526 141 KB

I’m on the enterprise theme, thanks a lot!

2

Hi @cardboardhouse

let try to add this custom css to your file main.css:

product-card.card {
  border: 1px solid rgba(var(--text-color) / .15);
    box-shadow: 0px 1px 6px rgba(var(--text-color) / .15);
    padding: 6px 9px;
}

the result will be:

BiDealDiscount_0-1747058826526.png
BiDealDiscount_0-1747058826526.png1332×950 252 KB

3

Sorry it didn’t do anything :disappointed_face:

4

You are too good :rofl: - Thanks a lot!

Do you know how I can increase the size of the cards and actually everything on the page? it seems too bunched togther

1 Like
5

Yes I’m still here :joy:

can you detail this will a screenshot?

6

All good, I fixed it myself - Thanks!

7

Okay. Let me know if you need support

8

Thank you! Do you know how to add a bottom border just on mobile layout? Like below - The divider should only stretch the length of the box item, not from the full edge to edge

cardboardhouse_0-1747061470890.png
cardboardhouse_0-1747061470890.png403×737 40.6 KB

9

let try this css:

@media screen and (max-width: 599px) {
  .shopify-section-group-footer-group ul.slider__grid li:not(:last-child) {
    position: relative;
  }
  .shopify-section-group-footer-group
    ul.slider__grid
    li:not(:last-child):after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(var(--scrollbar-color, 60 60 60));
  }
}

BiDealDiscount_0-1747062234976.png
BiDealDiscount_0-1747062234976.png594×871 54.7 KB

10

Didn’t work :disappointed_face: - Nothing shows

11

which file did you add that css code? I don’t see it on storefront source