Skip to main content

概要

Upcart の節約額(savings)行には、適用された割引、コード、節約額に関する情報が表示されます。よりミニマルなレイアウトにしたい場合は、カスタム CSS を使用して要素を選択的に非表示にできます。 行全体を削除することも、割引額、コードバッジ、「Discount」という文言など、特定の要素だけを削除することもできます。

カスタム CSS エディタの場所

  1. Upcart > Cart Editor > Settings > Custom CSS に移動します
  2. 以下のコードスニペットを入力エリアに貼り付けます
  3. Save をクリックします
  4. ストアフロントを更新して、変更を実際に確認します

CSS の例

V1.0 で節約額の行全体を非表示にする

V2.0 で節約額の行全体を非表示にする

割引関連のすべてのコンテンツをカートドロワーから削除します。
V1.0 で割引額のみを非表示にする

V2.0 で割引額のみを非表示にする

割引ラベルやコードは表示したまま、節約額のみを非表示にします。
V1.0 で割引コードバッジを非表示にする
V2.0 で割引コードバッジを非表示にする
有効な割引コードを表示する視覚的なバッジを非表示にします。
V1.0 で節約額のラベルを非表示にする V1 のラベルには固有のクラスがないため、ルールを節約額の行にスコープします:
.UpcartDesignSettings__cartTextColor を単独で対象にしないでください。これはカートのテキスト色を制御するグローバルなユーティリティクラスで、ヘッダー、アナウンス、リワードバー、商品タイトル、レコメンデーションのタイトルなどに適用されています。これを非表示にすると、カートの大部分が空白になってしまいます。
ラベルのテキスト自体は Total discount savings text の翻訳設定で、デフォルトは「Discounts」です。非表示にする代わりに、そこで文言を変更することもできます。

V2.0 で「Discount」という文言を非表示にする

「Discount」という文言を使用する静的テキストを非表示にします。より正確にターゲットを絞るために、このセレクターを手動で調整するとよい場合があります。

重要な注意事項

要素、特に割引額を非表示にすると、プロモーションや節約額の視認性が低下する可能性があります。これらの変更を適用する前に、お客様の体験を考慮してください。

サポートが必要ですか?

高度なスタイリングやレイアウトの変更については、Shopify Expert との連携をおすすめします。Upcart のサポートチームは、カスタムコードの実装支援は行っていません。 Shopify Experts を見る