Ve výchozím nastavení je naše rozvržení upsellů opravdu čisté a neagresivní. To proto, že věříme, že čistý a jednoduchý design funguje z hlediska konverzí nejlépe.
Vždy jej však můžete vylepšit využitím možností přizpůsobení v aplikaci, jako je nastavení přizpůsobení vyskakovacího okna , nastavení přizpůsobení bloku aplikace Stránka produktu, nebo použitím pokročilejších úprav stylu.
Přizpůsobení vyskakovacího okna
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ý materiál W3Schools CSS.
Chcete-li upravit kód CSS, přejděte na Přizpůsobení v nabídce aplikace a najděte část Pokročilé Přizpůsobení. Tam vložte vlastní kód CSS.
Seznam selektorů
Níže je uveden seznam dostupných selektorů, které můžete použít, abyste mohli začít se stylováním vyskakovacího okna Candy Rack.
Prvek
|
Selektor třídy
|
Přidat tlačítko
|
pro rozvržení mřížky:
|
Tlačítko Continue
|
|
Tlačítko No, thank you
|
|
Nadřazená produktová řada
|
|
Pop-up title
|
|
Nadřazený produkt
|
|
Upsell product
|
|
Nadřazená cena produktu
|
|
Upsell offer price
|
|
Original upsell offer price
|
|
Description text
|
|
Příklady přizpůsobení vyskakovacího okna
Zde je několik příkladů přizpůsobení pomocí CSS kódů pro vylepšení upsellingu a sladění s brandingem vašeho obchodu.
Přizpůsobení tlačítek "Přidat", "Pokračovat" a "Ne, děkuji"
Tento kód může změnit barvu pozadí, barvu písma, barvu rámečku a velikost písma. Změňte také barvu pozadí při najetí na tlačítko Přidat:
.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:hover { background-color: #059e36 !important; /* button color on hover */}
Pokud chcete použít stejný styl na všechna tlačítka, můžete je seskupit pomocí čárek pro oddělení jednotlivých tříd.
.Button-Add, .Button-Primary, .Button-Reject { 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:hover, .Button-Primary:hover, .Button-Reject:hover { background-color: #059e36 !important; /* button color on hover */}
Přizpůsobení řádku nadřazeného produktu
Úprava barvy pozadí hlavní části produktu.
.Product-Line { background-color: #D9FED9 !important; /* background color */}
Úprava velikosti písma
Úprava velikosti písma pro název vyskakovacího okna, nadřazený produkt a upsell produkt.
.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 */}
Jak změnit písmo použité ve vyskakovacím okně
Vyskakovací okno můžete dále přizpůsobit importem vlastního písma a jeho použitím na konkrétní prvky.
Nejprve písmo importujte buď pomocí pravidla @import (pro načtení externího CSS, které obsahuje písmo), nebo jej definujte přímo pomocí pravidla @font-face. Poté použijte písmo na konkrétní prvky pomocí vlastnosti font-family.
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');/* přiřazení nového písma vyskakovacímu oknu Candy Rack */.frame-content { font-family: Comfortaa, sans-serif !important;}
Přehled selektorů tříd vyskakovacího okna
Zde jsou uvedeny všechny dostupné selektory tříd, které můžete použít k přizpůsobení vyskakovacího okna Candy Rack. Tyto selektory umožňují stylizovat různé prvky, například tlačítka a text, a poskytují vám tak větší kontrolu nad vzhledem vyskakovacího okna.
Vložené nabídky přizpůsobení
Chcete-li upravit kód CSS svých upsellů vložených na stránce produktu, přejděte do editoru Theme, přejděte na stránku produktu, přejděte na Template, otevřete nastavení bloku aplikace Candy Rack Product Page, sjeďte dolů na konec stránky a přidejte kód CSS.
Chcete-li se dozvědět více o aktivaci bloků aplikací pro Candy Rack, přečtěte si článek Jak přidat a přizpůsobit bloky aplikací pro umístění stránky produktu .
Seznam selektorů
Níže je uveden seznam dostupných selektorů, které můžete použít, abyste mohli začít se stylováním bloku aplikací Candy Rack.
Prvek
|
Selektor třídy
|
Název nabídky
|
|
Název produktu
|
|
Původní cena
|
|
Zvýhodněná cena
|
|
Text popisu
|
|
Místo textu
|
|
Příklady přizpůsobení bloku aplikace
Zde je několik příkladů přizpůsobení bloku aplikace pomocí kódu CSS, aby se zlepšil zážitek z upsellingu a sladil se značkou vašeho obchodu.
Úprava velikosti písma
Úprava velikosti písma názvu nabídky a názvu upsellingu.
.candyrack-ppp-checkbox-layout__offers--title { font-size: 30px !important; /* font size of the offer title */}.candyrack-ppp-checkbox-layout__info--product-name { font-size: 15px !important; /* font size of the upsell name */}
Přizpůsobení cen produktů
Upravte barvu písma původní ceny produktu a zlevněné ceny, aby byla sleva pro zákazníky viditelnější.
.candyrack-ppp-checkbox-layout__info--product-price { color: grey !important; /* font color of the offer original price */}.candyrack-ppp-checkbox-layout__info--product-discount-price { color: green !important; /* font color of the sale price */}
Přizpůsobení obsahu textu
Upravte styly písma popisu a zástupného textu. Zde jsou použité selektory:
.candyrack-ppp-checkbox-layout__info--offer-description { font-weight: 700 !important; /* font weight of the description text */}.candyrack-ppp-text-input { font-style: italic !important; /* font style of the placeholder text if custom note is enabled */}
Přehled selektorů tříd bloku aplikace
Zde je přehled dostupných selektorů tříd, které můžete použít k přizpůsobení bloku aplikace Candy Rack.
Pokud vás zajímají další možnosti pro vývojáře a veřejné 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.