Tweaks to Dawn Image Banner

Store Design
, , ,

Topic summary

Goal: improve the homepage hero built from Shopify’s Dawn Image Banner (customized to randomize images).

Requested changes:

  • Make images scroll with the text (remove the effect where text scrolls over fixed/stationary background images).
  • Keep images at 100% width as long as possible and reduce unwanted cropping across screen sizes. Current setup uses 100vh (viewport-height units) and overflow rules that appear to cause the cropping.
  • Address mobile layout after resolving these two items.

Context and assets:

  • Two screenshots illustrate the current hero and the cropping behavior; no code snippet provided.

Collaboration preferences:

  • Seeking specific CSS/Liquid/HTML guidance or concrete section alternatives. Open to designers only if they provide specific ideas plus a portfolio; asks others not to solicit general services.
  • Clarified they intend to implement code changes themselves with community help.

Status:

  • No solution yet. Key open needs are CSS changes to switch scroll behavior and preserve full-width imagery with minimal crop; mobile adaptation remains pending.
Summarized with AI on December 16. AI used: gpt-5.
1

I’m happy with our site, except the homepage, so I’m trying to tackle that now. I need to start with the hero image, which uses a variation of Dawn’s Image Banner section. You can take a look at RepurposedOnline.com, but here’s a screen cap of that section:

Screenshot 2024-10-21 at 12.27.17 PM.png
Screenshot 2024-10-21 at 12.27.17 PM.png2396×1316 442 KB

As I said, this is the Dawn Image Banner, tweaked to randomize the images shown (and a few other small changes). There are a couple of things I need to do:

First, I want the images to scroll with the text, rather than have the text scroll over stationary background images.

I want the images to remain width 100% for as long as possible. Right now, when changing the screen size the images become cropped:

Screenshot 2024-10-21 at 12.39.43 PM.png
Screenshot 2024-10-21 at 12.39.43 PM.png1532×1264 320 KB

I know this has to do with the images being set at 100vh and overflow and such, but I haven’t been able to figure out what, specifically, needs to be changed. I’ve played with the CSS that controls the images, their DIVs, the DIV for the entire section, but no luck.

I also need to adapt the hero for mobile, but I figure getting these two issue sorted will go a long way toward that.

I’d be grateful If anyone can help with the above code changes, but I’m also open to specific suggestions for making this part of our site better, whether its using a different type of Shopify section, creating the hero space with something outside of Shopify, or I’m even open to proposals from designers. Our brick-and-mortar supports our concept, but this page is working against us when we get online visitors.

2

Thanks @SelinYalcinar and anyone else who has made or plans to make a similar offer here or through our website…

If it’s going to be a matter of just updating the code, I’ll do that myself (hopefully) with a little help from the community. I’m capable at Liquid, HTML, and CSS, but it’s not my full-time gig and this one has me stumped. I didn’t intend this to be an open invitation to pitch website management services (and here I refer more to the emails than Chrias’s response). Unless you’re a designer with specific ideas for our site and you have a portfolio of your work, please, no soliciting.

Thanks!