.upcart-cart と .upcart-cart-body はモジュールではなくドロワーのシェルに付いているため、V2 でも引き続き適用されます。ドロワー全体を対象とするレイアウト修正(幅の制限、水平方向のオーバーフローの防止)は、アップグレード後も機能し続けます。
概要
注
Upcart CSS セレクターの使い方
- 要素の非表示や再スタイリング
- 余白、フォント、色の変更
- ストアのブランディングに合わせたレイアウトの調整
CSS を追加する前に知っておくべきこと
CSS カスタマイズのチェックリスト:
- 安全な環境でテストする: 本番公開する前に、可能であればプレビューまたは未公開のテーマを使用してください。
- 小さく始める: 一度に 1 つの変更を行うことで、何がうまくいったか(あるいはいかなかったか)を追跡しやすくなります。
- 正しい場所にスタイルを貼り付ける: コードの追加には Upcart Editor > Settings > Custom CSS フィールドを使用してください。
- 検証ツールを使う: ブラウザで要素を右クリックして検証を選択し、セレクターをその場で見つけてテストします。
- 思い込みを避ける: すべての要素がすべてのカートに表示されるわけではありません。さまざまなカート(リワードあり/なし、アップセルあり/なしなど)でテストしてください。
CSS セレクターライブラリ
一般設定
デザインモジュール
ヘッダーモジュール
ボディ設定
アナウンスメントモジュール
リワードモジュール
レコメンデーションモジュール
サブスクリプションアップグレードモジュール
アップセルモジュール
商品設定
アドオンモジュール
ディスカウントコードモジュール
節約額の行
エクスプレス決済モジュール
注
トラストバッジモジュール
追加メモモジュール
Upcart 設定モジュール
スケルトンセレクター
はじめるのに役立つリソース:
- カスタム CSS 入門: Upcart でカスタム CSS を安全に追加する方法を学びます。
- Upcart のカスタマイズ入門: カスタマイズの仕組みと、どこから始めるべきかを理解します。
- AI を使って Upcart 用のカスタムコードを書く: シンプルなプロンプトで CSS や JavaScript の作成を支援します。
- カートのコンバージョンを高めるベストプラクティス: 実証済みのヒントでカートデザインを最適化します。