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

ポップアップタイトル、親商品、アップセル商品のフォントサイズを変更する:

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

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

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

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

開発者向けのオプションやCandy RackのパブリックAPIにご興味がある方は、Candy Rack public API & options for developers の記事で詳しくご紹介しています。

手助けが必要ですか？[email protected]

Happy upselling,

The Candy Rack team.