# 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 %}