Přeskočit na hlavní obsah

Uživatelská příručka – Designer v Upsearchu

Tento dokument slouží jako přehledná příručka pro práci s nástrojem Designer v rámci platformy UpSearch. Umožní vám jednoduše upravovat vzhled autocomplete a vyhledávacího rozhraní vašeho e-shopu, bezpečně testovat změny a následně je publikovat do ostrého provozu.

🧭 1. Přístup do Designeru​

  1. V levém menu klikněte na Designer.
  2. V horní liště zkontrolujte, že máte vybraný správný projekt (např. mujeshop.cz).

🎨 2. Nastavení vzhledu​

Designer je rozdělen do několika přehledných sekcí, které upravíte pomocí barevných pickerů, sliderů nebo přepínačů. Většina sekcí je sbalitelná a rozdělena na základní a pokročilé možnosti.

2.1 Barvy​

  • Nastavte barevné schéma webu (primární, sekundární, text, pozadí, odkazy, hover efekty, stíny a další).
  • U každé barvy je zobrazen název odpovídající CSS proměnné.
  • Kliknutím na ikonu ↺ vrátíte barvu na výchozí hodnotu.

2.2 Fonty​

  • Upravte velikosti textu pro jednotlivé nadpisy (H1–H6) a běžný text.
  • Každý posuvník zobrazuje hodnotu v pixelech a má možnost resetu.
  • Pod posuvníkem vidíte živý náhled textu s danou velikostí.

2.3 Odsazení komponent​

  • Definujte vnitřní mezery mezi prvky pomocí jednoduchých sliderů pro varianty: malý, střední, velký.

2.4 Breakpointy a responzivita​

  • Nastavte chování rozhraní pro různé velikosti obrazovek (XS až XXL).
  • Konfigurujte počet položek v řádcích, mezery a zobrazení výsledků v gridu nebo inline.

2.5 Obecná nastavení​

  • Přepínejte funkce jako zobrazení slevy v %, staré ceny, skladovou dostupnost, tlačítko přidat do košíku apod.
  • Pokročilá nastavení (např. vlastní ikony nebo breakpointy) zadáváte ve formě JSONu s automatickou validací.

2.6 Autocomplete (Nástupce)​

  • Upravte vstupní pole pro vyhledávání: typ pole, layout, placeholder, cílový HTML element apod.

2.7 Výsledky hledání​

  • Aktivujte nebo vypněte stránkování, zobrazení počtu výsledků, nekonečné scrollování nebo pozici filtrů.

2.8 Chování košíku​

  • Pokud potřebujete, můžete přidat vlastní JavaScript funkci, která se spustí při přidání do košíku.

💾 3. Uložení změn a návrhy (draft)​

  1. Uložit změny – zelené tlačítko ve spodní části uloží vaše úpravy jako návrh (draft).
  2. Zobrazit náhled – modré tlačítko otevře nový náhled, ve kterém vidíte vzhled vašeho návrhu naživo.
  3. Obnovit původní – žluté tlačítko vrátí všechny hodnoty zpět na poslední uložený návrh.

🔒 Draft je bezpečný prostor – do produkce se nic nenasazuje, dokud nedáte výslovný pokyn.

🚀 4. Nasazení do produkce​

Jakmile máte návrh připravený a otestovaný:

  1. Klikněte na Publikovat do produkce (fialové tlačítko).
  2. Systém:
    • Vygeneruje finální CSS a JS podle vašich proměnných.
    • Nasadí je do živého prostředí vašeho e-shopu.
  3. Zobrazí se potvrzení o úspěšném nasazení.

⚠️ Produkční nasazení je nevratné – doporučujeme důkladně otestovat vše v náhledu před potvrzením.

✅ Doporučený postup​

  1. Začněte barvami – upravte primární a doplňkové barvy.
  2. Pokračujte fonty – nastavte velikosti nadpisů a textu.
  3. Doladění odsazení a layoutu – přizpůsobte grid, breakpointy a vzhled výsledků.
  4. Otestujte – uložte a klikněte na zobrazit náhled.
  5. Uložte jako draft – abyste měli bezpečnou zálohu.
  6. Publikujte – až budete spokojeni, nasazení je na jedno kliknutí.

💡 Tipy pro efektivní práci​

  • Průběžně ukládejte návrh, předejdete ztrátě práce.
  • Používejte náhledy – uvidíte změny v reálném kontextu.
  • K dokumentaci připojte výchozí hodnoty – snadno se vrátíte zpět.
  • Změny mezi projekty kopírujte přes JSON exporty (pokročilé použití).

Díky Designeru v UpSearchu máte plnou kontrolu nad vzhledem vašeho vyhledávání bez nutnosti zasahovat do kódu. Pokud si nevíte rady, neváhejte kontaktovat naši podporu.