# Variation pickerの各項目の文字を太字にしたいです｜カスタムCSS

**URL:** <https://community.shopify.com/t/variation-picker-css/319680>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [May 3, 2024, 2:16am UTC](https://community.shopify.com/t/variation-picker-css/319680 "2024-05-03T02:16:15Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマを使用したECサイトで、商品ページのvariation picker（バリエーション選択）の項目名を太字にする方法についての質問です。

**質問内容:**
- variation pickerの各項目の文字のみを太字にしたい
- カスタムCSSでどのようなコードを使用すればよいか
- 添付画像では赤枠で囲まれた部分を太字にする例を示している

**提供された解決策:**
株式会社Tsunの吉谷氏から以下のCSSコードが提案されました:
```css
.form__label {
  font-weight: bold;
}
```

**注意点:**
- Dawn 13.0.0で動作確認済み
- バージョンによっては太字にならない可能性がある
- カスタムCSSの箇所に追記することで実装可能

<div class="post-metadata">

**Author:** ![Anonymous\_b851dea0e4d9c9acb26871f225e4ef9c](https://avatars.discourse-cdn.com/v4/letter/a/b77776/32.png) [@Anonymous\_b851dea0e4d9c9acb26871f225e4ef9c](https://community.shopify.com/u/Anonymous_b851dea0e4d9c9acb26871f225e4ef9c)\
**Post date:** [May 3, 2024, 2:16am UTC](https://community.shopify.com/t/variation-picker-css/319680/1 "2024-05-03T02:16:15Z")

</div>

現在Dawnテーマを使用してECサイトの構築をしています。

商品ページのvariation pickerの各項目の文字を太字にしたいのですが、カスタムCSSにどんなコードを打ち込むと項目名のみ太字にすることができるでしょうか？

以下の画像はShopifyで作成した他社さんのサイトから引用したもので、こちらを例にした場合、赤枠で囲った部分を太字にしたいです。下の方に書かれる商品説明文などは太字にはしたくありません。

 ![スクリーンショット 2024-05-03 11.11.38.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/1/9/e/19e8ec58610cb0f290ccc147622597531a51fdda.png)

---

<div class="post-metadata">

**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:** [May 6, 2024, 9:50am UTC](https://community.shopify.com/t/variation-picker-css/319680/2 "2024-05-06T09:50:29Z")

</div>

はじめまして

株式会社Tsunの吉谷と申します。

**\>カスタムCSSにどんなコードを打ち込むと項目名のみ太字にすることができるでしょうか？**

添付画像のカスタムCSSの箇所に下記の[サンプルコード]を追記することで太字にできるかと存じます。

※ Dawn 13.0.0で試しているため、バージョンによっては太字にならない場合もあります。

[サンプルコード]

```css
.form__label{
  font-weight: bold;
}

```

[カスタムCSSの場所]

 ![TsunShot 2024-05-06 at 18.45.49@2x.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/4/14e867ce4a0993f54d6ae953d9c70c411efc6ccb.jpeg)

以上になります。

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