FROM CACHE - en_header

Debut theme: image with text overlay doesn't show the image

Solved
Ludwig_van
New Member
4 0 0

Hi!

I'm having a problem with the debut theme. When I insert an "image with text overlay" section the image does not show up. It works fine with the placeholder image but as soon as I choose an image of my own the section just goes solid gray. Same for the slideshow however when I untick "Show overlay" the images show up or if I press the mobile preview button (this only works for the slideshow). If I look in "page info" in my browser they show up in the list so they are there for sure, it's just something (the overlay?) blocking them. The text always shows up if that's any help.

 

I've tried firefox 71.0 and microsoft edge and they share the same problem.

Any help or tips regarding this would be great!

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12522 1933 2480

This is an accepted solution.

Hello @Ludwig_van,

Actually you increase the opacity.Thats why its happened.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.hero__overlay::before,.slideshow__overlay::before {
	opacity: 0.4 !important;
}

 

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 8 (8)
oscprofessional
Shopify Partner
12522 1933 2480

Hello @Ludwig_van,

Please share your site url so that I will give you exact solution

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Ludwig_van
New Member
4 0 0

Hi @oscprofessional thanks for taking the time!

Unfortunately the store is not live yet and I have therefore no link to share. I have however attached a screenshot that hopefully will further illustrate the problem. On the left is the page info panel with the image that is supposed to display and on the right the page with an image and a slideshow, both with what looks like a solid overlay.

 

Untitled.png

oscprofessional
Shopify Partner
12522 1933 2480

This is an accepted solution.

Hello @Ludwig_van,

Actually you increase the opacity.Thats why its happened.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.hero__overlay::before,.slideshow__overlay::before {
	opacity: 0.4 !important;
}

 

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Ludwig_van
New Member
4 0 0

Hey, that worked!

Strange because I don't remember making that change.

If anyone else have this problem - I also had to add .image-bar__overlay for it to work on the image with the text "test" in the screenshot.

 

Thanks a bunch!

Ludwig_van
New Member
4 0 0

Omg, I'm such a dumbo!

In theme settings -> colors -> image overlays you can just change the opacity with a slider. Mine was on 100%

oscprofessional
Shopify Partner
12522 1933 2480

@Ludwig_van,

Ok.Then remove css which I gave

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
FeliDammertz
Tourist
9 0 3

Hey there!

I am having a similar issue, the images of the slideshow on my landing page are not showing (please see screenshot attached). It seems like there is some issue with the slideshow.liquid section, as I tried to add a new section & the same thing happened with the new one.

Can you help me with that? My online shop is already online and I am about to go online with my first product, so this incident is extremely misfortunate for me. 

My shop is: https://hormonella.myshopify.com

Looking forward to hearing from you!

Thanks & Best, 

FeliScreen Shot 2020-06-16 at 11.16.47 AM.png

 

Andrii2
New Member
1 0 0
Hi! When I insert an "image with text overlay" section the image does not show up. I followed the recommendations above. Did not help. https://www.fluffyjoy.shop/
1.jpg2.jpg3.jpg