I want to add shadow to the Image with text section, how can i do that?
store link: breshofficial . com
pass: hugegyat
Topic summary
A user seeks to add shadows to an “Image with text” section on their Shopify store’s product page.
Initial Responses:
- One participant suggests searching for existing solutions related to the Refresh theme (which is Dawn-based)
- Another provides generic CSS code using
.image-text-boxclass withbox-shadowproperty
Solution Provided:
A contributor offers specific CSS targeting the actual class used in the theme:
- Add code to
base.cssfile via Shopify admin (Online Store → Themes → Edit code → Assets → base.css) - CSS snippet:
.image-with-text__grid{box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); border-radius: 18px;} - This applies shadow and rounded corners to the image-with-text grid element
The discussion remains open pending confirmation whether the solution works for the original poster.
1 Like
Refresh theme comes often enough still there’s likely already a near solution.
It’s dawn based so shares similarity with that keyword and other theme names.
https://community.shopify.com/search?q=refresh%20theme%20shadow%20image%20with%20text%20section
Havnt found nothing near that.
To add a shadow to an “Image with text” section in a web design context, please try below code:
.image-text-box {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjust values as needed */
padding: 20px; /* Optional: for spacing */
border-radius: 8px; /* Optional: for rounded corners */
}
@Bresh_store on which page do you have this section?
On my product page, image with text
@Bresh_store - please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
.image-with-text__grid{box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border-radius: 18px;}
Hello @Bresh_store,
Please add this following css code into your base.css or theme.css file:
.image-with-text .grid__item{
box-shadow: 1px 1px 5px 5px gray;
}
Here is the result:
