前置き

以下の構成で検証を進めています。

• ECカート：Shopify Storefront Web Components
• フレームワーク：Astro
• 記事管理：microCMS

調査の背景

2025年の夏に発表されたShopify Storefront Web Componentsを活用すると、Shopify以外のサイトにも手軽にEC機能を組み込めるようになります。

仕組みとしてはヘッドレスCMSに近いですが、従来のようにAPIを直接叩いて独自ロジックを組む必要がありません。コンポーネントを配置するだけで、複雑なAPI処理を意識せずにEC機能を導入できる点が大きな特徴です。

記事執筆時点ではまだ未知の部分もありますが、たとえばWordPressで管理している記事コンテンツを組み合わせるなど、今後の外部連携で活用できる可能性を感じており、検証を進めています。

※ページルーティングなどの大枠実装はすでに完了しています。

今週の調査内容

Shopify商品ページ：リッチエディタ（説明フィールド）のHTML取得方法

Storefront Web Componentsの機能としてはプレーンテキストしか取得できず、見出しも含めて全てテキストとして描画されてしまいました。

対応策として、リッチエディタの内容を、Storefront API経由で取得して対応しました。

商品ページの画像表示機能確認

シンプルな単一画像は、Storefront Web Componentsのshopify-mediaコンポーネントで簡単に取得できました。

また、バリエーション切り替え時の画像連動も、ドキュメントにある selectedOrFirstAvailableVariantをクエリに渡すだけで基本機能として実現できることが分かりました。

<shopify-media query="product.selectedOrFirstAvailableVariant.image"></shopify-media>

サムネイルギャラリーなどのその他の画像一覧も、表示だけなら標準機能で取得・表示できました。

<shopify-list-context 
　type="image"
　query="product.selectedOrFirstAvailableVariant.product.images" first="10">
<template>
　<!-- サムネイル -->
　<shopify-media
　　width="600"
　　height="600"
　　query="image"
　　class="product-page__thumb cursor-pointer"
　></shopify-media>
</template>
</shopify-list-context>

ただし、サムネイルをクリックしてメイン画像を切り替えるといった動作は、独自のロジックを実装する必要がありました。

次回の展望

• コレクション関連：ページルーティングを掘り下げ、Shopify Storefront Web Components での実装パターンと挙動を確認します。
• アカウント関連：コンポーネントベースでどのように動作するかを検証します。