Debut Theme / adding borders to product images

Solved
Highlighted
New Member
8 0 0

Hi everyone,

my shop name is: https://boxofus.com/

I would like to add borders on every product at the front page. I searched for other subjects and could not find any useful info. Help is very much appreciated.

 

The template is debut.

 

Thanks

0 Likes
Highlighted
Shopify Expert
884 72 208

This is an accepted solution.

You can do this with CSS like this:

 

 

.template-index .grid-view-item img {
  border: 1px solid orange;
}

 

 

That code would make a border like this:

Screen Shot 2019-09-26 at 6.21.31 PM.jpg

 

For color you can swap out orange for any hex color, or standard color names.

 

If you're not familiar with adding custom CSS here's how:

a) Create a custom.scss.liquid file in your Assets folder and store all your custom CSS there. Then load that file by putting {{ 'custom.scss.css' | asset_url | stylesheet_tag }} in the <head> section of your theme.liquid file.

 

b) If you already have a custom CSS file, just add that CSS code to it.

 

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
New Member
8 0 0

thank you so much! it worked like a charm

0 Likes
Highlighted
New Member
1 0 0

Can you do this in my store if I give access to my store? 

0 Likes