Debutのカート追加ポップアップ表示の背景色変更

Topic summary

Shopify無料テーマ「Debut」のカスタマイズに関する技術的な質問と解決。

問題点:

  • カート追加時のポップアップ背景が透明で、ページコンテンツと重なり視認性が低い
  • ヘッダーを透過・固定するためのコード編集が原因と推測
  • ポップアップ背景を白色に変更したい

解決策:
フルバランスの渡邉氏が以下のCSSコードを提案:

.cart-popup-wrapper{
  background: #fff;
}

結果:

  • 提案されたCSSで問題が解決
  • 必要に応じて !important を追加することで、他の背景色設定を上書き可能

質問者は解決を確認し、親切な対応に感謝を表明。

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.

お世話になっております。

Shopify partnerのkitatemaと申します。

無料テーマDebutのデザイン修正を行っています。

現在商品をカートに追加したときに表示されるポップアップの背景色が透明になっており、ページと情報が重なりとても見づらい状況になっています。

ページ背景を透明色に設定し、ヘッダー透過・固定のためコード編集したことが原因と考えています。

以下編集したコード箇所です。(赤色で囲っている部分)

ヘッダーは透過したままで、カートのポップアップ表示の背景だけ白に設定することは可能でしょうか、、

お力を貸していただけますと幸いです。

よろしくお願いいたします。

Kitatemaさま

はじめまして、フルバランスの渡邉です。

ご質問を確認いたしました。

透過ヘッダーはスタイリッシュですが、いろんなところに影響出ると困りますよね。

ポップアップの背景は以下CSSで指定できるかと存じます。

.cart-popup-wrapper{
background: #fff;
}

もし上記でも他の背景色に上書きされてしまう場合は

background: #fff !important; と記入してみてください。

ご参考になりましたら幸いです。

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 渡邉

1 Like

株式会社フルバランス 渡邉さま

こちらのCSS指定で上手く反映することができました。

.cart-popup-wrapper{
background: #fff;
}

また代替え案など、ご親切なご対応に深く感謝いたします。

この度はありがとうございました、、!