moksha-template Add outline/border to product images

Site URL: https://sonjanarizni.squarespace.com/shop/believe

I'm try to add an outline/border (or possibly a drop shadow) around all product images. Any CSS wizards out there know how to do that? Thanks

https://sonjanarizni.squarespace.com/shop/believe

Hi I see you already have added shadows on Images , If you want to add border you can use the following code  in HOME > DESIGN>CSS

.ProductItem-gallery-slides-item{
  border:1px solid black !important;
}

Hope it helps 🙂

On 3/17/2020 at 3:22 PM, humxahafeex said:

Hi I see you already have added shadows on Images , If you want to add border you can use the following code  in HOME > DESIGN>CSS

.ProductItem-gallery-slides-item{
  border:1px solid black !important;
}

Hope it helps 🙂

Hey @humxahafeex I just tried this code on my own site and didn't have any luck. my template is Brine. Do you know how I might get it to work? thanks so much!

13 hours ago, mccallkeller said:

Hey @humxahafeex I just tried this code on my own site and didn't have any luck. my template is Brine. Do you know how I might get it to work? thanks so much!

Can you share link to product? We can check easier.

Hello @tuanphan,

I am trying to create a drop shadow effect on the product images of my website.
*Not in the shop section but on the image of my product pages.

My website is: https://www.brondyhumphrey.com/shop/p/premiere-priere
passw: pure

Could you give me hand on this ? 🙂

6 hours ago, iJizzy1 said:

Hello @tuanphan,

I am trying to create a drop shadow effect on the product images of my website.
*Not in the shop section but on the image of my product pages.

My website is: https://www.brondyhumphrey.com/shop/p/premiere-priere
passw: pure

Could you give me hand on this ? 🙂

Try adding to Design > Custom CSS

section.ProductItem-gallery {
    box-shadow: 5px 6px 7px black !important;
}

Hello @tuanphan,

It is working only for the products which has 1 image.
For the products which has multiples, it looks like this :

 

There is also à problem when it displays on mobile :

On 8/1/2022 at 1:01 AM, iJizzy1 said:

Hello @tuanphan,

It is working only for the products which has 1 image.
For the products which has multiples, it looks like this :

 

You want to add shadow for small red box or big red box?

Hello @tuanphan ,
Thank you for your answer !

It would be the small red box.

I removed the carroussel effect and opted for the arrow slider instead.
The problem is on the first image it looks good as you can see here :

But on the others (which are on square ratio and not 3/4) it looks like the one I shared to you:

Is it possible to crop these images automatically to fill the space ?

On 10/13/2020 at 9:59 AM, tuanphan said:

Can you share link to product? We can check easier.

On 3/17/2020 at 5:22 PM, humxahafeex said:

Hi I see you already have added shadows on Images , If you want to add border you can use the following code  in HOME > DESIGN>CSS

.ProductItem-gallery-slides-item{
  border:1px solid black !important;
}

Hope it helps 🙂

When I add this code the border is cut off and appears in an L shape on desktop and on mobile only shows 3 sides

Hello @tuanphan , I desactivated the multilanguage code.

It is working now, you can access to my website.

On 8/1/2022 at 4:36 PM, iJizzy1 said:

There is also à problem when it displays on mobile :

To fix this, add this to Design > Custom CSS

/* Mobile product image shadow fix */
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    padding: 0 !important;
    margin-bottom: 20px;
}

On 8/4/2022 at 3:24 PM, iJizzy1 said:

Hello @tuanphan ,
Thank you for your answer !

It would be the small red box.

I removed the carroussel effect and opted for the arrow slider instead.
The problem is on the first image it looks good as you can see here :

 

But on the others (which are on square ratio and not 3/4) it looks like the one I shared to you:

 

Is it possible to crop these images automatically to fill the space ?

 

 

 

Can you share link to this product?

Hello @tuanphan

It is working !! Thank you very much 🙂

 

On 8/4/2022 at 10:24 AM, iJizzy1 said:

Hello @tuanphan ,
Thank you for your answer !

It would be the small red box.

I removed the carroussel effect and opted for the arrow slider instead.
The problem is on the first image it looks good as you can see here :

 

But on the others (which are on square ratio and not 3/4) it looks like the one I shared to you:

 

Is it possible to crop these images automatically to fill the space ?

 

 

 

Hello @tuanphan ,

Have you find a solution yet for this ?

Thank you for your help,
Cheers.

On 8/10/2022 at 3:08 PM, tuanphan said:

To fix this, add this to Design > Custom CSS

/* Mobile product image shadow fix */
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    padding: 0 !important;
    margin-bottom: 20px;
}

 

I sent code 

The code you sent me was about the shadow not apparing correctly on the products images:

/* Mobile product image shadow fix */
.tweak-product-basic-item-thumbnail-placement-below .ProductItem-gallery {
    padding: 0 !important;
    margin-bottom: 20px;
}

On my last message, I was talking about the two white stripes problem. My 1:1 square images doesn't fit in the 3/4 aspect ratio of my shop product images. I need a way to crop these images automatically to fill the space. As explain right here :
 

On 8/4/2022 at 10:24 AM, iJizzy1 said:

The problem is on the first image it looks good as you can see here :

 

But on the others (which are on square ratio and not 3/4) it looks like the one I shared to you:

 

Is it possible to crop these images automatically to fill the space ?

 

 

 

Do you think it is possible ?

hello @tuanphan

Have you find a solution to this issue ?

Thank you again.