Solved

Remove grey overlay on header image Debut them

JulianS
Tourist
5 0 0

Hello all,

I am using the Debut theme. When I change a "Image with text overlay's" section height to " adapt to image"  it changes the colour of the image by adding a grey overlay. How can I remove this? Please see the two images below. The left image shows the colour of the image as it should be and the right shows the changed colour.  The only change between the two is the section height.

Thanks in advance

Julian

Grey Scale problem 4.JPGGrey Scale problem 3.JPG

Accepted Solution (1)

Moira
Shopify Staff
2040 223 323

This is an accepted solution.

Hey, @JulianS

This is Moira from the Social Care team at Shopify. Thanks for posting, and a very warm welcome to the Community!

I understand you are wanting to remove the grey overlay that appears on your image when you adjust the section height. You can certainly make these changes through the theme editor without having to edit any code, which is great!

I'd be happy to walk you through these steps below:

1) From your Shopify admin head to Online Store > Themes > Customize.

2) Once in the theme editor, click on Theme settings on the left-hand menu.

21-06-i9jus-q5hxs 

3) In Theme settings, click on Colours.

4) In Colors, scroll down until you reach the Image overlays section, toggle the percentage of the opacity to 0%. Here you can also change the background color to give a different hue for e.g white instead of the current grey/brown. This changes for the main screen, collections, and title images.

21-06-7w7ac-orm5i

5) Don't forget to click on Save on the top right-hand corner!

As you continue to customize your theme, it’s a good idea to make design and content choices that help to keep your online store accessible. I suggest taking a look at this guide for tips on providing an inclusive experience for your customers.

Let us know how you get on with the steps above and if you have any further questions please feel free to thread those below.

Cheers!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 6 (6)

Moira
Shopify Staff
2040 223 323

This is an accepted solution.

Hey, @JulianS

This is Moira from the Social Care team at Shopify. Thanks for posting, and a very warm welcome to the Community!

I understand you are wanting to remove the grey overlay that appears on your image when you adjust the section height. You can certainly make these changes through the theme editor without having to edit any code, which is great!

I'd be happy to walk you through these steps below:

1) From your Shopify admin head to Online Store > Themes > Customize.

2) Once in the theme editor, click on Theme settings on the left-hand menu.

21-06-i9jus-q5hxs 

3) In Theme settings, click on Colours.

4) In Colors, scroll down until you reach the Image overlays section, toggle the percentage of the opacity to 0%. Here you can also change the background color to give a different hue for e.g white instead of the current grey/brown. This changes for the main screen, collections, and title images.

21-06-7w7ac-orm5i

5) Don't forget to click on Save on the top right-hand corner!

As you continue to customize your theme, it’s a good idea to make design and content choices that help to keep your online store accessible. I suggest taking a look at this guide for tips on providing an inclusive experience for your customers.

Let us know how you get on with the steps above and if you have any further questions please feel free to thread those below.

Cheers!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

JulianS
Tourist
5 0 0
Hey Moria thanks so much for the assistance!
shopbaileybee
Excursionist
27 0 8

Hey Moira,

 

What if I want to keep the overlays everywhere on my site except for my header image?

michasaade
Visitor
1 0 0

Hi Moira,

 

I'm having the same issue in the Testament theme, but when I follow these steps there is no option for 'Image Overlay' can you please advise?

Ellen11
Visitor
2 0 0

Hi Moira, 

Thanks for the above information, I am using Ella theme and it is doing the same how can I remove the greyscale. 

 

Awaiting your help and kind support. 

 

Thanks

Moira
Shopify Staff
2040 223 323

Hey @Ellen11 & @michasaade 

 

Both of the themes you have shared are third party, meaning they are not created by Shopify. The solution to this thread is referring to the free Shopify Debut theme. The settings may differ with your themes, I suggest reaching out to the developers to check if this is possible!

Moira | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog