# カラースウォッチの設定

**学べること**

* 商品カテゴリーを割り当てる方法
* Shopifyのカテゴリーメタフィールドを使用してカラースウォッチを適用する方法
* テーマの商品のバリアントにカラーメタフィールドを接続する方法

<figure><img src="/files/81c46e0fb8c362f4775db507c3db7203b652146d" alt=""><figcaption></figcaption></figure>

### 1. テーマエディタで商品ページを開く

* Shopify管理画面で、次に移動します **オンラインストア > テーマ**、次にクリックします **テキストの** ライブテーマの上で。
* 商品ページに移動します。
* 左パネルの **商品バリアント** の中のブロック **製品セクション**.
* の下で **バリアントスタイル**、選択します **カラースウォッチ**.

> 💡 ヒント: プレビューネームセレクタを使って複数のカラーバリアントがある商品を読み込んでください。

<figure><img src="/files/be2deb51ca42443616abe1448042d46211955a8c" alt=""><figcaption></figcaption></figure>

### 2. Shopify管理画面でカテゴリを割り当てる

* 移動先： **製品** Shopify管理画面で。
* 編集したい商品をクリックします。
* までスクロールします **カテゴリー** セクションで適切なオプションに割り当てます（例： **アパレル＆アクセサリー**).

<figure><img src="/files/c6fc4e327cd2ad66c33eb98fffdff155a1512117" alt=""><figcaption></figcaption></figure>

### 3. カテゴリメタフィールドにカラー値を追加する

* カテゴリを割り当てた後、下にスクロールして **カテゴリメタフィールド**.
* 今、そのカテゴリ（例：「色」）に固有のオプションが表示されます。
* の中をクリックします **カラー** フィールドに入り、リストから選択するか、次を選択します **新しい項目を追加** を選んでカスタムカラーを入力します。

<figure><img src="/files/4a0635723fbd8806d96d10d5f7ce8b3d11cc2247" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/ed96e4b90ef51e6768aa620b39835eafe659f190" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cb1f224adebcfd5be6e3c815cd3635d2c416476d" alt=""><figcaption></figcaption></figure>

### 4. カラーメタフィールドをバリアントブロックにリンクする

* テーマエディタに戻り、再度 **商品バリアント** ブロックをクリックします。
* ファイルブラウザで次のファイルを見つけます： **カラーバリアント** を選択してから **動的ソースアイコンをクリックします** （重なった円のアイコン）。
* ドロップダウンから追加したカラーメタフィールドを選択します。

<figure><img src="/files/0d9793d558fb301f6529b0e266dba7b5d45f65ea" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/41f39e3f139e25cd6887a661807fc73ecbac756c" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2a98a2dfea7a50d6a9570f37775981f5ee04b033" alt=""><figcaption></figcaption></figure>

### 5. 変更を保存する

* クリック： **完了** してから **保存** テーマエディタの右上で。

***

✅ 追加したメタフィールドの値に基づいて、クリック可能なカラースウォッチが商品に表示されるようになります。

> ⚠️ 警告: カラースウォッチは、商品に **「Color」という名前のバリアントオプションが** あり、それが対応するメタフィールドと一致している場合にのみ表示されます。

<figure><img src="/files/81c46e0fb8c362f4775db507c3db7203b652146d" alt=""><figcaption></figcaption></figure>

### **ヘルプが必要ですか？**

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/advanced/setting-up-color-swatches.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
