Box border around products

Highlighted
Tourist
8 0 1

Can anyone tell me how to create a basic 1px box around my products? I am using the minmal theme. I am a beginner, so please try to keep explination simple.

0 Likes
Highlighted
Shopify Expert
115 21 44

You will need to edit the code on your theme. 

ADMIN => Online Store => Themes => Find Minimal (Click 3 dots icon top right) => Edit HTML/CSS

Find the file theme.scss.liquid and add this code to the very bottom. (You can replace #ccc with the hex code for the color you want.)

.grid-link {border:1px solid #ccc;}

You will probably want to also center the text below the thumbnail so it doesn't push against the borders. 

ADMIN => Online Store => Themes => Find Minimal => Click Customize Theme => Collection Page (tab) => Check Center text below product images

Hopefully that helps you out. Good luck!

1 Like
Highlighted
Tourist
8 0 1

Hi Eric, thank you so much for replying but I actually wanted the box just around the product image itself. This is the look I am going for (see attached).

0 Likes
Highlighted
Shopify Expert
115 21 44

Ah, no problem. Try this code instead (add to the bottom of theme.scss.liquid): 

.grid-link__image img {border:1px solid #ccc;}

 

0 Likes
Highlighted
New Member
4 0 0

How do I have the border only apear as an overlay on products when you hover over them?

0 Likes
Highlighted
Shopify Expert
115 21 44

Chris - try this: 

.grid-link__image img:hover {border:1px solid #ccc;}

 

0 Likes
Highlighted
Tourist
8 0 1

Thanks Eric! Starting to look great. I have had to re-size a few images as they were too big but all good.

When I click on a product though there isn't a border. Have you got a code for the product page?

TIA!

 

0 Likes
Highlighted
New Member
4 0 0

Thank you! Where would I put this line of code in the Symmetry theme code? 

0 Likes
Highlighted
Tourist
13 0 0

Hi Eric,

 

Thank you so much for this line of code. I was searching for this from 2 days.

I have used below code :

.grid-link {
  
  border:1px solid #fdceeb;
  border-radius: 5px;
  width:255px;
  height: 515px;
  padding:5px;
  margin:5px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 14px 0 rgba(0, 0, 0, 0.19);
 
}
 
However when I check my website in mobile. Everything is jumbled up or over lapped on each other.  Could you please help me with fixing this for mobile screen as well? Also, in product page the under product recommendations also images has been over lapped.
 
Please help me fix this.
0 Likes