# How to display EPREL energy labels on the Shoptet frontend > A guide to displaying EPREL energy labels (A–G) on the Shoptet frontend with flags and CSS, plus how to add information sheets and large labels to products. - **Zdroj:** https://www.webmakeria.com/guides/general-shoptet-guides/how-to-display-eprel-energy-labels-on-the-shoptet-frontend/ - **Doplněk / kategorie:** General Shoptet guides (https://www.webmakeria.com/guides/obecne-navody-pro-shoptet/) - **Datum:** 2026-01-07 - **Autor:** Webotvůrci (https://www.webotvurci.cz/) --- ![A-Left-DarkGreen-WithAGScale](https://www.webmakeria.com/uploads/navody/A-Left-DarkGreen-WithAGScale.png) **Reading time: 3 min** ## Creating flags in the Shoptet admin First create the product flags that identify energy labels on the frontend. ### Steps 1. In your Shoptet admin, go to: **Settings → Products → Parameters and flags → Flags** 2. Create new flags with these names: - `EPREL-A` - `EPREL-B` - `EPREL-C` - `EPREL-D` - `EPREL-E` - `EPREL-F` - `EPREL-G` On the frontend, these flags show up as HTML classes: `EPREL-A` ### A note on older scales For older energy classes (A+, A++, A+++ and similar), create additional flags with their own SVG/PNG graphics. --- ## Uploading label images to the File manager ### Steps 1. Open the **File manager** in your admin 2. Upload the individual label images (A–G) ### Recommended format - **SVG** – the ideal choice (sharp rendering, small file size, easy scaling) - PNG as an alternative Once uploaded, copy the public URL of each file, for example: ``` https://example.myshoptet.com/user/documents/upload/labels/A-Left-DarkGreen-WithAGScale.svg ``` ### Downloading the images Download the images from the official EPREL source: ``` https://ec.europa.eu/assets/move-ener/eprel/EPREL%20Public/Nested-labels%20thumbnails/Energy_arrows.zip ``` --- ## Mapping flags to SVGs with CSS The labels are rendered purely through CSS, which hides the flag text and shows the matching SVG image instead. ### Example CSS ```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 */ ``` Into each `background-image`, insert the SVG URLs you copied from the File manager. --- ## Inserting the CSS into Shoptet Paste the finished CSS into: **Appearance and content → Template designer → HTML editor → Header ** Once saved, the energy labels show up automatically in categories, on product detail pages and everywhere else Shoptet renders product flags. --- ## The result - Each product is assigned a flag from `EPREL-A` to `EPREL-G` - On the frontend, the flag text is replaced by the SVG label - The solution doesn't interfere with other flags or with the template - Everything is easy to extend with more scales or label types --- ## Official EPREL energy label data To display the labels correctly, you have to work from **official** EPREL data. 👉 **Public EPREL database:** [https://eprel.ec.europa.eu](https://eprel.ec.europa.eu) EPREL provides the following for every product: - energy class and scale type - energy label (the graphic itself) - product information sheet (PDF) > Your store should get most of this data from the supplier or the manufacturer, because it's the manufacturer who is responsible for registering the product in EPREL. EPREL serves as: - a way to verify that the data is correct - the official source for downloading labels and information sheets --- ## Adding information sheets and large labels to products Beyond the small energy labels, products also need the **full documentation**. ### How to display it on Shoptet - **Large energy labels** can be added as product images - **Information sheets and large energy labels** can be attached as related files using this add-on: [https://doplnky.shoptet.cz/souvisejici-soubory](https://doplnky.shoptet.cz/souvisejici-soubory) This lets you meet your information obligations and make the documents available for download. --- ## The EPREL API In our experience, the EPREL API is only marginally usable for third parties. To query it meaningfully, every product needs: - a correctly identified **product group** (EPREL category) - either the product's **EPREL ID** (the most reliable option) or the **manufacturer's model identifier** (less reliable) **In practice, the EAN code is almost useless**, because: - EPREL doesn't require it for all product categories - It is often listed only as a GTIN - Even where it exists, it may not map unambiguously to a specific model For these reasons, the more stable approach is to work with data supplied by the manufacturer and use EPREL primarily as a reference and validation source, not as a runtime API. --- *Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.* *Všechny návody: https://www.webmakeria.com/guides/ · Kontakt: jsme@webotvurci.cz*