Shopifyでオンラインストアを運営していると、「購入ボタンの色をブランドカラーに合わせたい」「目立つ色にしてコンバージョンを上げたい」と思うことはありませんか？
本記事では、Shopifyの人気テーマ「Dawn」を使用している方向けに、購入ボタン（.product-form__submit）の色を変更する方法を、テンプレートファイルの編集を通して丁寧に解説します。
✅ 対象テーマと編集ファイル
- 使用テーマ：Dawn
- 編集対象：product.json または product.[作成したテンプレート名].json
Dawnテーマはセクションベースで構成されており、各ページのレイアウトは .json ファイルで管理されています。購入ボタンのスタイルを変更するには、該当するテンプレートファイルにCSSを追加する必要があります。
🛠 編集前の準備
まず、Shopifyの管理画面にログインし、以下の手順でコード編集画面を開きます。
1. テーマのコード編集画面を開く
- Shopify管理画面の左メニューから「オンラインストア」→「テーマ」を選択。
- 使用中のテーマ（Dawn）の「アクション」ボタンをクリック。
- 「コードを編集」を選択。
2. 該当テンプレートファイルを探す
左側のファイル一覧から、以下のいずれかを探します：
templates/product.jsontemplates/product.[任意のテンプレート名].json
※カスタムテンプレートを使用している場合は、テンプレート名が異なる場合があります。
🎨 購入ボタンの色を変更するコードの追加
テンプレートファイル内の "block_order" セクションを探してください。以下のような記述があるはずです：
“block_order”: [ “title”, “vendor”, “price”, “growave_loyalty_wishlist_block_product_earn_points_widget_VqqyTL”, “variant_picker”, “quantity_selector”, “buy_buttons”, “description”, “share”, “complementary_wfN6pr” ],
この記述の直後に、以下のコードを追加してください：
“custom_css”: [ “.product-form__submit {background-color: #FF5733; color: #FFFFFF;}” ],
🔍 解説
.product-form__submitは購入ボタンのクラス名です。background-colorに希望の背景色（例：#FF5733）を指定。colorに文字色（例：#FFFFFF）を指定。
色コードは HTMLカラーコード一覧 などを参考にすると便利です。
💡 注意点と補足
- 編集後は必ず「保存」ボタンを押してください。
- 変更が反映されない場合は、ブラウザのキャッシュをクリアするか、Shopifyのプレビュー画面で確認してください。
- 他のCSSと競合する場合は、
!importantを付けて強制的に適用することも可能です：
.product-form__submit { background-color: #FF5733 !important; color: #FFFFFF !important; }
✅ まとめ
購入ボタンの色を変更することで、ブランドイメージの統一やユーザーの視認性向上につながります。Dawnテーマでは、テンプレートファイルにCSSを追加することで簡単にカスタマイズが可能です。
ポイントのおさらい：
- Shopify管理画面からコード編集画面を開く
product.jsonまたはproduct.[テンプレート名].jsonを編集"block_order"の直後に"custom_css"を追加.product-form__submitに希望の色コードを指定
Shopifyのカスタマイズは、ちょっとした工夫でユーザー体験を大きく向上させることができます。今後もデザインや機能面での改善を積み重ねて、より魅力的なストアを目指しましょう。
コメント