Slide cart od Candy Rack má už v základu čistý a funkční design. Pokud ho ale chcete více přizpůsobit vzhledu svého obchodu, můžete pomocí CSS upravit jednotlivé prvky košíku.
CSS přidáte tak, že v aplikaci Candy Rack přejdete na: Slide cart → Design → Vlastní CSS
a vložíte tam svůj kód.
Níže najdete:
seznam dostupných CSS tříd (selektorů),
praktické ukázky úprav,
několik tipů, aby se styly správně aplikovaly.
Seznam selektorů
Toto jsou stabilní CSS selektory, které můžete použít pro stylování slide cart. Dodržují jednotný vzor pojmenování candyrack-slider-cart-*, takže se při aktualizaci aplikace nezmění.
Prvek | Selektor třídy |
Hlavní wrapper košíku |
|
Nadpis košíku |
|
Tlačítko zavření (×) |
|
Progress bar (dopravy zdarma) |
|
Kontejner položky košíku |
|
Název produktu |
|
Aktuální cena produktu |
|
Původní cena položky (přeškrtnutá) |
|
Badge štítky se slevovým kódem |
|
Tlačítko odstranění produktu |
|
Minus tlačítko množství |
|
Plus tlačítko množství |
|
Nadpis upsell sekce |
|
Karta upsell nabídky |
|
Název upsell produktu |
|
Badge („SAVE 20%“, „RECOMMENDED“) |
|
Cena upsell produktu |
|
Tlačítko „Přidat“ u produktu |
|
Text mezisoučtu |
|
Cena mezisoučtu |
|
Checkout tlačítko |
|
Příklady úprav
Zde najdete několik příkladů použití CSS pro úpravu slide cart a jeho sladění s designem vašeho obchodu.
Checkout tlačítko
Změňte barvu pozadí, textu nebo zaoblení rohů checkout tlačítka tak, aby odpovídalo stylu vašeho obchodu. Můžete také upravit hover efekt při najetí myší:
.candyrack-slider-cart-footer-checkout-button {
background-color: #1a1a1a !important; /* button background */
color: #ffffff !important; /* button text color */
border-radius: 4px !important; /* corner radius */
font-size: 16px !important;
}
.candyrack-slider-cart-footer-checkout-button:hover {
background-color: #333333 !important;
}Tlačítko „Přidat“ u nabízeného produktu
Stylování tlačítek pro přidání upsell produktů nezávisle na checkout tlačítku:
.candyrack-slider-cart-offer-item-add-button {
background-color: #ff5024 !important;
color: #ffffff !important;
border-radius: 6px !important;
}
.candyrack-slider-cart-offer-item-add-button:hover {
background-color: #cc4020 !important;
}Badge štítky
Přizpůsobte štítky typu „SAVE 20%“ nebo „RECOMMENDED“ vzhledu svého obchodu:
.candyrack-slider-cart-offer-item-badge {
background-color: #000000 !important; /* badge background */
color: #ffffff !important; /* badge text color */
border-radius: 3px !important;
}Nadpis upsell sekce
Změňte velikost nebo tloušťku nadpisu sekce s doporučenými produkty:
.candyrack-slider-cart-offers-title {
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}Progress bar /Lišta odměn (doprava zdarma)
Upravte barvu výplně, pozadí a textu progress baru tak, aby odpovídal vašemu brandingu.
Tento prvek používá CSS proměnné, takže zde není potřeba používat !important.
.candyrack-slider-cart-reward-bar {
--cr-slider-cart-reward-bar-progress-fill-color: #000000;
--cr-slider-cart-reward-bar-bg-color: #f9f9f9;
--cr-slider-cart-reward-bar-text-color: #1a1a1a;
}Vlastní písmo
Importujte Google Font a aplikujte ho na celý slide cart:
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
#candyrack-slider-cart {
font-family: 'Inter', sans-serif !important;
}Užitečné informace
Slide cart se vykresluje přímo na stránce obchodu. Na rozdíl od pop-upu není vložený v iframe, takže se mohou automaticky přebírat fonty nebo globální CSS proměnné vaší šablony.
Ve většině případů bude potřeba použít !important, aby vaše styly přepsaly výchozí styly slide cartu.
Pokud si nejste jistí, jaký selektor použít, napište nám přes chat v aplikaci a rádi vám poradíme.