CSSを使用してポップアップをカスタマイズする方法

カスタムCSSを使用すると、ポップアップ内のほぼすべての要素を変更することができます。ただし、そのためにはCSSの基本的な理解が必要です。CSSを始めるには、W3Schools CSS tutorial を読むことをお勧めします。

CSSコードを調整するには、トップメニューのCustomize pop-up に行き、Advanced Customization のセクションを見つけます。

下の例では、フォントサイズを大きくし、すべてのボタンの色を変更しています。

以下に、簡単に始められるカスタムCSSコードをいくつか紹介します。

ボタンの追加と背景色ホバー時のボタンの追加:

.Button-Add{   background-color: #2dd262 !important; /* button color */   border-color: #8f9396 !important; /* border color */   color: white !important; /* font color */   font-size: 16px !important; /* font size */}.Button-Add:not([disabled]):hover {    background-color: #059e36 !important; /* button color when hover over */}

Continue to Checkoutボタンの背景色、フォント色、ボーダー色、フォントサイズを変更し、ホバー時にContinue to Checkout ボタンの背景色を変更する:

.Button-Primary{   background-color: #2dd262 !important; /* button color */   border-color: #8f9396 !important; /* border color */   color: white !important; /* font color */   font-size: 18px !important; /* font size */}.Button-Primary:not([disabled]):hover {   background-color: #059e36 !important; /* button color when hover over */}

「Your Cart」行の背景色を変更する:

.Product-Line{   background-color: #D9FED9 !important; /* background color */}

ポップアップタイトル、「Your Cart」(.Product-Name)、アップセル商品のフォントサイズを変更する:

.Title{   font-size: 30px !important; /* font size of the headline */}.Product-Name{   font-size: 16px !important; /* font size of the parent product */}.Offer-Title{   font-size: 16px !important; /* font size of the upsell product */}

ポップアップで使用するフォントを変更する:

/* インポートしたカスタムフォントは、フォント上にある必要があります。google.comドメイン */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* キャンディラックのポップアップ要素に新しいフォントを割り当てる */.frame-content{   font-family: Comfortaa, sans-serif !important;}

以下はカスタマイズ可能なクラスの概要です:

お困りですか？[email protected]

Happy upselling,

Digismoothie team までチャットまたはメールでご連絡ください。