# Dawn：購入ボタンの「カートに追加する」の背景色をカスタマイズしたい

**URL:** <https://community.shopify.com/t/dawn/266992>\
**Category:** 技術的なQ＆A\
**Created:** [November 9, 2023, 3:12pm UTC](https://community.shopify.com/t/dawn/266992 "2023-11-09T15:12:53Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品ページの「カートに追加する」ボタンの背景色をカスタマイズする方法についての質問です。

**解決方法：**
- カスタムCSSを使用することで変更可能
- テーマ設定のカスタムCSS欄にコードを追加

**具体的なコード例：**
```css
.product-form__submit {
  background-color: red;
  color: white;
}
```

**結果：**
質問者は提供されたカラーコードを使った方法で簡単に変更できたと報告し、問題は解決しました。スクリーンショット付きで設定場所も示されています。

<div class="post-metadata">

**Author:** ![Anonymous\_b1c43a040d0b5dd5b98c77b60b6ce128](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@Anonymous\_b1c43a040d0b5dd5b98c77b60b6ce128](https://community.shopify.com/u/Anonymous_b1c43a040d0b5dd5b98c77b60b6ce128)\
**Post date:** [November 9, 2023, 3:12pm UTC](https://community.shopify.com/t/dawn/266992/1 "2023-11-09T15:12:53Z")

</div>

商品ページにある、購入ボタンの「カートに追加する」の背景色のカスタマイズする方法はありますでしょうか？

ちなみに購入ボタンの「今すぐ購入する」のボタンはテーマ設定のアクセント1をカスタマイズすることで変更できました。

どなたかお分かりの方ご教授ください。

---

<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:** [November 9, 2023, 9:40pm UTC](https://community.shopify.com/t/dawn/266992/2 "2023-11-09T21:40:02Z")

</div>

はじめまして

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

カスタムCSSを利用することで、変更できるかと思います。

カスタムCSSの場所

 ![TsunShot 2023-11-10 at 06.36.48@2x.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/2/9/529e82dacbfbf86dfc2d3a9f3d75496fcf516c44.jpeg)

サンプルコード

```css
.product-form__submit {
  background-color: red;
  color: white;
}

```

サンプルコードでは背景色を赤、文字色を白に設定しています。

好きな色に変更してご利用ください！

以上になります。

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_b1c43a040d0b5dd5b98c77b60b6ce128](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@Anonymous\_b1c43a040d0b5dd5b98c77b60b6ce128](https://community.shopify.com/u/Anonymous_b1c43a040d0b5dd5b98c77b60b6ce128)\
**Post date:** [November 10, 2023, 6:50am UTC](https://community.shopify.com/t/dawn/266992/3 "2023-11-10T06:50:04Z")

</div>

カラーコードでの変更も簡単にできました！

ありがとうございました 😊