How do i add a border around product images on PDP

Store Design
1

I want to add a black border around the product image cards on my PDP, similary to what shopify does dynamically but around all product images instead of just the one being shown currently.

Screenshot 2024-08-22 152132.png
Screenshot 2024-08-22 152132.png588×560 529 KB

2 Likes
2

Hi @GrassCC ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello thanks for your swift response and being as kind as to help us with this issue, i attempted the above steps and it just changed the product card from square to rounded edges. we want a black border around all product images of maybe 3-5px in the colour solid black

1 Like
4

Hi @GrassCC ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

Hi @GrassCC

The black border indicates that an image has been clicked. If you add the same border to all images, how will clients/customers know which images they’ve already seen or clicked? That is the purpose of the border on the thumbnail. But we can make the other images (not click) lesser thick of the border or different color. Would you mind to share your store URL? Thanks!

6

Hi so this added the border to the larger image which is partly what we want but we also want the border around the product thumbnails below in the green #95C11F so that when the customer clicks a thumbnail then it will have the black border to indicate that this is the image they are currently viewing. and keep the solid black border around the larger producte image they are currently viewing

Screenshot 2024-08-22 200317.png
Screenshot 2024-08-22 200317.png288×282 61.6 KB

1 Like
7

Hi so this added the border to the larger image which is partly what we want but we also want the border around the product thumbnails below in the green #95C11F so that when the customer clicks a thumbnail then it will have the black border to indicate that this is the image they are currently viewing. and keep the solid black border around the larger producte image they are currently viewing

8

Hi any idea of how to fix this?

1 Like
9

Hi @GrassCC ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

10

Thanks for the clarification, would you mind to share your store URL? Or Pm me if your comfortable share in public.

11