Adding drop shadow to text on image overlay (shapes theme)

Store Design
1

Hi I want to add a drop shadow to the text on top of the photo on my home page: https://buychichi.com/

How can I do that?

1 Like
2

Hi @chiaramunzi ,

Can you help me out understand your query? Which text do you need a drop shadow?

made4Uo_0-1680742931483.png
made4Uo_0-1680742931483.png1899Ă—931 409 KB

And is this what you mean by drop shadow? See green box in image below

made4Uo_1-1680743067809.png
made4Uo_1-1680743067809.png1885Ă—820 365 KB

3

Banner text - all the white on top of the image

4

Hi [email removed]Chiaramunzi,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.bundle.css

Step 3: Paste the below code at bottom of the file → Save

.shopify-section.banner-section .break-words strong{
filter: drop-shadow(10px 10px 5px black);
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

5

Thank you! It works in the editor but when I try to save I get this message:

“Online Store editor session can’t be published”

what can I do to fix that?

6

Nevermind it works! Thanks so much

7

How can I get the drop shadow on the text that says “a fast breakfast that actually tastes good” ?

8

you can try

.shopify-section.banner-section .break-words strong,.shopify-section.banner-section .break-words p{
filter: drop-shadow(4px 4px 4px black);
}