# バリアントピッカーをスクロールにする

**URL:** <https://community.shopify.com/t/topic/297805>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [February 20, 2024, 1:34pm UTC](https://community.shopify.com/t/topic/297805 "2024-02-20T13:34:46Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Prestigeテーマでバリアントピッカーやメタフィールドを使用したproduct variationsに10色以上を紐づけると、バリエーション（商品サムネイルやカラーピッカー）が2列や3列に折り返されてしまう問題について質問されています。

**解決策として提案された内容：**
- CSSの調整でスクロール形式に変更可能
- バリエーションを囲んでいるクラス（おそらくColorSwatchList）に以下のCSSを適用：
```css
.ColorSwatchList {
  white-space: nowrap;
  overflow: auto;
}
```

**現在の状況：**
質問者は「挿入するファイルは後尾に.cssがついているファイル」という説明が理解できず、コード追加の具体的な場所（カスタマイズ > テーマ設定 > カスタムCSS）について確認中です。回答者からの追加説明待ちの状態です。

<div class="post-metadata">

**Author:** ![umki](https://avatars.discourse-cdn.com/v4/letter/u/7cd45c/32.png) [@umki](https://community.shopify.com/u/umki)\
**Post date:** [February 20, 2024, 1:34pm UTC](https://community.shopify.com/t/topic/297805/1 "2024-02-20T13:34:46Z")

</div>

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

prestige テーマを使用しております。

表題の通り、バリアントピッカーやメタフィールドを使用したproduct variationsなどで10色（商品）以上を紐づけるとバリエーション（商品サムネイルやカラーピッカー）が折り返されて２列や３列になります。

スクロールタイプの表示にしてすっきりとさせたいですがテーマ内では難しいようです。

しかし当方、liquidやCSSなどに不慣れで初心者レベルです。

恐れ入りますが初心者でもわかりやすく解説してくださる方がいらっしゃいましたらご教示頂けますと幸いです。

（コードの挿入位置などもご指示いただけますと嬉しいです。）

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

---

<div class="post-metadata">

**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:** [February 28, 2024, 9:19am UTC](https://community.shopify.com/t/topic/297805/2 "2024-02-28T09:19:26Z")

</div>

Umki様

ご質問を確認いたしました。

以下の添付のようなイメージでしょうか？

 ![スクリーンショット 0006-02-28 18.13.04.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/3/83b83e9f2cf229b1a2ac27d30a4229a32793b117.png)

こちらcssの調整でスクロール形式にできます。

上記のバリエーションを囲んでいるクラス（おそらくColorSwatchList）に対して以下のcssを適用すると良いかと存じます。

```css
.ColorSwatchList {
white-space: nowrap;
overflow: auto;
}

```

挿入するファイルは後尾に.cssがついているファイルになります。

ご参考までに。

私たちの励みにもなりますので、  
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

---

<div class="post-metadata">

**Author:** ![umki](https://avatars.discourse-cdn.com/v4/letter/u/7cd45c/32.png) [@umki](https://community.shopify.com/u/umki)\
**Post date:** [March 5, 2024, 1:07am UTC](https://community.shopify.com/t/topic/297805/3 "2024-03-05T01:07:31Z")

</div>

ご回答ありがとうございます。  
恐れ入りますが、「挿入するファイルは後尾に.cssがついているファイルになります。」  
という部分がよくわかりません。

cssのコード追加をする場所は[テーマ] \>[カスタマイズ]\>[テーマ設定] \>[カスタムCSS]で認識あっておりますでしょうか？

（こちらにいただいたコードを追加、保存しましたが、スクロール形式にはなりませんでした）