# Buybuttonのバリエーションフォントについて

**URL:** <https://community.shopify.com/t/buybutton/132526>\
**Category:** 技術的なQ＆A\
**Created:** [July 4, 2022, 12:38am UTC](https://community.shopify.com/t/buybutton/132526 "2022-07-04T00:38:50Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

- 主題: WordPressに埋め込んだShopifyのBuy Buttonで、商品バリエーション名と選択肢（プルダウン）のフォントを変更したい。
- 技術的背景: Buy ButtonはShopifyの埋め込み購入ボタン。バリエーションはサイズや色などの商品オプション、プルダウンはその選択UI。
- 対応策: buy-button-js公式ドキュメントを参照し、生成コード内の"option": {}を"option": { styles: { label: {...}, select: {...} } }へ変更。label（バリエーション名）とselect（セレクトボックス）にcolorやfont-sizeを指定してフォント色・サイズを調整可能。提示されたコードスニペットが中心的な解決手段。
- 結果・ステータス: 提示コードで修正に成功。具体的な変更点が共有され、スレッドは解決済みで未解決の課題はなし。

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [July 4, 2022, 12:38am UTC](https://community.shopify.com/t/buybutton/132526/1 "2022-07-04T00:38:50Z")

</div>

現在、Buybuttonで作成したコードをWordpressに埋め込んでECサイトを運用しています。

Buybuttonのボタン自体のフォントはコード生成段階で指定ができるのですが、バリエーションの名前と選択肢（プルダウン）のフォントが修正できません。こちらを変更することは可能でしょうか？

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 5, 2022, 11:50am UTC](https://community.shopify.com/t/buybutton/132526/2 "2022-07-05T11:50:19Z")

</div>

こちらのページにBuy Butoonの詳しいカスタマイズ方法が記載されています。

[https://shopify.github.io/buy-button-js/](https://shopify.github.io/buy-button-js/)

簡単にご説明しますと、

質問者様が変更したいと考えていらっしゃる場所を私が勘違いしていなければ、

下記のようなコードになるはずです。

**カスタマイズ状況によって異なりますが、元々のBuy Buttonのコードの下部。**

```javascript
"option": {},
  "cart": {
    "text": {
      "total": "Subtotal",
      "button": "Checkout"
    }
  },
  "toggle": {}
},
      });
    });
  }
})();
/*]]>*/

```

**上記の最初の行にある “option”: {}, を下記のように変更します。**

```javascript
"option": {
      "styles": {
        "label": { // バリエーションの名前のフォントサイズ
          "color": "#0f0", //お好きな文字色を設定してください
          "font-size": "30px", //お好きなフォントサイズを設定してください
        },
        "select": { // セレクトボックスのフォント調整
          "color": "#f00", //お好きな文字色を設定してください
          "font-size": "10px", //お好きなフォントサイズを設定してください
        }
      }
    },

```

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [July 6, 2022, 12:29am UTC](https://community.shopify.com/t/buybutton/132526/3 "2022-07-06T00:29:39Z")

</div>

ご教示いただいたコードで修正することができました！

不足した情報の中から要望を汲み取って下さり本当にありがとうございます。