Add Borders around product images in Simple Theme

Cynthia_Moore
Tourist
8 0 1

Hi, 

I have not had any problems so far with editing, but I am having difficulties for the location and code to put borders around product / thumbnail image.

If anyone can help, please let me know the code and also where to find the location it needs to be put in. Thank you in advance.

Replies 8 (8)
May
Shopify Staff
334 33 154

Hi, Cynthia!

This is May from Shopify.

That is a good question! While I am not an expert in coding, I find that you can make this change by editing your theme code. You can add a border to your product thumbnail by editing your ‘product-grid-item.liquid’ file. Before making any changes to your code, I strongly recommend making a duplicate of your theme, in case of any unintended results. After you make a duplicate, you can follow the steps below to achieve this!

    1. From your admin, you’ll want to click on ‘Online Store > Actions > Edit code’.

    2. You can find ‘product-grid-item.liquid’ file under your ‘Snippets’ folder.

    3. Find this line of code:   

<div class="supports-js" style="max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; margin: 0 auto;">

If you have never edit this file before, you can find this code on line 25.

   4. To add the border, you can add the code below inside ‘style’.

border: 1px solid; border-color: #000;

You can adjust the thickness and color of the border by changing the code above. If you’d like a thicker border you can replace 1px with a larger number. If you’d like to change the color, you can pick a hex color and replace #000 with your desired color.

    5. Finally, your code should look like this:   

<div class="supports-js" style="border: 1px solid; border-color: #000; max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; margin: 0 auto;">

    6. Click ‘Save’.

For future reference, if you would like to change the code back to what it was before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, feel free to contact our support since you are using a theme made by Shopify. If your account is eligible, our theme support may be able to look into making the change for you. Alternatively, you can reach out to our Shopify Experts.

If this isn't quite what you were after, let me know and we can continue with our support.

Kind Regards,

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Cynthia_Moore
Tourist
8 0 1

Thank you very much!!!

That did it.

 

arnoldhobiz
Tourist
10 0 2

Hi, I am also using the Simple theme and I tried your solution.

 

1. It worked but there is a small gap between the bottom border and the image - like a square image inside a slightly taller rectangle border. Any idea how to fix this?

 

2. Any idea how to extend this to images (only product borders work, with same issue mentioned in 1.) shown in the homepage. I would like borders around collections etc as well.

 

Many thanks.

Danielos
Excursionist
12 0 4

I have the same issue. a small gap at the button, between the border and the image.

I used square product images.

did you solve this  

 

oscprofessional
Shopify Partner
9158 1560 1922

Hello @arnoldhobiz 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
bkelly
Tourist
11 0 0

Hi May! I love this solution. It worked for me and got the border around my product! YAY! However, is there a way to extend the box all the way around to contain my Add to Cart Button and Variant choices? I want it to look more like this: https://www.ferplast.com/gb/cat-sofas-beds.html?p=2

What do you suggest? Thank you so much for your help!

Architram
New Member
2 0 1

Hi

I am too facing the same issue. Would mind sharing the solution with me please

dh722
Tourist
3 0 0

What was the answer to this?