Shadow surrounding Product Pictures (Debut theme)

Solved
Tourist
10 0 5

Hi everyone, 

 

I want to add a drop shadow to my product pictures. I'm using the debut theme. 

 

I found this code:

 

img {    box-shadow: 0 0 10px rgba(0,0,0,.5);
}

 

Can someone please tell me where to insert the code so the shadow applies to just my product pictures?

 

Thanks :)

0 Likes

Hi

If you know how to edit the liquid files. then you can do it very easily.
Just paste your code in the .scss.liquid file which has been included on your page.
This link will guide you about the process.
https://www.envision.io/blogs/ecommerce-pulse/28829889-how-to-edit-the-css-of-your-shopify-theme

1 Like
Tourist
10 0 5

Thats awesome thankyou! 

 

I've added the code in and it looks great. 

 

I am getting parts of my shadow cut off in certain areas. My website is www.bearavenue.com.au so you can see what I mean.

 

In the first picture below, it's my grid layout and the top side and right side are cut off.

 

Screen Shot 2019-07-16 at 9.20.55 pm.pngFirst photo - product list is cut off at the top and the right?

 

 

 

 

In the second picture below, its my product picture (the large one) that looks cut off. When I first refresh the page, it's got a shadow but then a second later the shadow gets cut off in harsh lines around the photo. 

Screen Shot 2019-07-16 at 9.26.48 pm.pngProduct photo is cut off so the shadow doesn't completely show.

 

 

What's happening?

0 Likes

Hi

Please add this code in theme.scss.liquid file. It will resolve your first problem.

.page-width .grid.grid--uniform.grid--view-items {
padding: 5px;
}

And for you second problem. You have to update the theme.scss.liquid file here find the code something like that.

.product-featured-img {
display: block;
margin: 0 auto;
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 12px);
}

Replace these line of code with below code. Every things will work.


.product-featured-img {
display: block;
margin: 0 auto;
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 12px);
}

Please let me know if it works for you.

1 Like
Tourist
10 0 5

Hiya! 

 

The advice you gave me recently worked brilliantly!

 

This is happening on my blog now. Any ideas how I can fix it?

 

Screen Shot 2019-08-02 at 9.42.00 pm.pngScreen Shot 2019-08-02 at 9.42.16 pm.png

0 Likes

Hi

Glad to know that it works.
And for you blog pages. Just write these code in theme.scss.liquid file.

.page-width .grid .grid__items {
padding: 5px;
}

It will work.
Please let me know if it was helpful.

0 Likes
Tourist
10 0 5

Hmmm it still didn't fix it!

 

Screen Shot 2019-08-03 at 12.32.37 am.pngScreen Shot 2019-08-03 at 12.33.10 am.png

0 Likes

Success.

Hi

ok try one last thing.
Just find this part in your theme.scss.liquid file.

.grid__item {   float: left;

And inside this add the padding of 5 px.

padding: 5px;

And it should work.

0 Likes
Highlighted
Tourist
10 0 5
Yep! This worked. Except I did 10px because 5px wasn’t enough. Perfect! Thanks so much 🙏🏼
1 Like