Shopifyのボタンの色や余白を変える場合は、先にテーマの設定で変更できるかを確認します。CSSを追加するときも、特定のクラスがすべてのテーマに共通とは限りません。対象のボタンを調べ、複製テーマで表示と購入操作を確かめてから公開しましょう。
変更するボタンと状態を決める
商品ページの購入ボタン、カートのボタン、通常のリンクなど、対象を一つ選びます。通常、マウスを乗せたとき、キーボードで選んだとき、売り切れ等で無効になったときを確認してください。目立つ色にすることだけを目的にせず、文字の読みやすさと操作できる状態が分かるかを基準にします。
実際の要素とクラスを調べる
複製テーマのプレビューを開き、ブラウザの検証機能で対象要素を確認します。例示するao-product-buttonは自店に存在する共通クラスではありません。対象の要素を限定できる、実際に確認したクラスへ置き換えて使います。クラス属性に複数の名前がある場合も、他のボタンまでまとめて変わらない指定を選んでください。
色と余白を変える例を読む
次は例示クラスの、無効ではないボタンだけに適用するCSSです。背景、文字、内側余白、角の丸みとホバー時の背景を指定します。.ao-product-button:not(:disabled) { background-color: #111111; color: #ffffff; padding: 0.9em 1.2em; border-radius: 0.3em; }
.ao-product-button:not(:disabled):hover { background-color: #333333; } CSS自体の検証は済んでいますが、自店のテーマの外観や操作を検証した例ではありません。既存の枠線や疑似要素等で見た目が異なる場合は、元の指定を調べて調整してください。
追加場所と適用範囲を合わせる
テーマ設定のカスタムCSSは広い範囲に影響し、セクション内のカスタムCSSはその範囲に限定されます。チェックアウト画面にはこの機能は適用されません。テーマ全体は1,500文字、セクションは500文字などの制限が公式に案内されているため、入力場所と条件を確認します。例の指定を何か所にも重ねて追加しないようにしてください。
効かない場合は優先順位を調べる
変更が見えないときは、対象クラス、入力場所、読まれるCSS、既存の指定を順に確認します。最初から!importantを付けて上書きすると、テーマ設定や無効状態との関係が分かりにくくなります。購入ボタンの有効・無効を示す属性や、既存のフォーカス表示を削除して、色だけで操作状態を表現しないようにしましょう。
表示だけでなく購入操作も試す
スマートフォンとパソコンで、長いボタン文言、在庫切れ、商品選択、キーボード操作、カート追加を確認します。文字が切れる固定高さや、押せない箇所がないかを見てください。追加したCSSを削除すれば戻せるよう記録し、問題があれば公開前に戻します。色の変更だけでクリック率や売上が改善すると保証するものではありません。
導入前の確認事項
- 対象クラスを実際の要素で確認した
- 通常・無効・ホバー・フォーカスを確認した
- チェックアウト等の適用範囲を区別した
- 端末幅とカート操作を試した
公式資料・関連記事
関連記事：Shopifyコードエディタの開き方とファイルの探し方、Shopifyの文字CSS調整｜太さ・行間・文字間隔、Shopifyテーマの構造｜Liquid・HTML・CSS・JS。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント