4 ms·

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 GraphQ

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
  - calebkaiser 1y ago
    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 1y ago
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 1y ago
  I'm excited to see what you build! DM me on bluesky: https://bsky.app/profile/bretlittle.com https://bsky.app/profile/bretlittle.com
vasusen 1y ago
Really cool! Curious to know what was your testing strategy for these?
- blittle 1y ago
  Lots of e2e tests
  - vasusen 1y ago
    Makes sense. Which framework did you end up using for e2e testing (Rspec, Playwright, others)?
rbitar 1y ago
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.
- paulddraper 1y ago
  Different tools for different users and different levels of control.
scottrogers86 1y ago
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
QuantumWanderer 1y ago
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.
WorldMaker 1y ago
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.

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

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 1y ago
I'm excited to see what you build! DM me on bluesky: https://bsky.app/profile/bretlittle.com https://bsky.app/profile/bretlittle.com

vasusen 1y ago

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

blittle 1y ago
Lots of e2e tests
- vasusen 1y ago
  Makes sense. Which framework did you end up using for e2e testing (Rspec, Playwright, others)?

rbitar 1y ago

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.

paulddraper 1y ago
Different tools for different users and different levels of control.

scottrogers86 1y ago

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

QuantumWanderer 1y ago

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.

WorldMaker 1y ago

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.