Marcin Nogal

Co-founder @shopstoryapp. Digital Producer.

[Andrzej Dąbrowski @ardabrowski]

Incredibly proud to finally launch Easyblocks - an open-source visual builder framework! 🎉

You can now build a custom and simple-to-use drag&drop page builder for your product in days.

Live demo: https://t.co/9fy6vGFpjg
Github: https://t.co/rLD733KNP5

[Commerce-UI @commerce_ui]

Huge NEWS! 🎉

We're proud to announce that together with design stars @pentagram we built a new site for AI vision pioneers - Stereolabs!

✅ Ultra-fast worldwide
✅ State-of-the-art content management

All possible thanks to @nextjs, @vercel, @sanity_io, @MuxHQ

Key takeaways👇

[Commerce-UI @commerce_ui]

Choosing between Hydrogen & @nextjs for your @Shopify store? Both are powerhouses in headless e-commerce!

Each has its unique strengths & weaknesses. Here's a high-level overview: ⬇️

1️⃣ Starter Templates:

Hydrogen and Next.js provide robust starting points for e-commerce essentials like product display pages and shopping cart interactions. But Hydrogen goes further, integrating features like Shopify Analytics, minimal Markets setups, and Shopify routing right out of the box. It seems to be a complete solution for what you would expect from a Shopify starter and is closer to native Shopify starter templates like Dawn.

2️⃣ Hydrogen React:

Hydrogen React provides a set of performant React components, reusable functions, and utilities for interacting with the Storefront API. It’s agnostic and could be used in both frameworks. The hydrogen starter incorporates it right from the beginning.

3️⃣ Community Support:

@nextjs takes the trophy with a vast, active community and a treasure trove of pre-built solutions. While Hydrogen's community is promising, it's newer and less navigable, especially when jumping between insights from Hydrogen and @remix_run forums.

4️⃣ Hosting & Deployment:

There's a noticeable divide between Shopify's Oxygen and @vercel regarding hosting and deployment. Both platforms deliver content efficiently worldwide, but the similarities end here.

Oxygen is minimalist, perhaps overly so, offering the basics but leaving much of the heavy lifting, like the build process, to developers. It's a bare-bones approach that requires manual setup (for example, using GitHub Actions).

Vercel, on the other hand, is a mature platform with a rich feature set. It handles the building and deployment processes seamlessly. With an extensive array of tools, including API access, an integrations marketplace, and advanced logging and monitoring, Vercel stands out as the more versatile option.

In essence, Oxygen still has much growing to do to match Vercel. For now, Vercel leads the race, offering a comprehensive, developer-friendly environment that's hard for the simpler, less seasoned Oxygen to compete with.

5️⃣ Architecture:

The architectural landscape of Hydrogen and Next.js is primarily a contrast between @remix_run and @nextjs, with Hydrogen functioning as a thin layer atop Remix.

While diving deep into the architectural nuances between Next.js and Remix is beyond this post's scope, it's crucial to note Remix's highly opinionated nature. It enforces specific approaches to data fetching, site rendering, routing, and metadata generation. It provides excellent APIs for those tasks. However, you have to get familiar with the intricacies of the framework itself.

Next.js, on the other hand, feels much closer to native React and introduces less framework-specific APIs and boilerplate. The new app router depends on React Server Components (RSC) for server rendering and offers support for more than one site rendering strategy like Static Site Generation and Incremental Static Regeneration (ISR)

At the end of the day, your choice hinges on preference: Remix offers a more guided, explicit way of doing things, while Next.js is more flexible, allowing for multiple paradigms and less prescriptive practices.

6️⃣Summary

So, which one should you pick? As annoying as it could be - it depends. Consider these points:
- New to Shopify? Hydrogen might be more accessible, guiding you through the specific quirks of Shopify APIs.
- Relying on Shopify experts? They'll likely prefer Hydrogen. But if you are sourcing your team outside of the Shopify ecosystem, Next.js will instead be a go-to solution.
- Is your online store part of a broader system? Next.js and Vercel’s flexibility could be handy, especially if you need to integrate with other platforms.
- A game for potential - Hydrogen is in its early stages. However, we expect it to grow as Shopify embraces a composable, API-first architecture. After a certain point, we expect the Shopify apps to catch up with Headless and target Hydrogen as their go-to headless solution.

