How to add a border to the images on the product page?

Store Design
1

I have borders around my images in their collections but when you open to the page for a single product, there is no border. I would like a similar border around these images on the products page.

My site is: www.zindoria.com and the password is: pahsto

I have tried adding different code in different files that I found searching for solutions others have suggested but I’m not having any luck with any of them. The last thing I tried was editing base.css but that didn’t work for me.

Thank you.

2

Hello @zindoria ,

You can try to use this code:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets folder → base.css file → add this following code at the bottom of page
.product-single__media-item {
  border: 1px solid #ccc; // Change this to the desired border color and size
  padding: 10px;
  margin-bottom: 20px;
}
  • Save and preview

Hope this can help.

Let us know if you can solve the problem.

Ali Reviews team.

3

Hi @zindoria

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
.pmslider-own–slides-wrapper {border: 1px solid #d5cecf; border-radius: 8px;}

Regards,

San

4

Thank you! That did exactly what I was looking for.