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 1562

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
619 120 124

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