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ボタンの背景色、フォント色、ボーダー色、フォントサイズを変更: とホバー時のContinue ボタンの背景色:

.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 */}

親商品ラインの背景色を変更する:

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

ポップアップタイトル、注文名(.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チーム