alt.hn

5/21/2025 at 5:08:58 PM

Storefront Web Components

 https://shopify.dev/docs/api/storefront-web-components

by maltenuhn

5/21/2025 at 7:53:20 PM

I'm on the dev team that built this. Happy to answer any questions!

We essentially use web components as a templating language to dynamically generate a GraphQL query to Shopify. Then render the data as text nodes inside the web components. This is powerful because the components don't include shadow roots. So you can come with your own HTML and CSS.

Most web component libraries are opinionated about design, and give you many CSS custom properties or CSS parts to customize. We tried really hard to invert that, and instead give you the design control. Most of our web components just produce a text node, with no shadow root!

There's a few exceptions, like the cart for example, where it's easier to just have an out of the box component that does it all for you `<shopify-cart>`. Though...you can actually build the entire cart component with the lower level primitives!

by blittle

5/22/2025 at 1:47:03 AM

This looks great, glad to see this project and congrats on the launch. Having said that, how does this project fit in with the Shopify Hydrogen effort using Remix / React? There seems to be an ever growing number of ways to build a shopify storefront these days (ie, native templates, remix/hydrogen, web components, Shopify JS Buy SDK, etc.) so it's not clear what technology to "bet on" from a developer perspective.

Separately, nice touch adding the refined LLM instructions, this looks like a nice pattern for other UI frameworks to follow.

by rbitar

5/22/2025 at 5:25:20 PM

Different tools for different users and different levels of control.

by paulddraper

5/22/2025 at 5:15:39 PM

I'm excited to see more Web Component libraries in the wild eschewing the Shadow DOM. I don't think enough developers have yet caught the message that the Shadow DOM is optional and Web Components are simpler and especially simpler to style if they skip it.

by WorldMaker

5/21/2025 at 8:38:40 PM

I'm a big fan of web components, and this seems like a very cool project. I'm curious about how it fits into the broader frontend ethos at Shopify. I remember the Shopify team being one of the earliest proponents of React Server Components, for example. Is the team still working in that direction as well, or does this represent a new direction org-wide?

by calebkaiser

5/21/2025 at 8:43:50 PM

I'm also on the hydrogen team. Today we also shipped support for Hydrogen on React Router 7, which has experimental support for RSC: https://remix.run/blog/rsc-preview

by blittle

5/21/2025 at 8:53:44 PM

Awesome! I appreciate all the open work your team does. A couple years ago, I was staffed on a project that was adopting RSC super early on, and I vividly remember crawling through Shopify blogs/code as one of the few solid resources available.

by calebkaiser

5/21/2025 at 8:40:13 PM

This looks like a great fit for allowing people to monetize their Discourse forums, by having partners stores and plugging those instead of ads.

Will build a quick poc integration. How can I contact you with feedback?

by xfalcox

5/22/2025 at 3:23:15 AM

love the site and experience. i'm mostly curious how you pitched the project internally and got buy-in for the project. congrats on the launch

by scottrogers86

5/22/2025 at 12:18:14 PM

How are these order annotated in Shopify admin? Thinking specifically about various types of partnerships? Could a flow automation be set up to: pay commission (for the influencer model), pay inverse wholesale pricing (for dropshippers), etc.

by QuantumWanderer

5/21/2025 at 7:56:58 PM

This seems super powerful. Would you recommend that an app developer who is creating App Blocks for PLPs (Search, Collections, etc.) use these new Web Components instead of building everything themselves?

by shooker435

5/21/2025 at 8:37:13 PM

This is primarily for embedding in 3p sites, Shopify already has liquid for hosted storefronts. As for search and collections, we don't quite yet have support for search and filters. Though we do support pagination.

by blittle

5/21/2025 at 9:56:56 PM

Really cool! Curious to know what was your testing strategy for these?

by vasusen

5/22/2025 at 12:27:43 AM

Lots of e2e tests

by blittle

5/22/2025 at 6:19:25 AM

Makes sense. Which framework did you end up using for e2e testing (Rspec, Playwright, others)?

by vasusen

5/21/2025 at 11:06:44 PM

This is great, I think this is perfect use for web components and gives your customers trying to build a fully custom storefront a much better experience. I built something similar for stripe based sites a couple years ago but didn't get too much attention: https://elements.launchscout.com/

by superchris

5/21/2025 at 6:18:21 PM

This is a master move though - it's kinda like video(youtube) embeds in your site. If every site could sell and have an infinite curated catalog from shopify merchants - shopify becomes both the discovery, distribution and the shopping network?

