Expert Advice

Friendly advice: Half Helix on Shopify 2.0 & Hydrogen

Tim
|
September 12, 2022

Welcome Max & Elena! Can we start with a brief intro? 

Max: I'm the Director of Engineering at Half Helix. I've been working in eCommerce for over 10 years and originally come from a development background.
Elena: I’m a Senior Tech Lead here, I've been working in Shopify world for over 5 years and one of the OGs and first few employees on the Half Helix team.  

Excellent. First question: When a new project comes across your desk: What architecture do you recommend? 

Elena

First, it's important to learn about the business through discovery. We need to truly understand their needs so we can make architectural decisions that will help that business evolve. Every website is different, but we expect decisions made in a rebuild to last 2-5 years from launch. 

Headless, whether via Hydrogen or anything else, does typically require more effort from both the agency and the client team. However, with the right business needs, a headless architecture can be extremely enabling from a strategic point of view. 

Online Store 2.0 themes are very powerful but if there is a high amount of functional complexity or targeted requirements to satisfy, headless can be a great alternative stack choice to consider. 

That's why we need to learn about the business first, before recommending a solution. 

Max

Elena hit it on the head.  We really don't see Hydrogen vs. 2.0 as good or bad, both are great architectural options depending on your needs & crucially - also depending on your internal capabilities to manage data across highly configurable platforms, like Sanity (a headless CMS).

Ultimately, if there are issues to solve on the site, you’ll need to be self-sufficient in taking action. That’s why we recommend “simplicity first, complexity second”. It's unfortunately all too common that people request a headless build without understanding the effort that comes with it. 

We try to understand the needs & help the merchant go in the right direction. 

Let's quickly talk about Hydrogen. Does it live up to the hype? 

Yes it does. You can tell that Shopify has put a lot of blood, sweat, and tears into producing it, really softening the blow of what it means for a brand to go headless. Hydrogen doesn’t come alone. It’s coupled with Oxygen, a frontend hosting provider from Shopify for Shopify Plus. 

For merchants this means less code will be written if Hydrogen components are used effectively, less ongoing costs by adopting Oxygen, as well as extra safety points since Shopify is taking more ownership in hosting, deployment strategy and coded components.
Shopify is definitely ahead of the curve here in making unique shopping experiences accessible to more and more scaling, agile brands through this headless offering. 

What does Hydrogen mean for the app store? 

Any merchant moving over to Hydrogen should expect the app connections to take more time. Something that might have been sold as a plug and play solution, might not be as simple to integrate anymore on a headless website. But as more and more merchants switch over to Hydrogen, it'll encourage 3rd parties to rethink how their apps integrate, and how to soften the implementation in a headless context. 

Last question: What’s one store you love? 

Elena: 

r.e.m.beauty for Ariana Grande which we built at Half Helix. What I like about this site is how we minimized the third party plugin and integration dependencies to optimize for a very high profile launch. 

This allowed us to launch with a 100% Lighthouse score and performance on a custom Shopify theme, which is unheard of. It’s very fast and performant.  

r.e.m beauty for Ariana Grande

Max: 

Totally agree. Such a high stakes launch that went really, really smoothly. A great achievement for us. 

The one I’ll shout out is K2Awards. This one was really fascinating from a technical standpoint. It marries the two infrastructures discussed in our chat: 2.0 and Headless.

The bit which was handled outside of the normal theme experience is a really clever customizer that enables customers to personalize the look and feel of the trophy products sold onsite. For that, we used a different headless repository, using Vue.js and Tailwind. This was integrated into the theme in such a way where we could use the headless approach to satisfy the higher complexity of the customization experience but use a Shopify theme to handle the rest of the onsite experience. We liked this approach since for us it found a balance that allowed much of the site to remain as simple and maintainable as possible.

That was super fun.

K2 Awards Customizer

Max, Elena: Thank you both for sharing your insights. Lovely to meet & go go go Half Helix!!!

7,93
15,86
23,8
31,73
39,66
47,6
55,53
63,46
71,4

