frontpage.
newsnewestaskshowjobs

Made with ♥ by @iamnishanth

Open Source @Github

Open in hackernews

Storefront Web Components

https://shopify.dev/docs/api/storefront-web-components
112•maltenuhn•6h ago

Comments

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

charlesabarnes•5h 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

delusional•5h 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.
skeptrune•5h 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.

I really appreciate that they built this. The `shopify-context` is especially useful. Makes rendering all of the various resources infinitely easier.

dang•4h ago
Thanks! We've changed the link to that from https://webcomponents.shopify.dev/playground.
mercurialsolo•5h 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•2h 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•5h 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

no_wizard•4h 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•3h 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•4h ago
I don’t understand is this made for the hydrogen framework?
gbalint•3h 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•4h 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•3h ago
MD version is intended for LLM consumption?
blittle•3h 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•3h 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•2h 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•2h 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•2h 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
calebkaiser•2h 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•2h 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•2h ago
I'm excited to see what you build! DM me on bluesky: https://bsky.app/profile/bretlittle.com
vasusen•1h ago
Really cool! Curious to know what was your testing strategy for these?
threeseed•1h 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.

jonah•28m ago
Heh, they have prompts you can feed to an LLM:

https://webcomponents.shopify.dev/llms.txt

superchris•26m 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/

Brian Eno denounces Microsoft for its ties to Israeli government

https://www.theverge.com/news/671864/brian-eno-windows-95-chime-microsoft-israel-palestine-statement
3•ericzawo•4m ago•0 comments

Show HN: Ninja.ai – Create and Install MCP Servers with One Click

https://ninja.ai/
1•schappim•4m ago•0 comments

Modular, LLM-Flexible AI Agent Builder for Omnichannel Telecom

https://www.cloud-net.ai/case-studies/introducing-veris-lite-ai-agent-builder
1•y2so•5m ago•0 comments

Bitcoin hits new all time high near $110K

https://www.thestreet.com/crypto/markets/bitcoin-hits-new-all-time-high
1•ur-whale•5m ago•0 comments

Apple Filing Protocol will soon disappear from macOS

https://appleinsider.com/inside/macos-sequoia/tips/apple-filling-protocol-will-soon-disappear-completely-from-macos
1•miles•5m ago•0 comments

Why did medieval readers kiss, smudge and deface their books?

https://news.berkeley.edu/2025/05/13/why-did-medieval-readers-kiss-smudge-and-deface-their-books/
2•gnabgib•11m ago•0 comments

Temperature-controlled switch activates sperm, is key to fertility

https://medicine.washu.edu/news/temperature-controlled-switch-activates-sperm-is-key-to-fertility/
1•gmays•11m ago•0 comments

Ask HN: Engineering Statics and Dynamics book recommendation

2•areoform•12m ago•0 comments

Chris Maple, creator of the iconic Pokémon logo, reveals his early design drafts

https://www.ign.com/articles/meet-the-man-who-designed-pokemons-iconic-logo
1•frigidwalnut•15m ago•0 comments

Should I Block ICMP?

http://shouldiblockicmp.com/
4•rascul•15m ago•0 comments

Microsoft AI Exec Accidentally Spills Walmart's AI Plans

https://autogpt.net/microsoft-ai-exec-accidentally-spills-walmarts-ai-plans-during-protest-rattled-talk/
1•zhengiszen•16m ago•0 comments

Microsoft employee shouts over Satya Nadella's keynote to protest

https://fortune.com/article/microsoft-employee-protest-satya-nadella-keynote-israel-contracts-gaza-azure/
1•zhengiszen•16m ago•0 comments

Abraham Lincoln artifacts that were once in a museum are going up for auction

https://chicago.suntimes.com/politics/2025/05/20/abraham-lincoln-artifacts-that-were-once-in-a-museum-are-going-up-for-auction
2•donsupreme•18m ago•0 comments

Politeness to ChatGPT raises OpenAI's operational costs

https://www.perplexity.ai/page/politeness-to-chatgpt-raises-o-qu9DjX3DRp6v5fwHtNVYQA
1•iio7•19m ago•1 comments

CRDTs: Pros and Cons (Lattices and Lettuces?)

https://jhellerstein.github.io/blog/crdt-intro/
2•KraftyOne•20m ago•0 comments

Open Source Can't Coordinate

https://matklad.github.io/2025/05/20/open-source-cant-coordinate.html
3•goranmoomin•24m ago•3 comments

Putting rigid bodies to rest [pdf]

https://www.cs.cmu.edu/~kmcrane/Projects/RestingBodies/PuttingRigidBodiesToRest.pdf
1•robinhouston•27m ago•0 comments

Are groovy brains more efficient?

https://news.berkeley.edu/2025/05/21/are-groovy-brains-more-efficient/
2•amichail•27m ago•0 comments

Rosettacode.org Is Down

2•abetusk•30m ago•0 comments

GeoGuessr Most Popular Maps Unplayable Protest of Saudi-Backed Esports World Cup

https://aftermath.site/geoguessr-blackout-esports-world-cup-saudi-arabia
1•healsdata•34m ago•0 comments

Running WebAssembly (WASM) Components from the Command Line

https://bytecodealliance.org/articles/invoking-component-functions-in-wasmtime-cli
1•tpmccallum•37m ago•0 comments

Show HN: Dora

https://dorafiles.com
2•ata_aman•37m ago•0 comments

Why Good Programmers Use Bad AI

https://nmn.gl/blog/ai-and-programmers
1•namanyayg•37m ago•0 comments

Treasury Yields Soar as Ballooning U.S. Deficit Worries Wall Street

https://www.investopedia.com/treasury-yields-soar-as-ballooning-us-deficit-worries-wall-street-11739473
8•inverted_flag•40m ago•1 comments

I have tinnitus. I don't recommend it

https://blog.greg.technology/2025/05/20/tinnitus.html
5•gregsadetsky•43m ago•2 comments

AI agents will do the grunt work of coding

https://www.axios.com/2025/05/20/ai-agents-software-programming-coding
1•ripe•45m ago•0 comments

Forensic crime scene reconstruction expert statement on MH370 footage

https://twitter.com/ScottRoderCSTM/status/1924202901850698131
2•jjoe•45m ago•0 comments

The Global Startup Ecosystem Index Report 2025

https://lp.startupblink.com/report-download/
1•myth_drannon•49m ago•0 comments

Unknown strain of bacteria found on China's Tiangong Space Station

https://www.livescience.com/space/space-exploration/unknown-strain-of-bacteria-found-on-chinas-tiangong-space-station
3•geox•50m ago•0 comments

These structures shrink when pulled

https://amolf.nl/news/these-structures-shrink-when-pulled
1•gnabgib•58m ago•0 comments