受注生産家具向けヘッドレスEC
膨大な構成オプション、ライブプレビュー、サーバー側価格強制を備えたShopifyベースの家具コンフィギュレーター。
課題
受注生産家具は選択肢の組み合わせが膨大で、Shopifyの標準バリアントでは実質的に管理できなかった。 ライブプレビューとリアルタイム価格を備えつつ、追加料金をクライアント側ではなくサーバー側で正しく強制する必要があった。
ソリューション
Hydrogen/Oxygenでヘッドレスストアフロントを構築し、生地や仕上げをShopify Metaobjectsで管理。選択構成をラインアイテムに保持し、Shopify Functionsでチェックアウト時の追加料金を強制した。
成果
バリアント爆発を避けながら本格的な家具コンフィギュレーターを実現し、注文を製造可能な仕様として工房へ引き継げるEC基盤を構築した。
チーム
Medium team, 10 weeks
ヘッドレスフロントエンド・Shopify Functions・設計・連携
役割
ヘッドレス構成、データモデル、Reactコンフィギュレーター、価格強制を担当。
Metaobjectでオプションを管理し、Reactで構成体験を作り、Shopify Functionsでチェックアウト時の価格を正本化しました。
技術スタック
StorefrontHydrogen / Remix / React / Oxygen
DataShopify Storefront API / Admin API
ModelShopify Metaobjects / Line-Item Properties
PricingShopify Functions / Cart Transform
PaymentsShopify Checkout / Shopify Payments
主要機能
01
受注生産向けコンフィギュレーター
02
Metaobject駆動の編集可能なオプション
03
Shopify Functionsによる追加料金の強制
04
Hydrogen/Oxygenによる高速な商品ページ
05
工房向けの完全な注文仕様引き継ぎ
注力した点
バリアント爆発を避けるデータ設計
多軸の構成オプションをMetaobjectとして扱い、商品バリアントを増やさずに編集可能な構成を実現しました。
価格をチェックアウト側で強制
追加料金をShopify Functionで適用し、ブラウザ側の計算に依存しない正しい課金を担保しました。