How can I add a border to products in Boost Theme?

Store Design
1

Hello, I am using Boost Theme by Clean Canvas. I would like a border around all my individual products, in all collections and on each product in the product page. Does anyone know the code on how this can be achieved?

Thanks in advance.

Eden

2

Hi @EdenC ,

Since not all developers have access to paid theme, can you provide your website? Thank you

3

Sure, the link is www.roguebunny.co.uk. Password is TOWNIA1 - Thank you :slightly_smiling_face:

4

HI @EdenC ,

I am assuming you want every product to be like a card in the home page. In the product page, you want the product images to be bordered.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the style.css
  3. Paste the code below at the very bottom of the file.
.product-carousel-peek .product-block.grid-flex__item:before {
    content: "";
    position: absolute;
    width: 95%;
    height: 95%;
    top: 45%;
    left: 55%;    
    outline: 1px solid;
    transform: translate(-50%, -50%);
    display: block;
}

a.global-border-radius {
    position: relative;
}

a.product-detail__thumbnail.global-border-radius-medium.media-thumbnail.media-thumbnail--media-image {
    border: 1px solid;
}

a.global-border-radius:after {
    content: "";
    position: absolute;
    border: 1px solid black;
    width: 99%;
    height: 100%;
    top: 50%;
    left: 49.5%;
    transform: translate(-50%, -50%);
    display: block;
}
5

Hello, thank you for your reply. That worked great for the individual product pages however I do not want the products on the home page in the form of a card, I only want the product images to have a border, I would like this to be the same across the entire website for the home page, collection pages and individual pages if that is possible? Thanks Eden

6

Hi @EdenC ,

Sorry about that. Please replace your code with the code below

.product-block img {
   border: 1px solid #000;
}

.product-media.product-media--image img.rimage__image.fade-in.lazyautosizes.lazyloaded {
    border-right: 2px solid #000;
}

.rimage-wrapper img {
    border: 1px solid #000;
}
7

Thank you so much! That worked perfectly. :grinning_face:

8

I used your code in my boost theme today and when i applied it to the Style.CSS this is what it looked like in the preview. Any help would be great. I been wanting a white border around my Product Blocks for some time now, and this was as close as it has come to having it the way I wanted.

hottopsgraphics_0-1685514641619.png
hottopsgraphics_0-1685514641619.png1740×796 272 KB

9

Hi @hottopsgraphics

Please open a thread with your website included. Not all solutions applies to everyone even it is the same theme.