About the Project
Jack & Friends Jerky is a New York-based DTC brand producing vegan jackfruit jerky — top-9 allergen-free, high-protein, and free from added sugar. The brand had a strong visual identity and a Figma design ready for implementation. The task: build a Shopify storefront that faithfully translates an animation-rich, character-driven design into a fast, production-ready e-commerce experience.
The challenge was technical. The design relied on floating botanical elements, flavor-specific color theming, custom sliders, and parallax-style animations — none of which are native Shopify Dawn capabilities. Every dynamic element required custom development on top of the theme foundation — see our full range of
The challenge was technical. The design relied on floating botanical elements, flavor-specific color theming, custom sliders, and parallax-style animations — none of which are native Shopify Dawn capabilities. Every dynamic element required custom development on top of the theme foundation — see our full range of Shopify agency services.
Project Objectives
1. Implement a visually complex design without sacrificing performance.
The storefront features animated floating leaves and spice elements, flavor-based color switching across product pages, and multiple custom slider components. The goal was to deliver all of this while maintaining above-average PageSpeed scores — proving that visual richness and load performance are not mutually exclusive on Shopify.
2. Build on Dawn for long-term maintainability.
Rather than building a fully custom theme from scratch, we used Shopify’s Dawn as the foundation and customized it extensively to match the Figma design. This keeps the codebase aligned with Shopify’s update cycle and gives the client a maintainable, future-proof store.
3. Deliver custom interactive components natively.
All sliders and animations were built without heavy third-party dependencies — using CSS animations, GSAP, custom JS, and a customized Splide implementation for the testimonials section.
Technical Solutions
Heavily customized Dawn-based Shopify theme.
Dawn provided the structural foundation for our Shopify custom development approach — Shopify’s section architecture, theme editor compatibility, and OS 2.0 block system. Every visual layer on top of it — layout, typography, color, animations — was rebuilt to match the client’s Figma design precisely.
Floating botanical animations (CSS + GSAP + custom JS).
The homepage features animated leaves, spices, and ingredient elements that float across the viewport — a signature visual element of the brand. These were implemented using a combination of CSS animations, GSAP, and custom JavaScript, creating a fluid, organic feel without relying on heavy animation libraries.
Flavor-based color theming across product pages.
Each of the three jerky flavors has its own distinct color identity — red, purple, and orange. The color switching across product templates was implemented to match the design system, ensuring each flavor’s page feels visually cohesive with its packaging and brand color.
Custom product slider on the homepage.
The main product showcase uses a fully custom-built slider — not a third-party library — integrated directly into the theme architecture for performance and design fidelity.
Customized Splide testimonials slider.
The “We Love Our Jerky” social proof section uses a customized Splide implementation, giving the testimonials section smooth, accessible carousel behavior while keeping the bundle size minimal.
Facebook Ads tracking setup.
Facebook Pixel tracking was configured as part of the build, enabling the client to run and measure paid social campaigns from day one.
PageSpeed Results (homepage)
| Metric | Mobile | Desktop |
| Performance | 63 | 86 |
| Accessibility | 73 | 81 |
| Best Practices | 92 | 92 |
| FCP | 3.6s | 0.8s |
| LCP | 8.4s | 1.9s |
| TBT | 90ms | 60ms |
| CLS | 0.025 | 0.002 |
Desktop performance of 86 with FCP 0.8s and CLS 0.002 is strong for an animation-heavy DTC storefront. Mobile performance of 63 reflects the cost of rich CSS/GSAP animations on low-powered devices — a known trade-off for visually complex Shopify builds of this type.
Pages Developed
Homepage · Product Pages (3 flavors) · Variety Pack / Bundle Page · Store Locator · About / Jackfruit 101 · Contact
Dawn is Shopify’s official reference theme — well-structured, performant, and OS 2.0 compatible. Heavy customization means keeping Dawn’s architecture intact while rebuilding every visual layer: layouts, typography, color systems, animations, and interactive components. The result looks and behaves nothing like the default Dawn, but inherits its stability and maintainability.
Yes. Dawn’s modular section architecture makes it possible to inject custom CSS animations and GSAP-powered sequences into specific sections without affecting the rest of the theme. The key is scoping styles and scripts correctly so animations don’t block rendering or inflate load times across the entire storefront.
Each product template can carry its own color variables — applied either through section settings in the theme editor, CSS custom properties, or hardcoded per-template styles. The result is a storefront where each product page has a distinct visual identity while sharing the same underlying component architecture.
CSS and GSAP animations add render weight — especially on mobile devices with limited CPU and GPU resources. For DTC brands where visual storytelling is a core conversion driver, this trade-off is often intentional. The goal is to optimize where possible (lazy loading, deferred scripts, WebP images) while accepting that a visually rich mobile experience will score lower than a minimal one.
Splide is a lightweight, accessible JavaScript slider library with a small bundle size compared to alternatives like Swiper. For a testimonials section where accessibility and load performance matter, a customized Splide implementation delivers smooth carousel behavior without the overhead of heavier libraries.
Think about related concept or project?
Let`s create it together!
Here you can view our portfolio and see how we have helped our clients achieve their goals. Check out our projects of varying complexity, from creating landing pages to developing large-scale web applications.
