# Piktogramy

Modul **Piktogramy** rozšiřuje produkty o **grafické značky (ikonky)**, které rychle a přehledně sdělí důležité informace o produktu.

Typicky se používá pro:

* označení vlastností (např. *Eko*, *Ruční výroba*, *Bez lepku*),
* zvýraznění benefitů (např. *Doprava zdarma*, *Novinka*, *Hit měsíce*),
* upozornění na specifika produktu (např. *Citlivá pokožka*, *Pro děti*, *Limitovaná edice*).

Piktogramy pomáhají zákazníkům rychle pochopit, čím je produkt výjimečný, bez nutnosti číst dlouhý popis.

### K čemu slouží piktogramy

Piktogramy jsou ideální, když:

* máte u produktů **opakující se informace**, které nechcete pořád psát textem,
* chcete zlepšit **přehlednost kategorií** a detailů produktů,
* potřebujete, aby zákazník na první pohled viděl klíčové vlastnosti.

Každý piktogram má:

* **název** (pro administraci i alternativní text),
* **obrázek/ikonu**,
* volitelný **text do bubliny (tooltip)** – ten se zobrazí po najetí myší na piktogram.

### Kde najdu modul?

{% hint style="info" %}
Modul je nutné nejprve nainstalovat ve **Správci rozšíření**. 
{% endhint %}

V administraci e‑shopu najdete modul na dvou místech:

* **Obsah → Piktogramy** (nebo v sekci s obsahem / produktem podle vašeho menu)
  * zde vytváříte a spravujete seznam všech dostupných piktogramů.
* V **detailu produktu**:
  * nová záložka / sekce **Piktogramy**,
  * zde vybíráte, které piktogramy se mají u konkrétního produktu zobrazit.

## Jak vytvořit nový piktogram

{% stepper %}
{% step %}
V administraci přejděte na **Piktogramy**.
{% endstep %}

{% step %}
Klikněte na tlačítko **Přidat piktogram**.
{% endstep %}

{% step %}
Vyplňte:

* **Název piktogramu** – např. *Bez lepku*, *Novinka*, *Citlivá pokožka*.
* **Text do bubliny po najetí myši** – stručné vysvětlení (např. *Tento produkt neobsahuje lepek*).
* **Piktogram (obrázek)** – nahrajte ikonku/obrázek (ideálně jednoduchý, čitelný i v malém rozměru).
* **Zobrazovat** – zaškrtněte, pokud má být piktogram dostupný pro použití u produktů.
  {% endstep %}

{% step %}
Uložte piktogram.

Piktogram je nyní připravený k připojení ke konkrétním produktům.
{% endstep %}
{% endstepper %}

## Jak piktogramy připojit k produktu

{% stepper %}
{% step %}
Otevřete v administraci **produkt**, ke kterému chcete piktogramy přidat.
{% endstep %}

{% step %}
Přejděte na záložku **„Piktogramy“**.
{% endstep %}

{% step %}
Uvidíte seznam dostupných piktogramů (ty, které máte vytvořené a označené jako „Zobrazovat“).
{% endstep %}

{% step %}
Zaškrtněte / vyberte piktogramy, které mají být u produktu zobrazené.
{% endstep %}

{% step %}
Uložte produkt.

Od této chvíle se u daného produktu budou na frontendu zobrazovat zvolené piktogramy.

{% hint style="success" %}
Stejný piktogram můžete použít u **libovolného počtu produktů**, takže např. *Bez lepku* dáte ke všem bezlepkovým produktům.
{% endhint %}
{% endstep %}
{% endstepper %}

## Jak se piktogramy zobrazují na e‑shopu

Na detailu produktu (a případně i v kategoriích, podle implementace šablony) se piktogramy zobrazují:

* jako malá **ikonka / obrázek** vedle nebo pod názvem produktu, ceny nebo u vlastností,
* každý piktogram:
  * používá obrázek, který jste nahráli,
  * pokud má vyplněný **tooltip**, zákazník po najetí myši vidí krátký vysvětlující text.

