# Upravte si vzhled Propojení produktů během pár vteřin 🪄 > Přizpůsobte vzhled propojení svému e-shopu bez psaní CSS — vyberte typ, doladěte barvy a tvary a zkopírujte hotový kód. - **Zdroj:** https://www.webotvurci.cz/navody/propojeni-produktu/generator-css-propojeni-produktu/ - **Doplněk / kategorie:** Propojení produktů (https://www.webotvurci.cz/navody/propojeni-produktu/) - **Datum:** 2026-01-05 - **Autor:** Webotvůrci (https://www.webotvurci.cz/) --- Už žádné složité ladění kódu naslepo! Náš nový **Generátor CSS pro doplněk Propojení produktů** vám umožní přizpůsobit vzhled propojení přesně podle vašeho e-shopu – bez znalosti CSS. Stačí vybrat typ propojení, upravit barvy, tvary nebo písmo a během chvilky získáte **hotový kód připravený ke vložení** do Shoptetu. 💡 **Před použitím si prosím zazálohujte, třeba do Poznámkového bloku, původní kód v záhlaví** svého e-shopu (sekce *Vzhled a obsah → Návrhář šablony → HTML editor → Záhlaví* ), abyste se mohli kdykoli vrátit zpět. Vygerovaný kód vložte na konec existujícího obsahu v Záhlaví. Vyzkoušejte si generátor rovnou níže 👇 a vytvořte si vzhled propojení, který bude přesně ladit s vaším stylem! Header ## CSS Generátor - Propojení produktů Upravte si vzhled propojení produktů na vašem e-shopu Kroky 1 Vyberte typ 2 Upravte design 3 Zkopírujte kód Výběr typu propojení 🏷️ ### Popis propojení Nadpis nad/vedle variant 🖼️ ### Obrázky Propojení s náhledy produktů 📐 ### Velikosti Box s čísly nebo textem 🎨 ### Barvy Barevné varianty produktu 📋 ### Seznam Rozbalovací výběr variant Instrukce - viditelné hned na začátku #### Jak použít vygenerovaný kód? 1. Nastavte si design podle svých představ 2. Klikněte na tlačítko „Kopírovat" nebo „Stáhnout" 3. V administraci Shoptetu přejděte do Vzhled a obsah → Editor → HTML kód → sekce Záhlaví 4. Vložte zkopírovaný kód a uložte Hlavní layout: Nastavení + Náhled Panel nastavení ⚙️ Nastavení designu Placeholder před výběrem 👆 Vyberte typ propojení výše pro zobrazení nastavení Konfigurace: Popis propojení Obsah bude generován JavaScriptem Konfigurace: Obrázky Obsah bude generován JavaScriptem Konfigurace: Velikosti Obsah bude generován JavaScriptem Konfigurace: Barvy Obsah bude generován JavaScriptem Konfigurace: Seznam Obsah bude generován JavaScriptem Panel náhledu 👁️ Náhled Oblast náhledu Vyberte typ propojení pro zobrazení náhledu Výstup CSS kódu Vygenerovaný CSS kód Kopírovat Stáhnout ``` ``` Generátor se týká pouze prvků doplňku Propojení produktů; u výrazně upravených šablon může být výjimečně potřeba doladit kaskádu CSS. --- *Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.* *Všechny návody: https://www.webotvurci.cz/navody/ · Kontakt: jsme@webotvurci.cz*