Skip to main content

​
概要

このセクションでは、既存のカート要素の見た目や雰囲気を変更したり、エディターで追加したカスタムHTMLにスタイルを適用したりできます。

​
場所

次の場所に移動します:
Upcart > Cart Editor > Settings > Custom CSS
Settingsはタブの列になっており、Custom CSSはCustom HTMLと並ぶタブの1つです。表示されていない場合は、More settings の中にあります。

​
仕組み

CSSを追加して次のことができます:
  • デフォルトのカート要素にスタイルを適用する
  • カスタムHTMLの外観を変更する
  • 余白、配置、タイポグラフィなどを調整する
入力すると、オートコンプリートのポップアップが有効なUpcartセレクターを提案し、編集をスピードアップします。提案を選択するとルールが自動補完され、コードの構造化に役立ちます。変更が期待どおりに表示されない場合は、ブラウザとUpcartエディターの両方でキャッシュを更新する、CSSの配置場所を確認する、CSSルールの詳細度が適切であることを確認するなど、一般的なトラブルシューティングの提案を確認してください。

​
セレクターの使用

Upcartは幅広いカスタムセレクターを提供しています。**「Show list」**をクリックすると、利用可能なすべてのオプションが表示されます。ストアフロントへの意図しない変更を防ぐため、.upcart-cart でスコープしない限り、body、div、h3 などのグローバルセレクターの使用は避けてください。スタイルが正しく適用されない状況では、CSSの詳細度を上げるか、CSSルールに !important を追加することを検討してください。そうすることで、競合するスタイルを確実に上書きできます。例:
例（安全なセレクター）:

​
例: お礼メッセージのスタイル設定

チェックアウトボタンの下に次のカスタムHTMLを追加したとします:
CSSがないと、このメッセージは素っ気なく見えます。スタイルを適用するには:

​
よくある問題と解決策

​
モバイルデバイスでCSSが表示されない

カスタムテキストやスタイルがモバイルで表示されない場合:
  • キャッシュされたバージョンをクリアするため、Upcart Editor とモバイルブラウザの両方でページを更新します。
  • 最新の公開済みカートバージョンがアクティブであることを確認します。
  • CSSが Upcart > Cart Editor > Settings の Custom CSS タブに保存されていることを確認します。

​
エディターとライブストアの不一致

エディターでは正しく表示されるのにライブサイトで表示されないスタイルは、セレクターの詳細度を上げるか、主要なルールに !important を追加する必要があるかもしれません。

​
CSSセレクターの誤った使用

正しいクラスまたはIDがターゲットになっていることを確認してください。意図しない結果を避けるため、Upcart固有の要素には常に .upcart- などのプレフィックスを含めてください。スタイルが期待どおりに適用されない場合は、セレクター .thank-you-message が意図したHTML要素を正確にターゲットにしていることを確認し、CSSコードが正しいタブ（Upcart > Cart Editor > Settings > Custom CSS）に配置されていることを確認してください。
カスタマイズのサポートについて: Upcartサポートは、カスタムCSSの実装やデバッグを支援することはできません。高度なスタイル設定のサポートについては、Shopify Expertとの協力をおすすめします。カスタムCSSのトラブルシューティングについては、モバイルデバイスでスタイルが表示されない、エディターのプレビューとライブのストアフロントの不一致、セレクターの配置ミスなどの問題を解決するためのガイダンスとして、よくある問題のセクションを参照してください。