Technická integrace do šablony je obvykle hotová od implementátora – jako správce obsahu jen:

* vytváříte piktogramy,
* vybíráte je u produktů.

## Řazení a viditelnost piktogramů

#### Seřazení piktogramů

{% stepper %}
{% step %}
V sekci **Piktogramy** klikněte na tlačítko **Seřadit**.
{% endstep %}

{% step %}
Pomocí „táhni a pusť“ (drag & drop) přetáhněte piktogramy do požadovaného pořadí.
{% endstep %}

{% step %}
Uložte změny.

Toto pořadí se projeví při zobrazení piktogramů na produktové stránce (u těch, které jsou u produktu vybrané).
{% endstep %}
{% endstepper %}

#### Viditelnost

U každého piktogramu máte přepínač **„Zobrazovat“**:

* pokud je **zapnutý**, piktogram je dostupný pro přiřazení k produktům a zobrazuje se i na frontendu,
* pokud je **vypnutý**, piktogram se:
  * nenabízí v seznamu u produktů,
  * nezobrazuje se zákazníkům (i když byl dříve vybraný).

## Často kladené otázky

<details>

<summary>Kolik piktogramů mohu mít u jednoho produktu?</summary>

Libovolně. Doporučuje se ale:

* použít jen ty nejdůležitější (např. 3–6),
* aby produkt nepůsobil přeplněně a piktogramy byly dobře čitelné.

</details>

<details>

<summary>Mohu piktogram použít u více produktů?</summary>

Ano. Piktogramy jsou **sdílené**:

* jednou ho vytvoříte (např. „Bez lepku“),
* pak ho jen zaškrtnete u všech produktů, kde platí.

</details>

<details>

<summary>Co se stane, když piktogram smažu?</summary>

Pokud piktogram smažete:

* zmizí ze všech produktů, kde byl použit,
* v případě nejistoty raději místo smazání jen vypněte jeho **viditelnost**.

</details>

<details>

<summary>Můžu měnit obrázek piktogramu?</summary>

Ano. Pokud:

* v detailu piktogramu nahradíte obrázek novým,
* na všech produktech se začne zobrazovat nový obrázek,
* název a tooltip můžete dle potřeby také upravit.

</details>

***

## Praktické příklady

### Příklad 1: Zdravé potraviny

{% stepper %}
{% step %}
Vytvořte piktogramy:

* „Bez lepku“,
* „Bez laktózy“,
* „Bio kvalita“.
  {% endstep %}

{% step %}
U konkrétních potravin v záložce **Piktogramy** vyberte ty, které odpovídají vlastnostem produktu.
{% endstep %}

{% step %}
Zákazník tak v detailu hned vidí, které produkty splňují jeho dietní požadavky.
{% endstep %}
{% endstepper %}

### Příklad 2: E‑shop s elektronikou

{% stepper %}
{% step %}
Vytvořte piktogramy:

* „Doprava zdarma“,
* „Prodloužená záruka“,
* „Novinka“,
* „Výprodej“.
  {% endstep %}

{% step %}
U vybraných produktů nastavte:

* u novinek – „Novinka“,
* u akčních – „Výprodej“,
* u dražších – „Doprava zdarma“.
  {% endstep %}

{% step %}
Zákazník ihned vidí, které produkty jsou zvýhodněné nebo nové.
{% endstep %}
{% endstepper %}

### Příklad 3: Drogerie a kosmetika

{% stepper %}
{% step %}
Piktogramy:

* „Pro citlivou pokožku“,
* „Bez parfemace“,
* „Netestováno na zvířatech“.
  {% endstep %}

{% step %}
U citlivých produktů nastavte kombinaci těchto piktogramů.
{% endstep %}

{% step %}
Uživatelé citliví na složení tak snadno najdou vhodné produkty.
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://napoveda.rocketoo.cz/rocketoo/rozsireni/piktogramy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.