Welcome Max & Elena! Can we start with a brief intro? 

Max: I'm the Director of Engineering at Half Helix. I've been working in eCommerce for over 10 years and originally come from a development background.
Elena: I’m a Senior Tech Lead here, I've been working in Shopify world for over 5 years and one of the OGs and first few employees on the Half Helix team.  

Excellent. First question: When a new project comes across your desk: What architecture do you recommend? 

Elena

First, it's important to learn about the business through discovery. We need to truly understand their needs so we can make architectural decisions that will help that business evolve. Every website is different, but we expect decisions made in a rebuild to last 2-5 years from launch. 

Headless, whether via Hydrogen or anything else, does typically require more effort from both the agency and the client team. However, with the right business needs, a headless architecture can be extremely enabling from a strategic point of view. 

Online Store 2.0 themes are very powerful but if there is a high amount of functional complexity or targeted requirements to satisfy, headless can be a great alternative stack choice to consider. 

That's why we need to learn about the business first, before recommending a solution. 

Max

Elena hit it on the head.  We really don't see Hydrogen vs. 2.0 as good or bad, both are great architectural options depending on your needs & crucially - also depending on your internal capabilities to manage data across highly configurable platforms, like Sanity (a headless CMS).

Ultimately, if there are issues to solve on the site, you’ll need to be self-sufficient in taking action. That’s why we recommend “simplicity first, complexity second”. It's unfortunately all too common that people request a headless build without understanding the effort that comes with it. 

We try to understand the needs & help the merchant go in the right direction. 

Let's quickly talk about Hydrogen. Does it live up to the hype? 

Yes it does. You can tell that Shopify has put a lot of blood, sweat, and tears into producing it, really softening the blow of what it means for a brand to go headless. Hydrogen doesn’t come alone. It’s coupled with Oxygen, a frontend hosting provider from Shopify for Shopify Plus. 

For merchants this means less code will be written if Hydrogen components are used effectively, less ongoing costs by adopting Oxygen, as well as extra safety points since Shopify is taking more ownership in hosting, deployment strategy and coded components.
Shopify is definitely ahead of the curve here in making unique shopping experiences accessible to more and more scaling, agile brands through this headless offering. 

What does Hydrogen mean for the app store? 

Any merchant moving over to Hydrogen should expect the app connections to take more time. Something that might have been sold as a plug and play solution, might not be as simple to integrate anymore on a headless website. But as more and more merchants switch over to Hydrogen, it'll encourage 3rd parties to rethink how their apps integrate, and how to soften the implementation in a headless context. 

Last question: What’s one store you love? 

Elena: 

r.e.m.beauty for Ariana Grande which we built at Half Helix. What I like about this site is how we minimized the third party plugin and integration dependencies to optimize for a very high profile launch. 

This allowed us to launch with a 100% Lighthouse score and performance on a custom Shopify theme, which is unheard of. It’s very fast and performant.  

r.e.m beauty for Ariana Grande

Max: 

Totally agree. Such a high stakes launch that went really, really smoothly. A great achievement for us. 

The one I’ll shout out is K2Awards. This one was really fascinating from a technical standpoint. It marries the two infrastructures discussed in our chat: 2.0 and Headless.

The bit which was handled outside of the normal theme experience is a really clever customizer that enables customers to personalize the look and feel of the trophy products sold onsite. For that, we used a different headless repository, using Vue.js and Tailwind. This was integrated into the theme in such a way where we could use the headless approach to satisfy the higher complexity of the customization experience but use a Shopify theme to handle the rest of the onsite experience. We liked this approach since for us it found a balance that allowed much of the site to remain as simple and maintainable as possible.

That was super fun.

K2 Awards Customizer

Max, Elena: Thank you both for sharing your insights. Lovely to meet & go go go Half Helix!!!

Talk to an expert
Discuss the project for free
with a Storetasker Expert
From an Expert
No items found.
7,93
15,86
23,8
31,73
39,66
47,6
55,53
63,46
71,4