I'm on the dev team that built this. Happy to answer any questions!<p>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.<p>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!<p>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!
I could not understand what this was from the linked site. Docs if anyone is curious - <a href="https://shopify.dev/docs/api/storefront-web-components" rel="nofollow">https://shopify.dev/docs/api/storefront-web-components</a>.<p>I really appreciate that they built this. The `shopify-context` is especially useful. Makes rendering all of the various resources infinitely easier.
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: <a href="https://elements.launchscout.com/" rel="nofollow">https://elements.launchscout.com/</a>
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?
It seems that maybe web component advocates are right. Eventually they’ll eat everything, even if slowly.<p>Shopify for the longest time had a “hardline” with only supporting React directly, if I recall correctly
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.<p>Is it going to be open sourced at all? I took a brief look at shopify's GitHub and didn't see it there.
Now <i>this</i> is what Web Components are great for.<p>The playground is very well done btw, worth checking out IMO: <a href="https://webcomponents.shopify.dev/playground?view=editor" rel="nofollow">https://webcomponents.shopify.dev/playground?view=editor</a>
Heh, they have prompts you can feed to an LLM:<p><a href="https://webcomponents.shopify.dev/llms.txt" rel="nofollow">https://webcomponents.shopify.dev/llms.txt</a>
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).
Are developers able to use this within Shopify apps ?<p>I wish Shopify made it easier to discern who the audience are for these frameworks since they have quite a few.
Shopify currently has a scandal in Germany because they blocked payouts for a TV-famous startup which "ships too slowly".<p>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.<p>More on youtube: <a href="https://www.youtube.com/watch?v=ovRpTsHO13U" rel="nofollow">https://www.youtube.com/watch?v=ovRpTsHO13U</a>
What a terrible UX on that site. This site barely works on my mobile.<p>When I think storefront I think simple & fast, this site is not at all that.<p>Stores are "hidden" by design, it is about the products and store itself just provides them.
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.
I _really_ dislike this marketing site, but I really appreciate this effort from shopify.<p>constructive criticism: It looks cool, but it took far too long to get my bearings on the site