How can I add a custom border to each product on my product page?

[Vlavlip]

Hi all,

I am looking for the easiest solution to fit an custom drawn border (see screenshot) around each product in my product page.

Of course I can insert it into the image itself. However it would be a lot easier to add it into the theme.

website: https://odemm.myshopify.com/

password: rastau

thx

Any ideas??

[Anthony_David_1]

would you like to add it on collection page??

Can you upload the image on settings > files and share the URL here

Thanks

[Vlavlip]

So I want each product I upload on the product page to have this border:

https://cdn.shopify.com/s/files/1/0691/7786/8562/files/Screenshot_2022-12-29_at_13.13.36.png?v=1672317069

thx

[Anthony_David_1]

please remove the white background on your image. And i see that there is lot of space in left and little space in right.

Thanks

[Vlavlip]

Hi,

I have redone the image:

https://cdn.shopify.com/s/files/1/0691/7786/8562/files/Untitled_Artwork_2.png?v=1672411076

This is saved as a png. without background.

Thank you!

[Anthony_David_1]

HI,

Hope you are doing good today.

Please find the below screenshot if its good add the below attached CSS on your base.css file

.card__media:before {
    content: '';
    background: url(https://cdn.shopify.com/s/files/1/0691/7786/8562/files/Untitled_Artwork_2.png?v=1672411076);
    position: absolute;
    z-index: +999;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

Hope this helps

Thanks

[Vlavlip]

Thank you so much!

Its not perfect yet but I can work it from here!!!

happy new year!

[Vlavlip]

Hi, I am still working on it and can’t get it to work. the images need to be with the lines at the moment the lines still cut through the images. any idea on how to fix this?

thx!

[Vlavlip]

Hi,

At the moment it looks like this. the border is within the image.

I would like it to be a border outside of the image like this:

Any idea on how to change this?

Thank you.