[HN Gopher] Storefront Web Components
___________________________________________________________________
Storefront Web Components
Author : maltenuhn
Score : 106 points
Date : 2025-05-21 17:08 UTC (5 hours ago)
(HTM) web link (shopify.dev)
(TXT) w3m dump (shopify.dev)
| metalrain wrote:
| 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.
| rado wrote:
| Right? Not sure how to "Press P to play" on an iPad, play what,
| and why?
| koakuma-chan wrote:
| They need to stop putting three.js everywhere
| nightpool wrote:
| The link has been updated to the docs now, thanks dang!
| skrebbel wrote:
| Now _this_ is what Web Components are great for.
|
| The playground is very well done btw, worth checking out IMO:
| https://webcomponents.shopify.dev/playground?view=editor
| charlesabarnes wrote:
| 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
| delusional wrote:
| 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.
| skeptrune wrote:
| I could not understand what this was from the linked site. Docs
| if anyone is curious - https://shopify.dev/docs/api/storefront-
| web-components.
|
| I really appreciate that they built this. The `shopify-context`
| is especially useful. Makes rendering all of the various
| resources infinitely easier.
| dang wrote:
| Thanks! We've changed the link to that from
| https://webcomponents.shopify.dev/playground.
| mercurialsolo wrote:
| 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?
| ugh123 wrote:
| > 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
| bflesch wrote:
| 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
| no_wizard wrote:
| 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
| Joeri wrote:
| 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.
| zero0529 wrote:
| I don't understand is this made for the hydrogen framework?
| gbalint wrote:
| 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.
| jjcm wrote:
| 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).
| postepowanieadm wrote:
| MD version is intended for LLM consumption?
| blittle wrote:
| 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!
| shooker435 wrote:
| 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?
| blittle wrote:
| 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.
| calebkaiser wrote:
| 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?
| blittle wrote:
| 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
| calebkaiser wrote:
| 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.
| xfalcox wrote:
| 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?
| blittle wrote:
| I'm excited to see what you build! DM me on bluesky:
| https://bsky.app/profile/bretlittle.com
| vasusen wrote:
| Really cool! Curious to know what was your testing strategy for
| these?
| threeseed wrote:
| 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.
___________________________________________________________________
(page generated 2025-05-21 23:00 UTC)