Add overly for collection image dawn theme

Store Design
1

Hi,

I’d like to add an overlay, a semi-transparent layer to my collection image (attached below). Can anyone help me with that? Thanks a lot.

lulu57_0-1676960981389.png
lulu57_0-1676960981389.png1360×517 493 KB

https://horaciobikes.com.au/

pw: 0713Bang

2

Hi @lulu57

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Thanks so much Victor!

4

Hi Victor,

After I add the overlay, the texts on the image become not very clear, like the below:

lulu57_0-1677029387116.png
lulu57_0-1677029387116.png1723×592 194 KB

is there any way to make the text on the image very obvious? like the image below:

lulu57_1-1677029508831.png
lulu57_1-1677029508831.png2167×426 236 KB

thank you!

5

hi @lulu57 please replace the whole old code with this one, i will add the extra code to fix the heading here:
6

Thanks a lot! You’re a lifesaver :grinning_face:

7

Hi Victor,

The overlay worked great thank you. However, for Dawn 9.0 is there a way to centre the collection list titles over the image and position the text in front of the overlay so its clear? By defult my text is left alligned under the image.

Thanks for your help.

8

Hey @lulu57 , watch this YouTube guide at https://www.youtube.com/watch?v=LNCzj6cxw1s to add overlay in collection images in the Shopify Dawn Theme.