In short, both are solid picks. If you favor Hydrogen or are unsure, go with Hydrogen and stick to its recommended best practices. Otherwise, if you feel strongly about Next.js, don’t think twice — you likely know how to make the most of it.

We will continue to build using both solutions, taking into account the unique characteristics of our clients.

[Commerce-UI @commerce_ui]

Big day! Our first Shopify Hydrogen project is live 🎉

Meet Nour Hammour – a luxury fashion outwear brand from Paris. The new website is beautiful, immersive, performant, and intuitive.

◆ Hydrogen 2 (@remix_run) + Oxygen
◆ @sanity_io CMS

Truly production-ready stack 👌

Only a month after launch Nour Hammour saw a 63% increase in conversion rate and 128% in sales 🚀

A collaboration between Commerce-UI (development) and @aniaetlucie (design).

#shopifyhydrogen #shopify #ecommerce #headless

[Commerce-UI @commerce_ui]

Exciting update from our recent London event! 🚀

We explored the future of ecommerce, enjoyed drinks & food after eCommerce Expo, and featured an outstanding panel speakers 🎙️ from
@commerce_ui, @vervaunt, @Shopify.

Thrilled that amazing brands like @skims ,@Axelarigato , @nanushka , and Floris London joined us!

Huge thanks to our partners: @Shopify, @vervaunt , @sanity_io , @theheadlessclub and @NostoSolutions . 🙌

#ecommerce

[Commerce-UI @commerce_ui]

Have you seen Apple-style scroll animations on Magda Butrym's handbags campaign? Our personal favorite!

https://t.co/NZEMIegb4n

[Marcin Nogal @mnogal]

@paulnrogers A few I like: https://t.co/77hQsYoCYo you probably know, https://t.co/S8yQzEXjwP, new https://t.co/dkmNPjaKdN elevated, https://t.co/vJ1o3pGKfK bold, https://t.co/gLHf8HmeS9 is super nice.

[Commerce-UI @commerce_ui]

A lot of you ask why is this site headless @nextjs+@vercel? Why not native @Shopify?

Here's why we think that headless was, and still is, a great choice for
e-commerce business like Magda Butrym.

[Marcin Nogal @mnogal]

@JoshSchoen @james_kirkup Product Detail Page

[Marcin Nogal @mnogal]

@james_kirkup Glad you like it ✌️ Here’s a behind the scenes thread: https://t.co/i3E1CrmL4O

[Commerce-UI @commerce_ui]

Exciting to see so many of you liked the Magda Butrym PDP (@kalenjordan 🙌)! Our team thought to share a behind-the-scenes look at how it was created.

Video production, design, and technology details👇

[Marcin Nogal @mnogal]

@patrickbjohnson @shanerostad @x_armand While I agree you can achieve A LOT with liquid today, never seen non headless website performing that good, especially with video content (incognito, cleared cache).

[Marcin Nogal @mnogal]

@kalenjordan 👀 There’s even more: https://t.co/i3E1CrmL4O

[Commerce-UI @commerce_ui]

Exciting to see so many of you liked the Magda Butrym PDP (@kalenjordan 🙌)! Our team thought to share a behind-the-scenes look at how it was created.

Video production, design, and technology details👇

[Marcin Nogal @mnogal]

@keyanasapp @rabahrahil @commerce_ui did

[Marcin Nogal @mnogal]

As you analyze the page these choices seem obvious, yet most brands would end up treating it as a regular product, or create a landing disconnected from shopping functionality.

Excellent work by the Atoms team, see it live: https://t.co/jVIgKuCLry

#DTC #ecommerce #uxdesign

[Marcin Nogal @mnogal]

Ecommerce brands are often unaware of the potential PDPs have. @Atoms did excellent work enhancing their PDP for the collaboration with @MKBHD. A UX analysis:

[Marcin Nogal @mnogal]

However, what's most interesting happens below the fold:

– YT video embed with Marques introducing the product himself

– Close-up product shots with highlighted details

– Social media community reviews

[Marcin Nogal @mnogal]

@OnePageLove @AdhamDannaway @uijarcom @uigarage @dribbble @httpster_ @siteinspire @LapaNinja @godlywebsite @minimal_gallery @landbookgallery @theheadlessclub Cheers Rob!