Add border around each product tile

Store Design
, ,
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