'Collection' banner image has blurry text when featured on home page (Debut theme)

Solved
Highlighted
Tourist
7 1 0

Hi there

I am a novice at Shopify but would like to have 3 collections featured on my homepage

I have done that but the image that shows up is a very cropped version of the banner and has a blurred text overlay of the page title (which I have to put in or it won't save)

 

Can anyone advise me how to

 

a) get the banner image to fit better (size dimensions etc as can't find any firm guidelines from Shopify)

 

b) how to get rid of the blurred text

 

This is what my home page images look like 

Screenshot 2020-04-01 15.16.11.png

 

Thanks in advance for any help

 

Cara 

0 Likes
Highlighted
Shopify Partner
297 56 71

Hello @SnoozeShade_HQ,

                     share store link

 

Regards,

Wahab 

0 Likes
Highlighted
Highlighted
Tourist
7 1 0

I've managed to create a work around that means the image is showing centralised on the home page

 

Now I just need to get rid of the overlay blurry text 

 

Thanks

Cara 

 

Screenshot 2020-04-01 15.52.15.png

0 Likes
Highlighted
Shopify Expert
643 44 140

This is being caused by a CSS rule.

 

Here's how you can remove that effect:

 

.hero .mega-title, .hero .mega-subtitle, .mega-subtitle p {
  text-shadow: none;
  color: #000; /* Or whatever color you want those titles to be */
}

If you're not familiar how to edit CSS properly, here's a guide I wrote for you: https://speedboostr.com/how-to-safely-edit-your-shopify-theme

 

For reference, here's what happens if I apply that CSS rule to one of your banners:

 

Screen Shot 2020-04-01 at 11.25.33 AM.jpg

 

I would take it a step further and put a white layer at 50% opacity on top of your image, so the text pops. You can do this in photoshop for a clean affect, or you can use CSS.

 

Here's a quick view of what that would look like (this set opacity on the contents as well, just doing a quick CSS edit to show the example. In real life I would edit the image):

opacity.jpg

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
Tourist
7 1 0

Hi there

 

Thanks for the reply

 

I actually don't want any text to show on the images other than the text I have put on the image which is on the collection banner

 

I have managed to remove the title of the collection and make it - but the - still shows ... and I don't want it to

 

The text that is showing is the text from my collection banner 

 

Hope that makes sense and I haven't got it wrong what you're saying?

 

Cara

 

Screenshot 2020-04-01 18.12.22.png

 

 

 

0 Likes
Highlighted

Success.

Shopify Expert
643 44 140

I see.

 

In that case either of these solutions should work:

 

A (quick fix but not ideal): Use that CSS rule I shared but instead of changing color and text-shadow, do this:

display: none;

B (best fix): Find the code in your theme files that controls those sections, then remove the html elements and liquid code that displays the text.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
I also build custom apps and automated solutions.
Enjoy the adventure!
0 Likes