by mercurialsolo

5/21/2025 at 9:08:45 PM

> If every site could sell and have an infinite curated catalog from shopify merchants

are you implying a scenario where anyone could create a "storefront of storefronts" using products from various shopify accounts (owned or not owned by that person)? Would be an interesting affiliate opportunity

by ugh123

5/21/2025 at 6:47:52 PM

It seems that maybe web component advocates are right. Eventually they’ll eat everything, even if slowly.

Shopify for the longest time had a “hardline” with only supporting React directly, if I recall correctly

by no_wizard

5/21/2025 at 7:47:25 PM

Web components are not a panacea and they will not eat everything. This sort of use case, making component libraries to drop into unknown territory, is what they're good at. Frameworks will still have their own component systems because it allows them to deliver better developer experience and achieve higher rendering performance.

by Joeri

5/22/2025 at 1:07:18 AM

These are awesome! Perfect use case for web component, incredible how much less code and work is required compared to hydrogen with React (no disrespect intended). Very clever.

Is it going to be open sourced at all? I took a brief look at shopify's GitHub and didn't see it there.

by _benton

5/21/2025 at 7:31:06 PM

Shopify's tooling is top notch. They're one of my go-to examples of a really well engineered design system and usable docs. Highly recommend using them for inspiration (and obv for integration if you need a shop front).

by jjcm

5/21/2025 at 9:38:02 PM

Are developers able to use this within Shopify apps ?

I wish Shopify made it easier to discern who the audience are for these frameworks since they have quite a few.

by threeseed

5/22/2025 at 11:23:49 AM

This is great, now that react 19 also supports web components this makes total sense.

by qu0b

5/22/2025 at 12:20:26 AM

Does this work on the Starter plan, that is, headless? When I talked to NextJS Commerce devs years ago they said no.

by theyknowitsxmas

5/22/2025 at 2:46:24 AM

I opened the demo and said out loud "this is nuts!". Amazing job team.

by azar1

5/22/2025 at 3:47:00 AM

Probably the best fit for web components I've seen. Very cool.

by lelandfe

5/21/2025 at 7:03:16 PM

I don’t understand is this made for the hydrogen framework?

by zero0529

5/21/2025 at 8:02:58 PM

No, you don't need hydrogen or any other framework to use storefront components. You can add store functionality to any page (even to a statically served html file) just by adding some html code.

by gbalint

5/21/2025 at 7:37:03 PM

MD version is intended for LLM consumption?

by postepowanieadm

5/22/2025 at 8:28:21 AM

Liad from the team here - yes, it provides a full context from the docs to the LLMs, so they will be able to correctly use the components when generating code. It can be copy-pasted directly to the prompt, or downloaded and attached as a file.

by liadyo

5/22/2025 at 2:37:18 PM

this is the future web that I want

by firemelt

5/22/2025 at 2:24:17 AM

Solid. I really like this direction.

I never used Shopify much, can it be used to deliver digital products?

by desireco42

5/21/2025 at 6:22:38 PM

Shopify currently has a scandal in Germany because they blocked payouts for a TV-famous startup which "ships too slowly".

The startup locally produces clothing from sheep wool and only starts production once the order is in. Shopify is unable to understand the concept of make-to-order-production, it's a bit ridiculous to see what their support people are writing.

More on youtube: https://www.youtube.com/watch?v=ovRpTsHO13U

by bflesch

5/21/2025 at 5:43:38 PM

What a terrible UX on that site. This site barely works on my mobile.

When I think storefront I think simple & fast, this site is not at all that.

Stores are "hidden" by design, it is about the products and store itself just provides them.

by metalrain

5/21/2025 at 6:15:06 PM

Right? Not sure how to “Press P to play” on an iPad, play what, and why?

by rado

5/21/2025 at 6:29:10 PM

They need to stop putting three.js everywhere

by koakuma-chan

5/21/2025 at 7:46:04 PM

The link has been updated to the docs now, thanks dang!

by nightpool

5/21/2025 at 5:59:39 PM

As other have mentioned the site design is way overcooked. It's also interesting that the example products all seem to be riffs off of Teenage Engineering stuff.

by delusional

5/21/2025 at 5:53:40 PM

I _really_ dislike this marketing site, but I really appreciate this effort from shopify.

constructive criticism: It looks cool, but it took far too long to get my bearings on the site

by charlesabarnes

5/21/2025 at 6:41:36 PM

[flagged]

by victor106