Ve výchozím nastavení je naše vyskakovací okno upsell opravdu čisté a neagresivní. To proto, že věříme, že čistý a jednoduchý design funguje z hlediska konverze nejlépe.

Vždy jej však můžete vylepšit využitím možností přizpůsobení v aplikaci nebo provést ještě pokročilejší úpravy stylu.

Jak přizpůsobit vyskakovací okno pomocí CSS

Pomocí vlastního CSS můžete změnit prakticky jakýkoli prvek ve vyskakovacím okně. K tomu je však zapotřebí určité základní znalosti jazyka CSS. Pro začátek práce s CSS doporučujeme přečíst si výukový kurz CSS W3Schools.

Chcete-li upravit kód CSS, přejděte na Přizpůsobení vyskakovacího okna v horní nabídce a najděte část Pokročilé přizpůsobení. Tam vložte vlastní kód CSS.

V níže uvedeném příkladu jsme zvětšili velikost písma a změnili barvu všech tlačítek:

Níže uvádíme několik rychlých vlastních kódů CSS, které vám pomohou začít.

Změňte barvu pozadí, barvu písma, barvu rámečku a velikost písma Přidejte tlačítka a barvu pozadí Přidejte tlačítka při najetí:

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

Změňte barvu pozadí, barvu písma, barvu rámečku a velikost písma tlačítka Continue : a barvu pozadí tlačítka Continue při najetí:

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

Změna barvy pozadí nadřazené produktové řady:

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

Změna velikosti písma vyskakovacího okna s názvem, názvem objednávky (.Product-Name) a upsell produktu:

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

Změna písma použitého ve vyskakovacím okně:

/* importované vlastní písmo musí být na fontech.doméně google.com */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* přiřazení nového písma vyskakovacím prvkům Candy Rack */.frame-content {   font-family: Comfortaa, sans-serif !important;}

Níže je uveden přehled tříd dostupných pro přizpůsobení:

Potřebujete s tím pomoct? Neváhejte se na nás obrátit prostřednictvím chatu nebo e-mailu na adrese [email protected] ;)

Šťastný upselling,

tým Digismoothie.