商品ページについて

Topic summary

商品ページでカラーバリエーションをクリックすると、そのカラーの専用ページに遷移する機能の実装方法についての質問です。

提案された解決策:

  • テーマ変更: 参考サイトはImpulseテーマを使用しており、この機能が標準実装されているため、テーマ自体を変更するのが最も簡単な方法。

  • アプリ利用: コードカスタマイズに慣れていない場合は、Variant Swatch Kingなどのアプリの利用を推奨。

  • コードカスタマイズ: テーマ変更が不可能な場合、カスタムコードでの実装も可能だが、コード量が多くなる。

デモサイトや参考URLが提示され、具体的な実装イメージが共有されています。質問者のスキルレベルや制約条件に応じて、複数の選択肢が提案されている状況です。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

お世話になっております。

添付URLのように

商品カラーを押すと

その商品のカラーのページに飛べる設定を

考えているのですが、どのように実装すればいいかわかりません。

アプリorカスタマイズでできるのであればご教示いただきたく存じます。

よろしくお願いいたします。

https://nairo.jp/products/msk2211204?variant=43667204866270

参考サイト様は下記のテーマを使用されているようです。

https://archetypethemes.co/products/shopify-theme-impulse

デモサイトを拝見しますと、

https://themes.shopify.com/themes/impulse/styles/modern/preview

質問者様のご希望の機能が元々実装されているように見えますので、

テーマ自体を変更可能であれば、

こちらのテーマに変えてしまうのが良いかもしれません。

テーマが変更できない場合、

コードカスタマイズでも対応可能ですが、

かなりコードが長くなりますので、

コードカスタマイズに慣れていらっしゃらない場合はアプリ利用がおすすめです。

例えば、こちらのアプリなどいかがでしょうか?

https://apps.shopify.com/variant-swatch-king?locale=ja

デモサイト: https://demo.starapps.studio/products/beige-basketweave-bucket-shoulder-bag

ご参考まで。

(キュー田辺)