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).
Storefront Web Components
21–30 of 57 posts
Re: Storefront Web Components
#22MD version is intended for LLM consumption?
Re: Storefront Web Components
#23What 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.
The link has been updated to the docs now, thanks dang!
Re: Storefront Web Components
#24It 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
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.
Re: Storefront Web Components
#25I'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 ``. Though...you can actually build the entire cart component with the lower level primitives!
Re: Storefront Web Components
#26I'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…
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?
Re: Storefront Web Components
#27I don’t understand is this made for the hydrogen framework?
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.
Re: Storefront Web Components
#28[deleted]
Re: Storefront Web Components
#29[deleted]
Re: Storefront Web Components
#30I'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…
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?
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.