Storefront Web Components
既存のWebサイトにShopifyの商品表示・カート・ログインをHTMLだけで埋め込める
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、既存のWebサイトにShopifyの商品・カート・ログインをHTMLだけで埋め込めるようになります。
受託では「本店はテーマ、コーポレートサイトにも商品を並べたい」という要件に、ヘッドレスより軽い案として最初に検討します。
Storefront Web Componentsとは
CDNのスクリプト1本と公開トークンで動く、HTML用の部品です。<shopify-store>の中に<shopify-context> <shopify-data> <shopify-money> <shopify-media> <shopify-cart>を置くだけで、商品とカートが動きます。
GraphQLもフレームワークも書かなくてよいので、「ヘッドレスの軽量版」と考えると分かりやすいです。
どこで使うか
コーポレートサイトやLP（静的サイト・他CMS）に商品を並べ、Shopifyのチェックアウトへ送る構成で使います。
「本店はテーマ、別サイトにも商品を出したい」という受託の要件に、最短で応えられます。
スタイリングは通常のCSSで、テンプレート内のマークアップを自由に装飾できます。
テーマの制約は受けません。
できないこと
描画はブラウザ側（クライアントレンダリング）です。
そのため、商品ページのSEOを担わせてはいけません。
商品詳細はShopify本体かHydrogenに置き、埋め込み先は導線として使います。
発展：<shopify-account>でログインも埋め込める
2026年2月から、パスワードレスのサインインとアカウントメニューを埋め込み先で提供できます。
ログイン体験まで、Shopifyに寄せられます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。