+420 728 089 029jsme@webotvurci.czCZ
Let's set sail
+420 728 089 029CZ

How to display EPREL energy labels on the Shoptet frontend

⏱ 3 min read

A-Left-DarkGreen-WithAGScale

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: <span class="flag flag-eprel-a">EPREL-A</span>

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)
  • 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

/* 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

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

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.