ShopifyのカスタムCSSは、テーマ設定だけでは足りない見た目の調整に使います。テーマ全体へ適用するか、特定のセクションへ限定するかを先に決めると、別の画面まで変えてしまう問題を減らせます。CSSとHTMLの基本を確認したうえで、変更前の状態を残して作業してください。
テーマ全体とセクション単位を使い分ける
すべての商品説明に同じ余白を設けるような共通変更と、特定ページの一部分だけを調整する変更は分けて考えます。設定画面に目的の項目があれば、まずその設定で実現できるかを確認してください。CSSで上書きした値は、テーマ設定を後で変えても意図した表示にならない原因になります。
カスタムCSSはチェックアウトページには対応していません。購入画面を変えたい場合は、テーマのCSS欄へ追加するのではなく、チェックアウトの設定と対応する拡張方法を確認します。
文字数と記述方法の制限を確認する
公式案内では、テーマ全体のカスタムCSSは1,500文字、特定セクションは500文字までです。また、使えない規則やプロパティがあります。保存できない場合は、文法だけでなく、その入力欄で利用できる機能かを確認してください。
長くなったCSSを無理に別の欄へ分散させると、どこが効いているか分かりにくくなります。共通化する変更なのか、テーマの設定や構成を見直すべきかを判断し、必要であればテーマの実装担当へ相談します。
追加前から公開後までの手順
- 変更前を保全：テーマのコピーと現在のCSS、対象画面を保存します。
- 対象を特定：ブラウザーの開発者ツールで、変えたい要素と適用されているスタイルを確認します。
- 範囲を選択：テーマ設定のカスタムCSSか、対象セクションのカスタムCSSかを選びます。
- 少量ずつ追加：一つの目的ごとに追記し、プレビューを確認します。
- 関連画面を確認：同じ部品がある別ページや、スマートフォンの表示も調べます。
- 記録して公開：追加したコード、理由、確認条件を残し、通常の公開URLでも確認します。
クラス名を確認してから記述例を使う
次は、説明文に使う要素へao-product-noteというクラスが付いている場合だけを想定した学習用の例です。既存テーマにこのクラスがあるという意味ではありません。HTMLの対象を確認せず貼り付けても、表示は変わりません。
.ao-product-note {
line-height: 1.8;
margin-top: 1rem;
}テーマごとにHTMLとクラス名は異なります。ネット上の例にあるボタンのクラス名が、自分のテーマでも同じとは限りません。広い範囲に効く指定や!importantを重ねる前に、どの規則が適用されているかを確認します。
表示が想定と違うときの確認表
- 編集したテーマと確認中のテーマが同じか
- 対象要素に指定したクラスや構造があるか
- テーマ全体とセクションのどちらに追加したか
- 別のCSSが同じ値を上書きしていないか
- 画面幅による条件や、テーマ更新の影響がないか
- 保存と再読み込み後も同じ状態になるか
コードを削除しても表示が戻らない場合は、別の入力欄やテーマ設定も変更していないか、記録と照合します。一度に複数箇所を変えず、確認できた原因に絞って修正します。
よくある質問
CSSだけで商品説明の文章も追加できますか？
伝える内容は、適切な本文やテーマの入力項目へ保存します。見た目の調整と情報の管理を分け、CSSで重要な説明を補う設計にしないようにします。
テーマ更新後も同じように動きますか？
HTMLやクラス名の変更で効かなくなる場合があります。更新前後で対象ページと実際の操作を確認し、カスタムCSSの目的を記録しておきます。
どの画面まで確認すればよいですか？
変更した画面だけでなく、同じ要素がある商品・一覧・記事などを確認します。対象の端末や文字量によって表示が変わる条件も含めてください。
公式資料
公式情報の確認日：2026年10月20日。確認表と進め方はAO編集の実務向け整理です。
関連記事・ご相談
対象ストア、テーマ名、変更したい画面、利用アプリをお知らせください。作業範囲と確認方法を整理します。Shopifyの改善を相談する
コメント