# トップページの商品にカラースウォッチを表示させたい。 **URL:** \ **Category:** 日本語\ **Created:** [April 17, 2026, 2:43am UTC](https://community.shopify.com/t/topic/608125 "2026-04-17T02:43:49Z")\ **Posts on this page:** 4\ **Page:** 1 ## AI-generated summary ShopifyのMotionテーマで、トップページの「NEW ITEM」商品グリッドに商品ごとのカラースウォッチを表示したいという相談です。商品ページではメタフィールドやコード編集で実現済みですが、コレクションページ／トップページの商品カードへの反映方法が不明という状況です。 回答では、Motionテーマの公式プレビューでトップページやコレクションページにカラースウォッチが表示されているため、テーマ標準機能として実現可能な可能性が高いと指摘されました。関連ヘルプとして「How do I set up color swatches?」や「Motion templates: Collection page」が案内され、必要ならテーマ開発元へサポート問い合わせする方法も示されています。 別案として、Easify Custom Product OptionsアプリのColor Swatches／Image Swatches機能を使い、Advanced Settingsで「Show options on Collection Page」を有効化すれば、コード編集なしで一覧ページに表示できるとの提案もありました。 最終的な実装結果はまだ報告されておらず、解決は未確定です。
**Author:** ![jaguar1](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jaguar1](https://community.shopify.com/u/jaguar1)\ **Post date:** [April 17, 2026, 2:43am UTC](https://community.shopify.com/t/topic/608125/1 "2026-04-17T02:43:49Z")
テーマはMOTIONを使用しています。 トップページには「NEW ITEM」と題して、コレクションページに紐づけた商品をグリッド表示させています。 商品名、価格は標準で表示していますが、商品ごとにカラースウォッチを表示させたいと考えています。商品ページへの表示はメタフィールドやコードの書き換えなどで実現できましたが、どうしてもコレクションページにつけることができませんでした。 そもそも可能なのかもわかっておりませんが、トップページに並んでいる商品にカラースウォッチを表示させる方法(コードや編集点など)をご教授いただけませんでしょうか。 またアプリなどで実現するしかないとなればアプリ導入も検討しております。 何卒宜しくお願い致します。 ---
**Author:** ![kyoshi\_Tsun](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/kyoshi_tsun/32/1503_2.png) [@kyoshi\_Tsun](https://community.shopify.com/u/kyoshi_Tsun)\ **Post date:** [April 17, 2026, 3:07am UTC](https://community.shopify.com/t/topic/608125/2 "2026-04-17T03:07:54Z")
はじめまして 株式会社Tsunの吉谷と申します。 ![TsunShot 2026-04-17 at 11.56.17@2x](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/d/4/3d4f89486a76862b1df0df02008431009d6e98f9.jpeg) Shopifyテーマストアの[Motionテーマ](https://themes.shopify.com/themes/motion/presets/motion?locale=ja)のプレビューにて、TOPページやコレクションページでカラースウォッチが表示されているので、おそらく機能として存在すると思います。 下記のヘルプページなどが参考になるかもしれません。 - [How do I set up color swatches?](https://help.archetypethemes.co/hc/en-us/articles/45004834394003-How-do-I-set-up-color-swatches) - [Motion templates: Collection page](https://help.archetypethemes.co/hc/en-us/articles/48395554695187-Motion-templates-Collection-page) もし、ヘルプページを見てもわからない場合は、Motionテーマの開発者へ直接問い合わせるのも良いと思います。 ![TsunShot 2026-04-17 at 12.03.35@2x](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/b/f/fbf136b0d1e29990198b122c9ea1ff067201036a.png) Shopifyテーマストア内の「サポートに連絡する」より問い合わせ可能です。 以上になります。 ご参考になりましたら幸いです。 ---
**Author:** ![jaguar1](https://avatars.discourse-cdn.com/v4/letter/j/b4bc9f/32.png) [@jaguar1](https://community.shopify.com/u/jaguar1)\ **Post date:** [April 17, 2026, 3:10am UTC](https://community.shopify.com/t/topic/608125/3 "2026-04-17T03:10:33Z")
早々にご返信いただきありがとうございます。 ヘルプページのご提示もありがとうございます。 参照させていただきます。 ---
**Author:** ![Easify-Ariel](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/easify-ariel/32/384261_2.png) [@Easify-Ariel](https://community.shopify.com/u/Easify-Ariel)\ **Post date:** [June 30, 2026, 7:18am UTC](https://community.shopify.com/t/topic/608125/4 "2026-06-30T07:18:12Z")
こんにちは。🙌 商品ページではカラースウォッチを表示できているものの、Motionテーマのホームページやコレクションページに表示する方法でお困りでしたら、[Easify Custom Product Options](https://apps.shopify.com/easify-product-options?utm_source=shopify+community&utm_medium=replies) を参考にしてみてはいかがでしょうか 😊 私も以前、よく似たケースを設定したことがあります。Liquidの編集やメタフィールドの設定、テーマの product-card コードをカスタマイズする代わりに、Easify の **Color Swatches** 機能を利用して、商品一覧ページ上にカラーオプションを表示しました。 I’ve created a similar setup to help illustrate how it works. - **This is the result:** ![image](https://canada1.discourse-cdn.com/shopifyforum/original/4X/d/0/7/d0753c5629cb27d822be1803eb4b2ea1b29a103a.png) - **This is the app setup:** ![image](https://canada1.discourse-cdn.com/shopifyforum/original/2X/5/5f3d9221a125e984a48d71a57228cd4284ee6b55.png) Color Swatches または Image Swatches を作成した後、 **Settings** → **Advanced Settings** に移動し、 **Show options on Collection Page** を有効にするだけです。これで、テーマのコードを編集することなく、ホームページやコレクションページの商品グリッド上にカラースウォッチを表示できるようになります。 ![image](https://canada1.discourse-cdn.com/shopifyforum/original/2X/b/b4153bfafc6c4bf99772be0a068d1b6939680254.png) この方法の便利な点は、お客様が商品ページを開かなくても、一覧ページ上で利用可能なカラーをすぐに確認できることです。特にカラーバリエーションや柄違いの商品が多い場合、より直感的なショッピング体験を提供できます。 さらに、スウォッチのデザインも自由にカスタマイズでき、実際のカラーコードを使用したり、カラーごとの画像を表示したりすることも可能ですので、ショップのデザインに合わせた見せ方ができます。 少しでも参考になれば幸いです ❤