My homepage banner is not fully loading on larger monitors

Store Design
,
1

Hi All,

I am working on my website, essaeyewear.com and notice that the front banner does not display immediately on larger monitors/screens until I slightly minimize or make the browser larger or smaller. For example:

  1. Open the browser and website on a 16 inch or larger monitor at full screen

  2. Notice that the image does not load

  3. While still in the browser, select the edge and drag the size of the browser slightly

  4. Notice that the image will now show

Thanks for the help in advance!

Lisa

2

Hello @Lisali ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Hi Diego,

Store URL is - www.essaeyewear.com

Page URL with the issue is the same, it is the home page at www.essaeyewear.com

Thanks for your help!

4

@Lisali ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

This is not the ideal solution, but the best that can be done in this case.

The banner is loading a slideshow library (slick) which is fairly heavy for this case, you can see that it’s already taking a toll on the performance. The banner does not know its height until Slick is loaded, so in the meanwhile, while slick is loading, it shows up like that.

Because slick has resize listeners, when you resize the window it forces it to reload and fix the banner height.

If you had that custom coded, I’d urge you to contact the dev to at least make the banner’s aspect ratio while the library loads, something like Impulse and other slideshow sections usually do. Not only it looks bad, but it will also affect your CLS score which will negatively impact the SEO.

I hope it helps.

Kind regards,
Diego

5

Hey Diego!

Appreciate the quick help and support here. I’ve followed the instructions you outlined above, but unfortunately is still experiencing the same issue.

“If you had that custom coded, I’d urge you to contact the dev to at least make the banner’s aspect ratio while the library loads, something like Impulse and other slideshow sections usually do. Not only it looks bad, but it will also affect your CLS score which will negatively impact the SEO.”

For this area, do you know if this will be a fairly easy fix to implement?

best,

Lisa

6

@Lisali

No problems. Do you mean in relation to the developer fixing the banner?

It’ difficult to pinpoint how easy it would be, it would depend how the slick dependency is being loaded. But if this is shipping by default with whatever theme you’ve bought and it was not custom coded, I’d definitely reach out to the devs to get it fixed for you.

The slideshow aforementioned works with any theme without impacting performance, but ideally I’d recommend reaching out to the devs first.

Kind regards,
Diego