Jump to content

Add outline/border to product images

Recommended Posts

  • Replies 18
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 6 months later...
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!

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 :

 

Capture d’écran 2022-07-31 200125.png

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

image.thumb.png.da11beef5ff847eb7888287ae58d1573.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 :

634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.thumb.png.45f31d90342a8fb77963afacace8bf3f.png

 

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


1008261020_Capturedcran2022-07-31200125.thumb.png.78b760e2a5791da828e21d4870f9c5a6.png

 

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

 

 

 

Link to comment
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

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

There is also à problem when it displays on mobile :

Screenshot_20220801-113100_Chrome.jpg

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 :

634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.thumb.png.45f31d90342a8fb77963afacace8bf3f.png

 

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


1008261020_Capturedcran2022-07-31200125.thumb.png.78b760e2a5791da828e21d4870f9c5a6.png

 

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

 

 

 

Can you share link to this product?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 :

634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.thumb.png.45f31d90342a8fb77963afacace8bf3f.png

 

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


1008261020_Capturedcran2022-07-31200125.thumb.png.78b760e2a5791da828e21d4870f9c5a6.png

 

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.

Link to comment
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 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 :


634818924_Capturedcran2022-07-31200125.thumb.png.e575aadca18d0e67cf354c6d14bf8caa.thumb.png.45f31d90342a8fb77963afacace8bf3f.png

 

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


1008261020_Capturedcran2022-07-31200125.thumb.png.78b760e2a5791da828e21d4870f9c5a6.png

 

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

 

 

 



Do you think it is possible ?

Link to comment
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.