# カラーパレットの実装方法 **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css\ **Created:** [June 5, 2023, 1:33pm UTC](https://community.shopify.com/t/topic/221900 "2023-06-05T13:33:11Z")\ **Posts on this page:** 2\ **Page:** 1 ## AI-generated summary メタフィールドとLiquidコードを使用したカラーパレット（カラースウォッチ）の実装方法についての質問と回答。 **実装手順:** 1. **メタフィールド定義の作成** - Shopify管理画面 → 設定 → カスタムデータ → 商品 - 「定義を追加」で名前・説明を入力 - ネームスペースとキー: `global.key` - フィールドタイプ: `text`を選択 2. **メタフィールド値の設定** - 商品ページでメタフィールド入力欄に値を設定 3. **Liquidテンプレート編集** - 商品ページのLiquidテンプレートにコードを追加 - `{% if product.metafields.global.color %}` でカラー値を表示 回答者は、メタフィールドで設定したカラーを表示する方法として、具体的な手順とコードスニペットを提供しています。
**Author:** ![mira0](https://avatars.discourse-cdn.com/v4/letter/m/e68b1a/32.png) [@mira0](https://community.shopify.com/u/mira0)\ **Post date:** [June 5, 2023, 1:33pm UTC](https://community.shopify.com/t/topic/221900/1 "2023-06-05T13:33:11Z")
カラーパレット、カラースウォッチをメタフィールドとliquidコードの編集などで実装したいです。 実装方法を教えていただきたいです。 テーマはDawnになります。 ---
**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\ **Post date:** [June 6, 2023, 8:57am UTC](https://community.shopify.com/t/topic/221900/2 "2023-06-06T08:57:54Z")
お世話になっております。 メタフィールドで設定したカラーを表示するという認識でよろしいでしょうか？ 1. メタフィールドの定義の作成 ・Shopifyの管理画面に移動します。 ・左側のメニューから「設定」を選択します。 ・「カスタムデータ」を選択します。 ・「商品」をクリックします。 ・「定義を追加する」をクリックします。 ・名前」と「説明」を入力します。（なんでもOKです） ・「ネームスペースとキー」に「global.key」と入力します。 ・「フィールドタイプ」は「text」を選択します。 ・「保存」をクリックします。 1. メタフィールドの値の設定 ・商品ページに移動します。 ・編集したい商品を選択します。 ・商品詳細ページの最下部に先程作成したメタフィールドの入力欄があるので、ここに値を入力します。 ・「保存」をクリックします。 3. Liquidテンプレートの編集 最後に、商品ページのLiquidテンプレートを編集して、カラーメタフィールドの値を表示します。 ```markup {% if product.metafields.global.color %} {% endif %} ``` なにかヒントになれば幸いです。 私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。