Celebrating the winners of Packathon 2024
Packathon—the first virtual Hydrogen Hackathon for Shopify devs and designers—generated some fantastic projects that lean into the flexibility and interactivity of Hydrogen. We're thrilled to share these projects with the community—including open-source repos—so any storefront can benefit from these projects. Explore clickable demos and prototypes, get inspo for top-notch shopping experiences.
Let’s explore Packathon projects.
For each project, you’ll get to meet the team, see what they built and why it stands out, and explore interactive demos / code snippets / Github repos that you can pick up and run with.
Swipe right on your favorite products (Grand prize)
Build custom products (Best use of Pack + Buy with Prime prize)
Reimagine Hydrogen: from storefronts to landing pages (Best use of Hydrogen prize)
Generate shopping content with AI (Most technically impressive)
Supercharge influencer funnels (Most innovative shopping experience)
Bring shopping to life in 3D (Most fun / best easter egg)
Huge thanks to our sponsors: Amazon Buy with Prime, Rebuy, Bear Group, Akantro, Fueled.io and Spacebox Digital!
Swipe right on your favorite products (Grand prize)
Ditch the static quizzes and endless scrolling through static product category pages. We LOVED (and we know shoppers & merchants will too) this Tinder-inspired, gamified shopping experience that gives shoppers a quick, mobile-friendly way to find their favorite products.
Once shoppers swipe right on a series of products, it's easy to edit picks, and add them to cart in one click. Plus, there's tons of real estate for merchants to make curated product recommendations—with all the preference data shoppers just gave them. It's built with customizability in mind, so that merchants can swap out icons, logos, buttons, and curate product collections they want to feature.
How they built it:
The team created two sections in Pack:
-
A MatchExperience section for the selection of product collections that interest the user
-
An another
MatchExperienceResultssection for building a cart based on what the user liked or not from those collections
One the first page, the MatchExperience section will provide information for the page loader to get the products from the collection server side. As the user swipes for likes and dislikes this will save to localStorage. Once the user is done selecting their pickings, the page will navigate to the sectond results page.
On the second results page, the MatchExperienceResults section will read the local storage and display all the products the user has selects, and allows the user to select additional products they like. Then when the user adds to cart, it will add all the selected products to the cart.
Here's what the team shared about their approach:
"The first challenge we faced was to devise a solution that was as native as possible, avoiding the burden of third-party libraries. To achieve this, we decided to use only Frame Motion for the swipe animations of the cards. This approach reduced the project's weight and minimized the code to only what was strictly necessary. Another challenge we encountered was fetching the products. We took some time to understand the data flow so that we could manipulate it to suit our needs, making sure we understood the available data and its structure."
Why it stands out:
This project was creative, fun and functional, with a high level of polish and interactivity. We loved how it leans into mobile-first shopping and the flexibility of a custom storefront. It also opens the door for a lot of customization opportunities for merchants who want to make it their own.
Explore the project:
- Figma Prototype & Project Overview
Note: This experience was optimized with mobile devices, so it is best viewed on a smartphone.
Meet the team:
Latech Factory is a web development agency that partners with a variety of businesses to create digital experiences - from ecommerce to SAAS and beyond. They entered Packathon with a team of two designers, two developers, and one product owner.
“Overall, we felt very comfortable during the development process. Since it was based on React, the main challenge was understanding how Hydrogen/Pack is structured, including how to route, fetch data, and where to declare our routes. However, once we got the hang of it, the development flowed smoothly, and having native integrations with Shopify significantly sped up the process. We really enjoyed it! Also, big props to all the participants who joined in and did an amazing job in record time! Hopefully, this is just the first of many events like this and helps the Hydrogen and Pack ecosystem grow. Super fun experience! 💯”
“I have been very excited about the energy I felt these last few days participating in Packathon! I hope that we continue to connect to conquer new projects and co-create new experiences that bring smiles to the world. Congratulations to all for what we have accomplished! 😍”
Latech's advice for future Packathoners:
"Keep it simple. Often, teams make the mistake of aiming too high. For Packathon, it's crucial to focus on a simple yet effective idea that can be developed within the given timeframe. Simplicity doesn't equate to mediocrity. With good design, solid development, and enough time to test, you'll have a strong solution ready to deliver."
Build custom products in real-time (Best use of Pack + Buy with Prime prize)
Give shoppers full control to build their own custom products in real-time, step-by-step—and watch them come to life in three dimensions, compete with accessories. This powerful shopping experience simplifies a multi-step shopping process, and allows shoppers to customize multiple elements of a product, then add multiple elements to their cart in one click.
And it’s not just great for shoppers—merchants get a ton of control over merchandising options—with the ability to swap out products, add / remove swatches, change button styling, font colors, and more.
How he built it:
Building on top of Pack's Hydrogen theme Blueprint, Joe created a custom component that guides shoppers through the process. One of the challenges he faced as he built were fetch limits.
Using GraphQL is a great solution to improve the efficiency of the data pulled per request, making the requests more flexible than REST, however, it comes with an important change of paradigm regarding the limits of data we can pull, if now we can request only the data we need for each scenario, we are also limited by the query cost to ensure we are not just rebuilding our REST response through a different methodology. When working with this API, it is important to explore the GraphQL queries a bit deeper to better understand how to build complex queries or properly use the pagination system provided by the technology. Since I didn't have the opportunity to fully dig into the GraphQL details I had to resource to other pieces of information that were already provided, which is good, but, it also led to some nice improvements to be left out.
Why it stands out:
This project is technically very impressive, combining 3d elements with a complex, multi-phase product selection process. It clearly demonstrates that Hydrogen storefronts give merchants the flexibility they need to build custom, robust experiences that can address even complex merchandising needs, and showcases the ability to pull in modern React libraries—like Spline for 3d elements—to quickly and easily to uplevel shopping experiences.
Explore the project:
Project scope / overview documentation
GitHub repository (contained on the branch packathon-product-builder)
Meet the team:
Joe Gomez is a senior Shopify Plus engineer @ eHouse studios, and built this all single-handedly. He is deeply detail-oriented due to his Graphic design background, and has worked with top brands to build interactive, stand-out shopping experiences.
"I am super excited and happy to have participated in this Packathon, Usually, I'm so focused on the daily tasks that I forget to play and try new stuff. Packathon checked all the boxes: it gave me a reason to build something different, an opportunity to start poking into the blueprint theme, a support net to check on any challenges I may have faced —without consequences. It was just the perfect storm. It resolved concerns I had about the learning curve and let me realize that it wasn't that hard. I will definitely take advantage of every single opportunity I can get to become more and more familiar with this wonderful stack."
Joe's advice for future Packathon participants:
-
Scope the project from the beginning, and ensure it will give you room to add at least one piece of new information to your repertoire
-
Try something new, if you have any idea that you haven't had the chance to explore, this is the moment to test it out and send it to the world
-
Don't be afraid of "failure" and don't worry if you feel you won't be able to complete the project, just keep going and see where you can land, you'll be getting a lot of information from this at the low low price of nothing to lose, there are no consequences.
-
If you know nothing about Pack or Shopify or even Headless, participate anyway, hackathons are meant to push your boundaries and let you explore outside of your comfort zone.
-
Ask, ask, ask, there are no silly questions but silly people who don't ask, we don't know what we don't know and in this environment, we have a lot of support to resolve all the questions even if they feel dumb (trust me, I have my fair share of silly questions as well).
Reimagine Hydrogen use cases: From storefronts to landing pages (Best use of Hydrogen prize)
When we think of Shopify Hydrogen, most of us primarily envision a whole storefront—but it’s time to think again. It turns out that Shopify Hydrogen is also a great framework for building blazing-fast landing pages.
We loved this mobile-first, interactive landing page that makes adopting Hydrogen a lighter lift for merchants, and gives them a way to experience the power of Hydrogen without committing to upgrade their whole storefront (interactive demo). Plus, it’s optimized to make transitions from social media to a landing page completely seamless.
How he built it:
Branching off of Pack’s Blueprint theme, the team built two React-based components that are wired up to Pack so they’re easy to edit.
Why it stands out:
Instead of taking the traditional Hydrogen use case of storefronts at face-value, this team challenged the assumption that it’s the only use case for Hydrogen. Landing pages are a critical part of merchants’ customer acquisition strategies, but so often get overlooked compared to the main site. Using Hydrogen landing pages could boost page performance, and make it easier for merchants to adopt Hydrogen.
Explore the project:
Meet the team:
Jeremy Gabriel is a Lead frontend engineer @ Pack, and has built some stand-out shopping experiences on Hydrogen, including Blueprint: Pack’s Hydrogen theme. He’s driven by a love of building efficient coding solutions to develop React applications, through the lens of a design background. While embracing the latest technologies to keep sites modern, he focuses on creating enjoyable and intuitive user experiences.
Generate shopping content with AI (Most technically impressive prize)
Say goodbye to time-consuming blog posts. It’s time to tap into the power AI to generate top-notch shopping articles that convert. With this quick and easy interface, it’s easy to generate shopping-oriented articles and imagery in just a few clicks that you can immediately publish to a Pack storefront.
To generate an article, users simply select a title and handle, and optionally choose a product from their catalog that they’d like to feature, or add an outline or article ideas for AI to synthesize (if you leave it blank, AI can generate an article from scratch). With a click, the user can generate an article, and can choose to upload an image and auto-generate alt text, or use AI to generate a new image and alt text.
How she built it:
For this project, the content is generated with OpenAI Assistant, which is customized to handle the query and format the output. OpenAI’s vision capabilities can generate a new image, and image alt text if you choose to upload your own image.
Why it stands out:
AI-driven content is the future of content creation, just like Hydrogen is the future of ecommerce. This project brings the two technologies together for a seamless experience—so that merchants can launch new shopping experiences faster than ever.
For this project, the content is generated with OpenAI Assistant, which is customized to handle the query and format the output. OpenAI’s vision capabilities can generate a new image, and image alt text if you choose to upload your own image.
Explore the project:
Meet the team:
Kristyna Kralova is a technical support engineer who helps Pack customers set up and develop their stores, offering expert technical assistance and troubleshooting in front-end web development. As the Founder and Founder of SAMMI Solutions, she enables streamers to make their content interactive through a variety of plugins and API integrations. In her spare time, she enjoys tinkering with her own stream, home automation and experimenting with AI.
“Participating in the Packathon was a fantastic opportunity to dive into Hydrogen stores at Pack! I Though I faced some challenges, it was so fun to bring my experience with AI-driven streamer integrations into this project. OpenAI Assistant, still in beta, has shown such amazing potential. I didn't manage to add this feature into the Pack platform (yet), and had to hard-code some values due to time constraints, but this project showcases future possibilities. I'd also love to add features like choosing an article template, auto-publishing, and scheduling options to the builder, allowing users to do everything without leaving the page. AI is here, and I'm all for it!”
Supercharge influencer funnels (Most promising shopping innovation)
Influencer content is king for D2C—and in mose cases, influencers aren’t just showing off one amazing product. It’s about selling an entire look and lifestyle that draws shoppers in.
That means that simplifying product bundles has become a bit of a holy grail—making it easy for shoppers to add multiple elements of a look to the cart, without having to track down multiple product pages. It’s also about making sure that the landing page matches the look and feel of the social media content—so shoppers don’t get distracted by congruency gaps in the funnel.
This shopping experience design checks all the boxes. Shoppers will love the interactive, social-optimized content, the swipable, sticky product bundles, the miniaturized product selection stepper, and the unique blend of content and purchasing elements in this interactive shopping experience.
How he built it:
This design was built as a Figma prototype.
Why it stands out:
With this mobile-first, social-optimized design, sticky products and streamlined product selection options, this page helps growth marketers boost AOV for influencer campaigns, while boosting AOV and conversions as well.
Explore the project:
Check out the clickable prototype!
Meet the team:
Joshua Thayne is the founder of Anomaly, a design studio dedicated to helping digital startups enhance their brand, website, and product experiences.
“Packathon was fantastic and I learned a ton from the insights shared by the Pack team and their partners. It was incredible to see all of the talented teams and individuals that submitted projects, and to see all of the unique ideas and applications created to better the world of e-commerce.”
Bring shopping to life in 3D
3, 2, 1, Blast-off! It’s time to make your shopping experience stand out. In this dynamic hero animation, the team added a three-dimensional rocket ship to showcase the power and flexibility of Hydrogen. Hydrogen storefronts give developers access to open-source React libraries that make it 10x easier to inject cutting-edge web tech—like 3D animations—into a shopping experience.
How he built it:
"I used Spline—a 3D animation library—to build out the desktop and mobile scenes with different camera positions, and reskinned a super cool rocket asset that I found made by the creator Amoo. I applied some Spacebox Digital-esque colors to all of the materials, added some particle effects, played with some new animations, and then built out a configurable section in Pack that takes Spline embed links and all of your copy/buttons.”
Why it stands out:
It clearly showcases the flexibility and power of Hydrogen in a fun and engaging way!
Explore the project:
Meet the team:
Jon is a talented frontend engineer who is the Co-Founder and CEO of Spacebox Digitala—a brand new agency that builds Hydrogen-powered Shopify storefronts for brands that are ready to launch into orbit.
“It was super rad having the chance to hang out with an awesome group of talented developers for Packathon this past week. Lots of cool ideas and creativity, which is always really inspirational after being a dev in the eCom industry for so long. Big thanks to Pack for putting it on and putting all of that work in to create a space for people who like to create to do so. It was a ton of fun making it and hanging out with the other contestants. Definitely excited to do more 3D in the browser as time goes on!"
Honorable mentions
We had so many great projects—we just had to shout out a few more.
Compare products quickly and easily
Comparing multiple products as a shopper can be frustrating—too many windows, tabs, and product attributes to think about. With an interactive product comparison table, shoppers can find exactly what they need in one quick view! 🛍️
Well done Ben Greene!
Import sections and components automagically:
Meet your new best friend: Commerce Pack. It’s a PM package that allows a developer to import sections and components via command line into any hydrogen project. Repo coming soon!
Well done to the Akantro team!
Drag-and-drop schema builder:
Let’s speed up development for custom components. Use drag and drop to compose fields for a section schema, get the JSON, and copy-paste into a component. Check out the demo
Well done Andrew Nguyen, Head of Product @ Pack!
Real-time collaboration in Pack:
No more stepping on each others’ toes when you're creating or editing content in Pack. It’s time to bring real-time collaboration experiences into Pack’s Customizer! Check out the demo video.
Well done Corey Gwin, Sr. Software Engineer @ Pack!
Capture ad data:
Collect high-quality, first-party site data with a React component that captures critical ad platform identifiers at the very start of a page load, AND get the solution for the "GA4 missing Page Referrer" dilemma for single page web apps.
Well done to the Fueled.io team!
HUGE THANK YOU AND CONGRATULATIONS to everyone who participated!
