Hello Shopify Community,
Please note that I am not a coder nor am I familiar with HTML related and I only use shopify themes for editing.
I’m planning to build a highly visual, animated homepage for our store and would appreciate any guidance on whether the design is achievable within Shopify’s framework—or if we’ll need custom coding. I’ve prepared a Google Slides mock-up that illustrates exactly what we’d like to create:
Below is a summary of the key design elements and functionality we’re looking for:
1. Header (Non-Sticky → Simplified Sticky on Scroll)
- Initial state: A full-width header with our logo and navigation, possibly animated (e.g., GIF background).
- On scroll: Header hides, replaced by a slim, simplified sticky bar that reappears on hover.
2. Hero Section (Animated GIF)
- A full-width “Section 1” featuring an animated GIF background (or embedded video GIF) with overlaid text/content.
- This section should be full-viewport height and dynamically scale across screen sizes.
3. Logos Carousel (Auto-Scroll + Hover Interaction)
- A horizontal strip of brand/shop logos that automatically scrolls left-to-right by default.
- On mouse hover: pause auto-scroll and allow manual drag or directional animation in the hovered direction.
- Ideally a “continuous” loop effect so logos wrap around seamlessly.
4. Section 2: “Product Shops” (Mixed Scroll)
- This section should display multiple “shop tiles” arranged horizontally (e.g., clickable cards for different product categories).
- Vertical page scroll should move you down the page, but within this “Product Shops” area, a secondary horizontal scroll (or slider) should allow users to scroll through more shops.
- Essentially:
- Main page scroll → moves past Section 2 completely when you reach the bottom of that section.
- Section 2 scroll → horizontally moves through tile panels.
5. Section 3: Promotional Stacked Cards
- Full-width, stacked promotional “cards” (e.g., large images with overlay text and CTA buttons).
- Possibly a parallax or subtle entrance animation (fade in/slide up) on scroll.
6. Custom Highlight Banner (Not Yet Completed)
- A custom banner area (e.g., yellow background with large “BLOG" text) that may have special layering or overlapping elements.
- We haven’t fully designed this yet, but it will likely need custom positioning outside Shopify’s standard block settings.
7. Footer (Animated GIF Background)
- Full-width footer with a looping GIF background (e.g., subtle animation of scenery) and overlaid social icons, newsletter signup, etc.
Main Questions / Challenges
- Shopify Blocks & Sections Limitations
- Shopify’s Online Store 2.0 themes use “sections” and “blocks” to create custom pages. Our design relies heavily on stacked layers, overlapping elements, and non-standard scroll behaviors (mixed vertical & horizontal). Is it possible to replicate these interactions purely through a 2.0-compatible theme’s JSON templates and section/block customization?
- Animated Header & Footer
- Can we embed GIFs (or short MP4 loops) as full-width header/footer backgrounds and still maintain responsive behavior? Are there known performance issues or “best practices” within Shopify for this type of animation?
- Continuous Logos Carousel with Hover Control
- Are there existing Shopify apps or theme snippets that support an infinitely looping carousel which auto-scrolls, but also reverses or nudges on hover? If not, would we need to code this with a JavaScript library and integrate it via a custom section?
- Mixed Scroll Section (Horizontal Within Vertical)
- Our “Product Shops” section needs to freeze vertical scroll while the user horizontally scrolls through “shop tiles,” then resume normal page scrolling once they exit that area. Is there a recommended approach—perhaps a custom overflow-x: scroll container inside a Liquid section? Any pitfalls to watch for (e.g., touch-device usability)?
- Custom Code vs. Theme Framework
- If this layout (animated visuals + mixed scroll behavior + header transformations) is not possible with an existing Shopify theme’s built-in “Drag and Drop” editor, what’s the recommended approach? Should we:
- Pick a bare-bones OS 2.0 “starter” theme and build completely custom Liquid/JS/CSS sections?
- Use an existing “visual builder” app (e.g., Shogun, PageFly) and then inject custom code?
- Hire a Shopify Expert to create a fully custom theme from scratch?
- Performance & Mobile Responsiveness
- Given the number of animations and the horizontal scroll section, how do we ensure reasonable loading times and fluid performance on mobile devices? Are there Shopify-specific techniques (lazy loading, optimized GIF formats, or fallback images) we should implement?
What We’re Looking For
- Technical Feedback: Can a Shopify developer/community member confirm whether the above requirements can be built within a 2.0 theme (with custom section liquid files, JS, and CSS) or if the entire page needs to be coded from scratch?
- Recommended Approach: If custom coding is required, what would be the best starting point? A minimal “Dawn” clone with stripped-down styles, or an external builder?
- References & Examples: If you’ve seen a live Shopify store that uses a similar mix of animations, horizontal scroll elements, and sticky header swaps, please share links or code snippets.
- Performance Tips: Any suggestions for optimizing GIFs (converting to MP4/WebP, or using HTML5
Thank you in advance for any advice or pointers! Your insights will help us decide whether to proceed with a fully custom theme or try to adapt to shopify theme.