Debut Theme / adding borders to product images

Solved
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

Success.

Shopify Expert
390 27 74

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 Order Automator (app that auto fulfills orders, adds tags, emails).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
New Member
8 0 0

thank you so much! it worked like a charm

0 Likes