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
Solved! Go to the solution
This is an accepted solution.
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.
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.
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.
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