# Jak zobrazit energetické štítky EPREL na frontendu Shoptetu > Návod, jak pomocí příznaků a CSS zobrazit energetické štítky EPREL (A–G) na frontendu Shoptetu a jak přidat informační listy a velké štítky k produktům. - **Zdroj:** https://www.webotvurci.cz/navody/obecne-navody-pro-shoptet/energeticke-stitky-shoptet/ - **Doplněk / kategorie:** Obecné návody pro Shoptet (https://www.webotvurci.cz/navody/obecne-navody-pro-shoptet/) - **Datum:** 2026-01-07 - **Autor:** Webotvůrci (https://www.webotvurci.cz/) --- ![A-Left-DarkGreen-WithAGScale](https://www.webotvurci.cz/uploads/navody/A-Left-DarkGreen-WithAGScale.png) **Délka čtení: 3 min** ## Vytvoření příznaků v administraci Shoptetu Nejdříve vytvořte příznaky produktů, které identifikují energetické štítky na frontendu. ### Postup 1. V administraci Shoptetu jděte na: **Nastavení → Produkty → Parametry a příznaky → Příznaky** 2. Vytvořte nové příznaky s názvy: - `EPREL-A` - `EPREL-B` - `EPREL-C` - `EPREL-D` - `EPREL-E` - `EPREL-F` - `EPREL-G` Tyto příznaky se na frontendu projeví jako HTML třídy: `EPREL-A` ### Poznámka ke starším škálám Pro starší energetické třídy (např. A+, A++, A+++) vytvořte další příznaky s vlastní SVG/PNG grafikou. --- ## Nahrání obrázků štítků do Správce souborů ### Postup 1. V administraci otevřete **Správce souborů** 2. Nahrajte jednotlivé obrázky štítků (A–G) ### Doporučený formát - **SVG** – ideální volba (ostré zobrazení, malá velikost, snadné škálování) - Alternativně PNG Po nahrání zkopírujte veřejnou URL adresu každého souboru, např.: ``` https://example.myshoptet.com/user/documents/upload/labels/A-Left-DarkGreen-WithAGScale.svg ``` ### Stažení obrázků Stáhněte obrázky z oficiálního EPREL zdroje: ``` https://ec.europa.eu/assets/move-ener/eprel/EPREL%20Public/Nested-labels%20thumbnails/Energy_arrows.zip ``` --- ## Mapování příznaků na SVG pomocí CSS Zobrazení štítků se řeší čistě přes CSS, které skryje text příznaku a zobrazí odpovídající SVG obrázek. ### Příklad CSS kódu ```css /* Základ – cílí pouze na EPREL příznaky */ .flags .flag[class*="flag-eprel-"] { position: relative; padding: 0 !important; background: none !important; border: none !important; font-size: 0 !important; line-height: 0 !important; } /* Pseudo-element pro SVG štítek */ .flags .flag[class*="flag-eprel-"]::before { content: ""; display: inline-block; width: 54px; height: 32px; background-repeat: no-repeat; background-size: contain; } /* Jednotlivé energetické třídy */ .flag-eprel-a::before { background-image: url("URL_NA_SVG_PRO_A"); } .flag-eprel-b::before { background-image: url("URL_NA_SVG_PRO_B"); } .flag-eprel-c::before { background-image: url("URL_NA_SVG_PRO_C"); } /* … pokračuje až do G */ ``` Do jednotlivých `background-image` vložte URL adresy SVG, které jste si zkopírovali ze Správce souborů. --- ## Vložení CSS do Shoptetu Vložte hotový CSS kód do: **Vzhled a obsah → Návrhář šablon → HTML editor → Záhlaví ** Po uložení se energetické štítky automaticky zobrazí v kategoriích, na detailu produktu a všude tam, kde Shoptet vykreslí příznaky produktu. --- ## Výsledek - Produkt má přiřazen příznak `EPREL-A` až `EPREL-G` - Text příznaku se na frontendu nahradí SVG štítkem - Řešení nezasahuje do jiných příznaků ani do šablony - Vše je snadno rozšiřitelné o další škály nebo typy štítků --- ## Oficiální data k energetickým štítkům (EPREL) Pro správné zobrazení je nutné vycházet z **oficiálních dat** EPREL. 👉 **Veřejná databáze EPREL:** [https://eprel.ec.europa.eu](https://eprel.ec.europa.eu) V EPREL jsou pro každý výrobek dostupné: - energetická třída a typ škály - energetický štítek (grafická podoba) - informační list produktu (PDF) > Většinu těchto dat by měl e-shop získat od dodavatele nebo výrobce produktu, protože právě výrobce je odpovědný za registraci výrobku v EPREL. EPREL slouží jako: - ověření správnosti údajů - oficiální zdroj pro stažení štítků a informačních listů --- ## Přidání informačních listů a velkých štítků k produktům Kromě malých energetických štítků musí být k produktům přidány i **kompletní podklady**. ### Jak je na Shoptetu zobrazit - **Velké energetické štítky** lze přidat jako obrázky produktu - **Informační listy a velké energetické štítky** lze připojit jako související soubory pomocí doplňku: [https://doplnky.shoptet.cz/souvisejici-soubory](https://doplnky.shoptet.cz/souvisejici-soubory) Tento postup umožňuje splnit informační povinnosti a zpřístupnit dokumenty ke stažení. --- ## EPREL API Podle zkušeností je EPREL API pro třetí strany využitelné jen velmi omezeně. Pro smysluplné dotazování je nutné mít u každého produktu: - správně určenou **produktovou skupinu** (EPREL category) - znát buď **EPREL ID** produktu (nejspolehlivější), nebo **modelový identifikátor výrobce** (méně spolehlivé) **EAN kód je v praxi téměř nepoužitelný**, protože: - EPREL jej nemá povinný u všech kategorií výrobků - Často je veden pouze jako GTIN - I tam, kde existuje, nemusí být jednoznačně spárovatelný s konkrétním modelem Z těchto důvodů se jako stabilnější řešení ukazuje práce s daty dodanými výrobcem a využití EPREL primárně jako referenčního a validačního zdroje, nikoliv jako runtime API. --- *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*