7 ms·

Storefront Web Components

164 points by maltenuhn 1y ago

metalrain 1y ago
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 1y ago
  Right? Not sure how to “Press P to play” on an iPad, play what, and why?
- koakuma-chan 1y ago
  They need to stop putting three.js everywhere
- deleted 1y ago
  [deleted]
- nightpool 1y ago
  The link has been updated to the docs now, thanks dang!
  - deleted 1y ago
    [deleted]
skrebbel 1y ago
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 https://webcomponents.shopify.dev/playground?view=editor
charlesabarnes 1y ago
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
- deleted 1y ago
  [deleted]
- deleted 1y ago
  [deleted]
delusional 1y ago
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.
- deleted 1y ago
  [deleted]
skeptrune 1y ago
I could not understand what this was from the linked site. Docs if anyone is curious - https://shopify.dev/docs/api/storefront-web-components 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 1y ago
  Thanks! We've changed the link to that from https://webcomponents.shopify.dev/playground https://webcomponents.shopify.dev/playground.
mercurialsolo 1y ago
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 1y ago
  > 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 1y ago
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 https://www.youtube.com/watch?v=ovRpTsHO13U
- deleted 1y ago
  [deleted]
victor106 1y ago
[flagged]
- deleted 1y ago
  [deleted]
no_wizard 1y ago
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 1y ago
  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 1y ago
I don’t understand is this made for the hydrogen framework?
- gbalint 1y ago
  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 1y ago
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 1y ago
MD version is intended for LLM consumption?
- liadyo 1y ago
  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.
blittle 1y ago
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 1y ago
  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 1y ago
    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 1y ago
  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 1y ago
    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 https://remix.run/blog/rsc-preview
deleted 1y ago
[deleted]
deleted 1y ago
[deleted]
threeseed 1y ago
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.
- frehner 1y ago
  Polaris is now built with web components and is for building apps all across Shopify - another new announcement today. https://shopify.dev/beta/next-gen-dev-platform/polaris https://shopify.dev/beta/next-gen-dev-platform/polaris I’m a dev on this new Polaris, feel free to ask anything!
jonah 1y ago
Heh, they have prompts you can feed to an LLM: https://webcomponents.shopify.dev/llms.txt https://webcomponents.shopify.dev/llms.txt
superchris 1y ago
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/ https://elements.launchscout.com/
theyknowitsxmas 1y ago
Does this work on the Starter plan, that is, headless? When I talked to NextJS Commerce devs years ago they said no.
_benton 1y ago
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.
desireco42 1y ago
Solid. I really like this direction. I never used Shopify much, can it be used to deliver digital products?
azar1 1y ago
I opened the demo and said out loud "this is nuts!". Amazing job team.
lelandfe 1y ago
Probably the best fit for web components I've seen. Very cool.
qu0b 1y ago
This is great, now that react 19 also supports web components this makes total sense.
firemelt 1y ago
this is the future web that I want

164 points by maltenuhn 1y ago

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 1y ago
Right? Not sure how to “Press P to play” on an iPad, play what, and why?
koakuma-chan 1y ago
They need to stop putting three.js everywhere
deleted 1y ago
[deleted]
nightpool 1y ago
The link has been updated to the docs now, thanks dang!
- deleted 1y ago
  [deleted]

skrebbel 1y ago

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 https://webcomponents.shopify.dev/playground?view=editor

charlesabarnes 1y ago

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

deleted 1y ago
[deleted]
deleted 1y ago
[deleted]

delusional 1y ago

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.

deleted 1y ago
[deleted]

skeptrune 1y ago

I could not understand what this was from the linked site. Docs if anyone is curious - https://shopify.dev/docs/api/storefront-web-components 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 1y ago
Thanks! We've changed the link to that from https://webcomponents.shopify.dev/playground https://webcomponents.shopify.dev/playground.

mercurialsolo 1y ago

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 1y ago
> 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 1y ago

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 https://www.youtube.com/watch?v=ovRpTsHO13U

deleted 1y ago
[deleted]

victor106 1y ago

[flagged]

deleted 1y ago
[deleted]

no_wizard 1y ago

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 1y ago
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 1y ago

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

gbalint 1y ago
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 1y ago

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 1y ago

MD version is intended for LLM consumption?

liadyo 1y ago
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.

blittle 1y ago

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 1y ago
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 1y ago
  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 1y ago
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 1y ago
  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 https://remix.run/blog/rsc-preview

deleted 1y ago

[deleted]

deleted 1y ago

[deleted]

threeseed 1y ago

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.

frehner 1y ago
Polaris is now built with web components and is for building apps all across Shopify - another new announcement today. https://shopify.dev/beta/next-gen-dev-platform/polaris https://shopify.dev/beta/next-gen-dev-platform/polaris I’m a dev on this new Polaris, feel free to ask anything!

jonah 1y ago

Heh, they have prompts you can feed to an LLM: https://webcomponents.shopify.dev/llms.txt https://webcomponents.shopify.dev/llms.txt

superchris 1y ago

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/ https://elements.launchscout.com/

theyknowitsxmas 1y ago

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

_benton 1y ago

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.

desireco42 1y ago

Solid. I really like this direction. I never used Shopify much, can it be used to deliver digital products?

azar1 1y ago

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

lelandfe 1y ago

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

qu0b 1y ago

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

firemelt 1y ago

this is the future web that I want