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
