Jak na to: Úprava widgetů pomocí vlastního CSS

Každý widget je možné přizpůsobit pomocí různých nastavení přímo v našem editoru. Nebojte se vše prozkoumat a různá nastavení proklikat. Pokud ale potřebujete upravit vzhled nad rámec nabízených možností, je možné sáhnout k úpravě pomocí vlastního CSS kódu. K těmto úpravám je sice potřeba znát alespoň základy kódování, flexibilita je pak ale obrovská.

Aktualizováno v říjnu 2026: vlastní CSS je podle ceníku součástí tarifů Pro a Business. Nově můžete nastavit i globální CSS pro všechny widgety najednou, viz konec článku.

Widget se na stránce vykresluje v tzv. Shadow DOM. Styly vašeho e-shopu proto widget nerozbijí a styly widgetu zase neovlivní zbytek stránky. Pokud chcete widget upravit, musí být CSS přímo v nastavení widgetu, ne v šabloně e-shopu.

Celý obsah pole Vlastní CSS bude vložen do hlavičky generovaného widgetu. Vaše CSS pravidla tedy musí být obalena <style>...</style> tagem.

Pro úpravy pomocí vlastních CSS se doporučujeme obrátit na kodéra nebo správce vašich stránek.

Příklady

Změna písma

Jiný font a velikost písma u názvu produktu

<style>
  .title {
    font-family: Arial;
    font-size: 20px;
  }
</style>

Pokud chcete upravit písmo nebo jiné atributy u dalších elementů, je potřeba na ně vždy cílit dle jejich CSS tříd. Vetšinou používáme následující třídy.

• title pro název produktu
• price pro cenu produktu
• original-price pro původní cenu produktu, pokud je v akci
• action-price pro akční cenu produktu, pokud je v akci
• description pro popis produktu

Font z Google Fonts

Následující část kódu musí být vložena do hlavičky samotné stránky, na kterou widget vkládáte:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet">
    

Tento kód potom ve vlastních kódech u widgetu:

<style>
  .pwjs {
    font-family: 'Goldman', cursive;
  }
</style>

Pozor, úspěšnou změnu fontu je potřeba kontrolovat až na vaší cílové stránce s vloženým widgetem. U nás v editoru nebo náhledu widgetu nemusí být změna fontu vidět.

Změna barvy tlačítka při najetí myší(hover efekt)

<style>
  .btn:hover {
    background-color: darkgreen;
  }
</style>

Globální CSS pro všechny widgety

Pokud chcete stejnou úpravu ve všech widgetech, například písmo nebo zaoblení, nemusíte ji kopírovat do každého zvlášť. V tarifu Pro a Business najdete v nastavení e-shopu pole Globální CSS. Jeho obsah se vloží do každého widgetu před vlastní CSS konkrétního widgetu, takže jednotlivé widgety ho můžou přepsat.

Do globálního CSS zadávejte čisté CSS bez tagu <style>, ten aplikace doplní sama. Maximální délka je 64 000 znaků.

.pwjs .item {
  border-radius: 12px;
}