Shopifyの新機能「Storefront Web Components」について、実際にモックアップを作成してみました。個人的に外部サイトとの連携に活用できそうだったため、今回はその可能性を検証しています。

Shopify Storefront Web Componentsとは？

Storefront Web Componentsは、既存のWebサイトなどにShopifyのコマース機能を手軽に組み込めるWebコンポーネント群です。数行のHTMLを埋め込むだけで、商品表示やコレクション一覧、チェックアウト機能を外部サイトに導入できます。

公式ドキュメントでは、以下のように説明されています。

Storefront Web コンポーネントは、Shopify の Storefront API のクエリの複雑さを処理する HTML コンポーネントのセットであり、複雑な JavaScript コードを記述することなく、Web サイトに製品、コレクション、ショッピング カート機能を表示できます。

<shopify-store>およびコンポーネントをマークアップに追加して<shopify-context>属性を構成すると、ストアのデータにアクセスし、CSS または HTML を使用してスタイルを設定し、カスタマイズされたショッピング エクスペリエンスを作成できます。

Storefront Web コンポーネントは、既存のコンテンツ内に製品やコレクションを埋め込むことから、サイトの新しいページを構築することまで、幅広いユースケースに対応するように構築されています。

引用元：Shopify開発者向けドキュメント

実装の目標：外部サイトでのShopify機能統合

今回の実装目標は、Shopify以外の別サイトに対して、Shopifyの商品情報、決済機能、URLルーティングを機能させるサイトを構築することでした。

背景：外部サイト連携の課題

個人的な悩みですが、Shopify の商品情報や決済機能はそのまま活かしつつ、別の CMS で管理している記事コンテンツと統合できないかと常々考えていました。

例えば、WordPress のコンテンツ管理を使いながら、Shopify の商品情報や決済機能をシームレスに組み込みたいというニーズに対し、明確な解決策を模索していたのです。決定打となる方法はまだ見つかっていませんが、Storefront Web Components がその一つの回答になるのではないかと考え、今回の検証に至りました。

実装プロセス：静的HTMLからAstroへの移行

初期の試行：静的HTML実装

当初は単純にHTMLファイルにコンポーネントを組み込んで動作させました。しかし、商品一覧から詳細への遷移がSPAのような挙動になってしまい、URLが生成されない問題が発生しました。

解決策：Astroの動的ルーティング活用

検討した結果、Astroの動的ルーティング機能を利用すれば、コンポーネントから取得したハンドル情報をもとにURLを生成できると判断し、Astroで実装を試行しました。

実装結果と技術的な知見

絞り込み機能などliquidで実装できる全ての機能を検証しているわけではないため、今後検証が必要な項目がありますが、「商品一覧 → 詳細ページ → チェックアウト」までの導線は問題なく構築できました。

バリエーション選択と在庫管理

バリエーション選択はコンポーネントの標準機能でそのまま取得可能です。売り切れ情報については、DOM上にradio-disabledのようなクラス名が自動付与されるため、フロントエンド側で調整できます。

Shadow DOMによるスタイリング

一部の要素はShadow DOMで出力されるため、shopify-variant-selector::part(radio)のような疑似要素セレクタを使ったスタイリングが必要になるケースもありました。

メタフィールドに関して

メタフィールド（シンプルな１行テキストフィールド：テキストラベル）を試してみたところ、

単一の値はそのまま表示できる一方、
値のリストの場合、そのまま表示すると配列データ ["ラベル1","ラベル2"] で描画されるため、

• shopify-attr--…でJSON配列を属性に受け渡し、
• カスタムWeb Component内でJSON.parse→mapして要素化し、
• attributeChangedCallbackなどで非同期バインドを待ってから描画

するといったひと手間が必要でした。

個人的に確認した範囲ですが、メタオブジェクト版でも同じように、工夫して専用のロジックを用意する必要がありそうです。

開発ストアでの注意点

開発ストアの場合は、public-access-tokenを設定しないとエラーが発生して表示できないことも確認しました。開発時は、この設定が必須となります。

まとめ：外部サイト統合の新たな可能性

Storefront Web Components を使えば、複雑な Storefront API 呼び出しを意識せず、HTML タグを埋め込むだけで外部サイトに Shopify 機能を統合できます。

正直、現時点では未知数な部分もありますが、今後の外部連携において十分に活用できる可能性を感じるため、この機能は引き続き注目していきたいと思います。