Add Borders around product images in Simple Theme

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.

0 Likes
Shopify Staff
Shopify Staff
333 31 63

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

1 Like
Tourist
8 0 1

Thank you very much!!!

That did it.

 

0 Likes
Highlighted
New Member
10 0 0

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.

0 Likes