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ěňte barvu pozadí nadřazené produktové řady:
.Product-Line { background-color: #D9FED9 !important; /* background color */}Změna velikosti písma vyskakovacího okna, nadřazeného produktu 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 doméně fonts.google.com */@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* přiřazení nového písma prvkům vyskakovacího okna Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}Níže je uveden přehled tříd, které jsou k dispozici pro přizpůsobení:
Pokud vás zajímají další možnosti pro vývojáře a veřejné rozhraní API Candy Rack, můžete se dozvědět více v článku Candy Rack public API & options for developers.
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 Candy Rack.