What's your biggest current challenge? Have your say in Community Polls along the right column.

How to add shadow effect in product picture of the impulse theme

How to add shadow effect in product picture of the impulse theme

Moeez
Tourist
5 0 4

Hello everyone i want my product picture like this given image below i want to add shadow effect like these product have . i have shopify impulse theme and here is my store url : www.gizmeleon.shop Screenshot (414).png

Replies 3 (3)

PaulNewton
Shopify Partner
7450 657 1565

Hi @Moeez  use a custom css setting and CSS similar to the following that uses box-shadow:

 

.grid-product__image-mask { box-shadow: 1px 0px 3px black; }

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

 

Tailor the px values to taste but I'd suggest avoiding being garish as you already have a lot of excessive visual distractions on the website AND noisy snowflake animations.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


BSSCommerce-B2B
Shopify Partner
1969 564 566

@Moeez ,

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
.grid-product__image-mask {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
</style>

Result:

BSSCommerceB2B_1-1728087749210.png

If it helps you, please like and mark it as the solution.

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Rahul_dhiman
Shopify Partner
660 128 134

Hello @Moeez 

 Go to online store ---------> themes --------------> actions ------> edit code------->theme.scss.css
at the end of the file and save.

 

 

.grid-product__image-mask {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 6px 12px;
}

 

 

result
1.png

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167