Markup hooks
Class names in the store markup change with every design update. Hooks do not: as long as a hook is on this list, the markup carries it and its meaning stays the same.
How hooks work
data-bloksits on the root of every website block, in both the Basic and Expert templates. Its value is the kind of block.data-castsits on a part of a block (heading, text, button) and on parts of the store outside blocks: the product card, price, header and footer.- A part is the same part wherever it appears. The heading of a block and the heading of a card inside it are both a heading; to target only the card, combine two hooks.
- The store's Custom CSS (the Custom CSS Engine) accepts only rules that start with a hook from this list; the server drops any other rule before publishing and reports it as a finding.
Gallery photos, and item headings in any block:
[data-blok='galeria'] [data-cast='obrazok']
[data-cast='polozka'] [data-cast='nadpis']Checkout, sign-in and the customer account have no hooks. A form where a customer types a password or pays must never change because of someone else's rules.
From the platform code. This list is built directly from the platform source code, and every deployment checks that the two still match.
Website blocks
| Value | What it marks |
|---|---|
data-blok="hlavicka" | Page opener: a large heading, a sentence and buttons; in Basic it sits on a full-screen photo. |
data-blok="rozcestnik" | Split entrance: two halves of the screen, each with a photo, heading and button. |
data-blok="sekcia" | Section: heading and text beside a photo. |
data-blok="pas" | Full-width band with a photo or colour and a centred heading. |
data-blok="pocitadlo" | Numbers: a large figure with a unit and a caption. |
data-blok="formular" | Enquiry form with the shop's contact details. |
data-blok="kalkulacka" | Event price calculator. |
data-blok="video" | Full-width video. |
data-blok="text" | Text with a heading, bullet points and a note. |
data-blok="textSObrazkom" | Text with a heading beside an image. |
data-blok="dlazdice" | Tiles with a photo, title and link. |
data-blok="galeria" | Photo gallery. |
data-blok="cennik" | Package price list. |
data-blok="referencie" | Testimonials: customers' words with their name and company. |
data-blok="media" | Press: where the shop has been featured. |
data-blok="otazky" | Frequently asked questions with answers. |
data-blok="vyzva" | Call to action with a button. |
data-blok="kontakt" | Contact: address, phone and email; in Expert also a form and branches. |
data-blok="nadpisStranky" | Page title with a label and a sentence below it. |
data-blok="loga" | Strip of client names or logos. |
data-blok="ukazka" | Showcase: a process beside a panel with a figure and bars. |
data-blok="sluzby" | Overview of services in cards or lists. |
data-blok="sluzba" | One service in detail: text, bullet points and a metric. |
data-blok="kroky" | Step-by-step process. |
data-blok="vysledky" | Results and case studies. |
data-blok="prednosti" | Strengths: icons, labels or cards with short text. |
data-blok="pripad" | Case study header with figures. |
data-blok="rozsah" | Scope of work: bullet points and a list of services. |
data-blok="pribeh" | Story with a photo and figures. |
data-blok="citat" | Quote with its author and a photo. |
data-blok="pobocky" | Branches: cities and countries. |
data-blok="odkazy" | Links in cards or rows. |
data-blok="hlavnaCena" | A single price with a description, guarantee and buttons. |
data-blok="zahrnute" | What the price includes and what it does not. |
data-blok="tabulka" | Table with column headers. |
data-blok="subory" | Files to download. |
data-blok="farby" | Brand colours: swatches with name and code. |
data-blok="autor" | Person card: photo, name, role and links. |
data-blok="urovne" | Programme tiers with conditions and benefits. |
data-blok="milniky" | Programme milestones. |
data-blok="rezervacia" | Appointment booking: calendar, free slots and a form. |
data-blok="minuta" | Latest entries from Minúta. |
data-blok="odber" | Newsletter sign-up. |
data-blok="zadanie" | Conversation that turns into a project brief. |
data-blok="cennikSluzieb" | Service price list with ordering. |
data-blok="ukazkaPonuky" | Trial price quote from the visitor's own text. |
data-blok="ukazkaDokladu" | Trial reading of the visitor's invoice. |
data-blok="ukazkaPodpory" | Trial support reply based on the visitor's website. |
data-blok="ukazkaKontroly" | Trial check of a product page. |
data-blok="ukazkaPosty" | Trial sorting of an email. |
data-blok="ukazkaRozboru" | Analysis of the visitor's export, run in their own browser. |
data-blok="dokaz" | Evidence: text with an image and sections. |
data-blok="sidlo" | Registered office: address and company details. |
data-blok="nahlad" | Tool preview: an image with a message and figures. |
data-blok="spravy" | Tool messages beside an image. |
data-blok="smer" | Product direction: what exists today and what is planned. |
data-blok="plavajucaVyzva" | Floating call to action in a corner of the screen. |
data-blok="prihlaskaTvorcu" | Application form for the creator programme. |
Block parts
| Value | What it marks |
|---|---|
data-cast="nadpis" | Heading of the block or of one of its items. |
data-cast="podnadpis" | Short line next to the heading: a label above it or a handwritten-style line. |
data-cast="textBloku" | Running text of the block or item: the sentence under the heading, paragraphs. |
data-cast="tlacidlo" | Button or link that leads on. |
data-cast="obrazok" | Photo or image of the block or item. |
data-cast="polozka" | One item of a list in the block: a card, row, question or gallery photo. |
Store parts
| Value | What it marks |
|---|---|
data-cast="kartaProduktu" | Product card in listings and product strips. |
data-cast="cena" | Product price on the card and on the product page. |
data-cast="doKosika" | Button that adds the product to the cart. |
data-cast="vypis" | Product listing for a category or a search. |
data-cast="filter" | Listing filter: attributes and price ranges. |
data-cast="hlavickaStranky" | Page header with the logo, in the shop and on the website. |
data-cast="ponuka" | Menu of pages and categories, in the header and on phones. |
data-cast="paticka" | Page footer. |
data-cast="kosik" | Cart page. |
data-cast="pasEshopu" | The store's homepage banner with its heading and photo. |
data-cast="kategorie" | Categories on the store's homepage. |
data-cast="pasProduktov" | A row of products on the store's homepage. |