トップページの商品にカラースウォッチを表示させたい。

テーマはMOTIONを使用しています。
トップページには「NEW ITEM」と題して、コレクションページに紐づけた商品をグリッド表示させています。
商品名、価格は標準で表示していますが、商品ごとにカラースウォッチを表示させたいと考えています。商品ページへの表示はメタフィールドやコードの書き換えなどで実現できましたが、どうしてもコレクションページにつけることができませんでした。
そもそも可能なのかもわかっておりませんが、トップページに並んでいる商品にカラースウォッチを表示させる方法(コードや編集点など)をご教授いただけませんでしょうか。
またアプリなどで実現するしかないとなればアプリ導入も検討しております。
何卒宜しくお願い致します。

はじめまして
株式会社Tsunの吉谷と申します。

ShopifyテーマストアのMotionテーマのプレビューにて、TOPページやコレクションページでカラースウォッチが表示されているので、おそらく機能として存在すると思います。

下記のヘルプページなどが参考になるかもしれません。

もし、ヘルプページを見てもわからない場合は、Motionテーマの開発者へ直接問い合わせるのも良いと思います。

Shopifyテーマストア内の「サポートに連絡する」より問い合わせ可能です。

以上になります。

ご参考になりましたら幸いです。

早々にご返信いただきありがとうございます。
ヘルプページのご提示もありがとうございます。
参照させていただきます。

こんにちは。:raising_hands:

商品ページではカラースウォッチを表示できているものの、Motionテーマのホームページやコレクションページに表示する方法でお困りでしたら、Easify Custom Product Options を参考にしてみてはいかがでしょうか :blush:

私も以前、よく似たケースを設定したことがあります。Liquidの編集やメタフィールドの設定、テーマの product-card コードをカスタマイズする代わりに、Easify の Color Swatches 機能を利用して、商品一覧ページ上にカラーオプションを表示しました。

I’ve created a similar setup to help illustrate how it works.

  • This is the result:

  • This is the app setup:

Color Swatches または Image Swatches を作成した後、SettingsAdvanced Settings に移動し、Show options on Collection Page を有効にするだけです。これで、テーマのコードを編集することなく、ホームページやコレクションページの商品グリッド上にカラースウォッチを表示できるようになります。

この方法の便利な点は、お客様が商品ページを開かなくても、一覧ページ上で利用可能なカラーをすぐに確認できることです。特にカラーバリエーションや柄違いの商品が多い場合、より直感的なショッピング体験を提供できます。

さらに、スウォッチのデザインも自由にカスタマイズでき、実際のカラーコードを使用したり、カラーごとの画像を表示したりすることも可能ですので、ショップのデザインに合わせた見せ方ができます。

少しでも参考になれば幸いです :heart: