Debut theme main image is darker than it should be - is this an overlay problem?

Store Design

Topic summary

Main issue: In the Debut theme, the homepage hero image appeared much darker than the original, likely due to an automatic text overlay applied by the theme.

Proposed fix: Add a small CSS rule to disable the overlay pseudo‑element on the hero section, placed at the end of Assets > theme.scss.css. This removes the ::before layer that was darkening the image and restores the original look.

Outcome: The original poster confirmed the fix worked and the image now matches the intended design. Another user also reported success using the same solution. Screenshots were shared to show the before/after difference.

Unresolved item: A follow‑up question asks what to do if the theme.css/theme.scss.css file is not present in Assets; no answer yet.

Status: Largely resolved for the original case with a CSS override; thread remains open due to the unanswered question about missing stylesheet files.

Summarized with AI on December 22. AI used: gpt-5.
1

I am just…grrrrrrr. I am not a coder, and I have NO idea what I am looking at, but I made a wonderful graphic for our main page, and it’s there, but it’s DARK. It doesn’t even look like the original.

I think the problem is the “text overlay” but I can’t figure out how to get RID of the text overlay, which I am not using at all.

I’m using the debut theme. The lighter color original image (left on screen shot) is what it should look like, but the right is what it looks like. And it looks HORRIBLE. How do I fix it?

Shop is www.patchworkchickenstudio.com. Any help appreciated!

Susabelle_0-1605494028848.png
Susabelle_0-1605494028848.png1723×581 143 KB

2

Hi @Susabelle

This is PageFly. I would love to provide a solution to the issue.

Please add the code below

.hero-fixed-width::before {
content:none !important;
}

and follow this path to add the code

Themes => edit code => asset =>theme.scss.css
and add this code to bottom of the file theme.scss.css

Hope my answer helps you. If you find it helpful, just give it a like. Let me know if you need help

PageFly.

3 Likes
3

Thank you so much!!! I cannot express how happy I am! I’m not a coder, and this was a daunting thing. Other solutions I read did not give me the specifics I needed, YOU DID! Thank you so much for your help!!

Now my image looks the way it should!

Susabelle_0-1605543654536.png
Susabelle_0-1605543654536.png1122×664 335 KB

1 Like
4

Hi @Susabelle

You’re welcome, I’m glad that my solution helps you to solve your issue.

Just let me know if you need help, you give a thumb up for my solution if you find it helpful.

Cheers,

PageFly.

1 Like
5

@PageFly-Victor Thank you for the code. I was looking to do the same thing and did a search and you were able to help. Thanks again.

1 Like
6

What if you don’t have a theme.css in the assets folder?