商品ページでバリエーション選択後、SKUごとに表示させる内容を切り替える方法について

[EBI20]

下記サイトのようにブランド・デバイス・カラーを選びSKUが確定すると、商品名・商品画像・価格・ページ下部のフリースペースの内容が切り替わります。

https://www.casetify.com/product/ripple-case#/16006157

これらはすべてのSKUが同一商品として登録されているが、選択したSKUごとに内容が切り替わるようなカスタマイズ・またはアプリを使用しているのでしょうか。

またこういったカスタマイズやアプリの導入には、SKUごとの内容の設定作業や、仕組みの構築にかなりの導入コストがかかるのでしょうか。

こういった商品ページの仕組みでECサイトを構築された経験のある方がいらっしゃれば、お教えいただけると嬉しいです。

[Qcoltd]

@EBI20 様

> こういった商品ページの仕組みでECサイトを構築された経験のある方がいらっしゃれば、お教えいただけると嬉しいです。

制作会社目線の回答になってしまい恐縮です。

下記は、Shopifyの無料テーマの1つであるDawnのデモサイトです。

https://theme-dawn-demo.myshopify.com/products/pleated-heel-mule

Dawnのデモサイトをご覧いただくとお分かりになる通り、

バリエーションを指定することで、

画像が切り替わっています。

商品価格も、商品編集画面でバリエーションごとに価格を変更すれば、

商品詳細ページでバリエーションを選択した際に、金額が自動的に変わります。

バリエーションごとに、商品名と、ページ下部のフリースペースを変更するには、

対応したアプリやDawn以外のテーマの導入を行っても良いですが、

Dawnのカスタマイズでもそこまで大きなコストにはならないはずです。

バリエーションのメタフィールドを利用しつつ、

DawnのJavaScriptに処理を組み込みつつ、

ご希望に沿うようにLiquid (HTML, CSS)をカスタマイズされれば比較的簡単に実現できるのではないかと思います。

> SKUごとの内容の設定作業や、仕組みの構築にかなりの導入コストがかかるのでしょうか。

具体的なコストは、商品数や、現行サイトの状態によりますので、提示するのが難しいですが、

カスタマイズの難易度はそこまで高くないので、

クラウドワークスなどでフリーランスの方などお探しいただくと、

コストを抑えることができるのではないかと思います。

ご参考まで。

(キュー田辺)