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