Markup hooks

How hooks work

• data-blok sits on the root of every website block, in both the Basic and Expert templates. Its value is the kind of block.
• data-cast sits on a part of a block (heading, text, button) and on parts of the store outside blocks: the product card, price, header, footer and the parts of the product page.
• 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, or with the page root as described at the end of this page; 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="tim"	Team: people with a photo, name, role and a short text.
data-blok="udalosti"	Events with a date, place, sign-up and details; past ones are hidden.
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="mapa"	Map: address, directions button and a map of the place; the Google map loads only after cookie consent.
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="jednotkovaCena"	Unit price next to the product price.
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="porovnanie"	Table comparing products and their features.
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.
data-cast="oznam"	Announcement bar above the store header.
data-cast="vsetkyKategorie"	Button with the category tree in the store header.
data-cast="zvyrazneny"	Featured product on the store's homepage.
data-cast="manifest"	The store's manifesto on its homepage.
data-cast="magazin"	Latest blog articles on the store's homepage.
data-cast="odberEshopu"	Newsletter sign-up on the store's homepage.
data-cast="vyhody"	Store benefits on the store's homepage.
data-cast="fotkyProduktu"	Product photos and videos on the product page.
data-cast="udajeProduktu"	The column with the name, price, options and button on the product page.
data-cast="nazovProduktu"	Product name on the product page.
data-cast="popisProduktu"	Product description on the product page, next to the price and in the tab below the product.
data-cast="variantyProduktu"	Variant options on the product page, for example size or colour.
data-cast="zalozkyProduktu"	Tabs with the description, specifications and files below the product.
data-cast="recenzie"	Product reviews with ratings on the product page.
data-cast="doveraProduktu"	Strip with delivery, returns and secure checkout below the product.
data-cast="stitkyProduktu"	Labels on the product photo: discount and sold out, on the card and on the product page.
data-cast="doplnkyProduktu"	Product strips below the product and next to the price: a pricier alternative, “Buy together” and similar products.
data-cast="bezpecnostVyrobku"	Manufacturer, responsible person in the EU, product identification and warnings below the product or in a tab.
data-cast="otazkyProduktu"	Customer questions about the product and the store's answers, with a question form below the product.

Page root: variables and branching

• Before a hook you may put :root with the attributes and class from the table below, for example :root[data-podoba-karta='vzdusna'] [data-cast='kartaProduktu']. This is how you branch a style by website template, dark mode and store layout.
• A store layout attribute is on the root only when the merchant has chosen something other than the default layout; with the default, the attribute is absent. So write the style for the default layout without the root, and override it for another option with a rule that carries the attribute, which has higher specificity. The options and their values are in Website preset.
• A rule with :root alone, without a hook, is accepted when it carries only theme variables from the table below or custom variables with the --vlastne- prefix (followed by lowercase letters, digits and hyphens). Any other declaration on the root is a finding. A root without a hook must stand alone in its rule, not in a list with other selectors.
• Read a custom variable in rules on top of hooks, for example var(--vlastne-medzera). A theme variable changes a value the store already uses: a new primary colour shows up everywhere the store draws it, except on pages where custom CSS does not apply.
• A variable on :root alone applies in dark mode too. Put a different value for dark mode in :root.dark.
• The contrast that Look and feel enforces for theme colours is not checked for variables in custom CSS. Keeping text readable on a new colour is up to you.

Primary colour, corner radius and a custom variable for the whole store, a different primary colour in dark mode, and a product card that changes with the store layout:

:root {
  --primary: #0f766e;
  --radius: 0.5rem;
  --vlastne-medzera: 1.5rem;
}
:root.dark {
  --primary: #5eead4;
}
[data-cast='kartaProduktu'] {
  padding: var(--vlastne-medzera);
}
:root[data-podoba-karta='vzdusna'] [data-cast='kartaProduktu'] {
  padding: 0;
}

Root attributes and classes

From the platform code. This list is built directly from the platform source code, and every deployment checks that the two still match.

On the root	What it means
[data-styl]	Style of the Expert website template when it is not the default (vyrazny). The value is the style code from the theme's styl field.
[data-tmave]	Dark background of the Expert website template. The attribute has no value.
[data-sablona]	The Expert website template, value expert. With the Basic template the attribute is absent.
.dark	The store's dark mode. Only in a store that has it switched on in the theme (the tmavyRezim field), following the visitor's system setting or their choice in the store.
Store layout	A store layout option with its value, only when it is not the default. Options and values are in Website preset. [data-podoba-pas], [data-podoba-stlpce], [data-podoba-kategorie], [data-podoba-karta], [data-podoba-hlavicka], [data-podoba-produkt], [data-podoba-produkty], [data-podoba-pata], [data-podoba-pozadia], [data-podoba-stranky], [data-podoba-vyhody], [data-podoba-odber], [data-podoba-zvyrazneny], [data-podoba-magazin], [data-podoba-manifest], [data-podoba-medzery], [data-podoba-nadpisy]

Theme variables

Variable	What it means
--radius	Corner radius, for example 0.75rem.
--background	Page background.
--foreground	Text on the background.
--primary	Primary brand colour: buttons, links, highlights.
--primary-foreground	Text on the primary colour.
--accent	Subtle highlight: card backgrounds, hover.
--accent-foreground	Text on the subtle highlight.
--muted-foreground	Muted text: captions, dates, table cells.
--surface	Surface of cards and panels.
--line	Lines and card borders.
--brand-2	Second brand colour.
--brand-3	Third brand colour.

Limits

• At most 64 KB of source. The styles go into every page of the store, so every extra kilobyte is paid for by every visitor.
• z-index at most 40: the cookie consent bar and the store's dialogs must stay on top.
• The name of a custom animation in @keyframes starts with vlastne-, so it cannot override one of the store's animations.
• Besides rules, only @media, @supports and @keyframes are accepted. @import and @font-face are not.
• Images in url() only over https from the store's media library.