Technická referencia
Táto stránka je technická referencia CSS hookov (stabilných tried) storefrontu a je vedená v angličtine — názvy tried sú rovnaké vo všetkých jazykoch. Použite ju pri písaní vlastného CSS v sekcii Vlastný kód (Nastavenia → Vzhľad → Vlastný kód).
Storefront CSS styling hooks — reference
Pre AI nástroje
Stiahnite si inštrukčný súbor CLAUDE.md a vložte ho svojmu AI nástroju (napr. Claude). Naučí AI písať bezpečné CSS len pre sekciu Vlastný kód vášho obchodu.
A complete catalogue of the stable, semantic CSS class "hooks" on the storefront, so that platform Brand CSS and merchant Vlastný kód can style any component without relying on Tailwind utility classes (which change between builds) or Vue data-v-* scoped attributes (which are build-hashed and unstable).
TL;DR — every meaningful storefront element carries a predictable bare-kebab class. Target it as
.shop-layout .hook-name { … }. You never need!important.
1. Why these exist
The storefront is styled three ways, in this cascade order (later wins):
- Framework — Tailwind v4 utilities + component
<style scoped>blocks. - Brand CSS — platform-owned, SuperAdmin-only, stored in
visual_settings.theme_css, injected inside@layer brand. Beats Tailwind utilities without!important. - Merchant Vlastný kód —
visual_settings.custom_css, injected unlayered, so it beats the brand layer without!important.
The three layers are injected in resources/views/app.blade.php and resources/css/app.css: Brand CSS comes from visual_settings.theme_css (inside @layer brand) and merchant Vlastný kód from visual_settings.custom_css (unlayered, so it wins over the brand layer).
Both Brand CSS and merchant CSS need stable selectors. Tailwind utility classes are not stable (a redesign changes them) and scoped data-v-* hashes change on every build. The hooks in this document are the contract: they don't change, so CSS written against them keeps working.
2. Conventions
- Bare kebab-case, no prefix, no BEM
__. (Matches the pre-existingproduct-title,product-price,language-switcher,category-card.) - Hooks are pure selectors — they carry no styles by default.
- Always scoped by the storefront root:
.shop-layout .hook { … }. - Hooks are added once in a shared component when it only renders in the intended context, otherwise at the per-usage site or per-variant.
- Important boundary: Vue
<style scoped>rules are unlayered, so they outrank@layer brand. Brand CSS can freely restyle utilities, global elements, and anything via CSS variables (--color-primary,--font-headline,--site-max-width, …, which pass straight through the scoped boundary). To recolor/resize inside a scoped component, prefer driving a CSS variable over fighting the scoped rule.
3. How to use — examples
/* Brand CSS (SuperAdmin → Custom Code → Brand CSS tab). Beats utilities, no !important. */
.shop-layout .header-cart { color: #e11d48; }
.shop-layout .product-card { border-radius: 18px; }
.shop-layout .section-title { letter-spacing: -0.02em; text-transform: uppercase; }
/* Merchant Vlastný kód overrides the brand theme, still no !important. */
.shop-layout .header-cart { color: #111; }4. Hook catalogue (by area, with locations)
Legend: Hook = class name · Element = what it sits on · Where = file(s).
Header (all 8 variants)
Variant files: resources/js/Components/Shop/Navigation/Variants/{default,default_static,boutique,large,large_sticky,double_decker,double_decker_static,simple}/Header.vue
| Hook | Element | Where |
|---|---|---|
site-header | Root <header> element (counterpart to site-footer) | each variant Header.vue |
header-announcement | Announcement-bar wrapper | each variant Header.vue |
header-nav | The max-width <nav> | each variant Header.vue |
header-row | Main logo/search/actions row | default, default_static, boutique, simple |
header-middle-row | Middle row (logo + search + actions) | large, large_sticky |
header-top-bar | Top deck / top bar wrapper | boutique, large, large_sticky, double_decker, double_decker_static |
header-top-links | Top-deck links row | same 5 variants |
header-top-link | Each link in the top-deck row | same 5 variants |
header-top-link-image | Optional round photo on a top-deck link (menu item "Fotka") | same 5 variants |
header-logo | Each <Logo> usage site (adds to Logo.vue's own logo) | each variant Header.vue |
header-nav-links | Desktop nav-items row (boutique has two — left + right of the centred logo) | each variant Header.vue |
header-action-item | Each round action bubble (wishlist / cart) | 6 variants — see note below |
header-switchers | Language + currency cluster | each variant Header.vue |
header-breadcrumb | Breadcrumb outer wrapper | each variant Header.vue |
header-actions | Action-row cluster wrapper | each variant Header.vue |
header-search | Desktop search box | each variant Header.vue (via Search/SearchAutocomplete.vue) |
header-search-toggle | Mobile search button | 7 variants (boutique has an always-visible bar) |
header-menu-toggle, header-search-wrapper, search-autocomplete, search-autocomplete-field, search-autocomplete-icon, search-autocomplete-loading, search-section, search-section-popular, search-section-products, search-section-categories, search-section-pages, search-section-blogs, search-section-brands, search-section-title, search-popular-item, search-suggestion-item, search-empty, search-result-item, search-result-product, search-result-category, search-result-brand, search-result-blog, search-result-page, search-result-slide, search-modal-overlay, search-modal-close, mobile-search-overlay-body | Hamburger button | each variant Header.vue |
header-cart | Cart icon button | resources/js/Components/CartWidget.vue |
header-wishlist | Wishlist icon | resources/js/Components/FavoritesWidget.vue |
header-account | Account icon/link | resources/js/Components/UserAccountWidget.vue |
language-switcher | Language selector | resources/js/Components/LanguageSwitcher.vue (pre-existing) |
currency-selector | Currency selector | resources/js/Components/CurrencySelector.vue (pre-existing) |
Per-variant identity is available without a hook: every root <header> also carries id="header-theme-<variant>" and data-theme-variant="<variant>", so .shop-layout[data-theme-variant="large"] .header-nav { … } targets one variant only.
header-action-itemis not universal. It marks the round bubble<div>that wraps an action icon.boutiquehas no such wrappers at all (its widgets are direct children ofheader-actions), and in every variant the account widget renders bare rather than inside a bubble. Useheader-cart/header-wishlist/header-accountwhen you want a specific action regardless of variant; useheader-action-itemonly to restyle the bubble itself.
Page-builder blueprints
Roots: every resources/js/Components/Shop/Blueprints/*.vue (39 files).
| Hook | Element | Where |
|---|---|---|
<slug>-blueprint | Blueprint outer wrapper | each blueprint, e.g. hero-section-blueprint, product-grid-blueprint, banner-grid-blueprint, faq-section-blueprint, testimonials-section-blueprint, newsletter-blueprint, contact-form-blueprint, card-blueprint, accordion-blueprint, tabs-blueprint, divider-blueprint, image-blueprint, … |
section-title | Blueprint main heading | across Blueprints/*.vue (23 files) |
section-subtitle | Secondary heading / eyebrow | Blueprints/*.vue (15) |
section-text | Body / rich text | Blueprints/*.vue (13) |
section-button | Primary CTA | Blueprints/*.vue (15) |
section-link-overlay | Full-cover "whole section clickable" background link | HeroSection.vue, Card.vue, BannerSection.vue, BannerGrid.vue, AdvancedBanner.vue, ImageBlock.vue (builder canvas disables its pointer-events for click-to-edit) |
hero-search / hero-search-button / hero-search-suggestions / hero-search-suggestion | Hero search bar (Show search bar on a single hero): wrapper, submit button, example-searches row, one example | HeroSection.vue (the input inside is the header's search-autocomplete-* hooks) |
Product card
Variants: resources/js/Components/Shop/ProductCard/Variants/{default,simple,compact,detailed,large,minimal}/ProductCard.vue
| Hook | Element | Where |
|---|---|---|
product-card | Card root | each ProductCard variant |
product-card-image | Image / thumbnail wrapper | each variant |
product-title | Title heading | each variant (pre-existing) |
product-badge | Label / discount / stock badge | each variant (<ProductLabel>) |
product-price | Price wrapper | Components/Shop/ProductPrice.vue, Components/Products/ProductInfo.vue (pre-existing) |
add-to-cart-btn | Add-to-cart button (main CTA) | Shop/DetailButton.vue, Products/AddToCartButton.vue, Shop/ProductCardHoverOverlay.vue |
product-card-cart-btn | Product-card overlay add-to-cart bubble (round icon button on cards) | Components/Shop/ProductActionButton.vue (when type==='add-to-cart') |
product-card-variants | Swatch row under the image on the showcase product card | Components/Shop/ProductCard/Variants/showcase/ProductCard.vue |
product-card-variant-swatch | One variant swatch (image thumb / color dot / text pill) in the row and in the “+N” panel | Components/Shop/ProductCard/Variants/showcase/ProductCard.vue |
product-card-variant-more | The “+N” button that opens the panel with all variants | Components/Shop/ProductCard/Variants/showcase/ProductCard.vue |
product-card-variant-panel | The in-card panel listing all variant swatches | Components/Shop/ProductCard/Variants/showcase/ProductCard.vue |
product-listing | Products-grid wrapper | Pages/Shop/ProductListing/Variants/{default,simple,no_banner}/ProductListing.vue |
Product detail
Mostly pre-hooked (product-detail, -info, -gallery-column, -actions, …) in Components/Shop/ProductDetail/Variants/{default,compact}/ProductDetail.vue.
| Hook | Element | Where |
|---|---|---|
product-detail-title | Product name <h1> | Components/Products/ProductInfo.vue |
product-detail-brand | Brand link under the product title (setting "Show brand logo with link", brand pages on) | Components/Products/ProductInfo.vue |
product-detail-brand-logo | The brand logo <img> inside that link | same |
product-detail-brand-name | Brand name text next to the logo | same |
product-detail-category | Primary-category link under the product title (setting "Show category with link" for the detail) | Components/Products/ProductInfo.vue |
product-card-category | Primary-category link above the SKU line on the card (setting "Show category with link") | Components/Shop/ProductCard/Variants/*/ProductCard.vue, CompactProductCard.vue |
product-gallery | Image gallery | Components/Products/ProductGallery.vue (+ Variants/default/ProductGallery.vue) |
product-spin | 360° turntable viewer (replaces the hero while active) | Components/Products/Product360Viewer.vue |
product-spin-frame | The <canvas> the frames are drawn on | same |
product-spin-controls | Row of round icon buttons over the bottom of the frame | same |
product-spin-control | Each of those buttons (play/pause, prev, next, back to photos) | same |
product-spin-thumb | The "360" tile in the thumbnail grid (default theme) | Products/ProductGallery.vue |
product-spin-badge | Round "360" button centred on the main photo that starts the spin | Products/ProductGallery.vue, compact/ProductDetail.vue |
product-spin-thumb-badge | The small "360" badge on the grid tile | Products/ProductGallery.vue |
quantity-input | Quantity stepper | Components/Shop/QuantityInput.vue |
quatro-calculator | Quatro instalment-calculator block (product detail) | Components/Shop/QuatroCalculatorButton.vue |
quatro-calculator-link | The <a> opening Quatro's calculator | Components/Shop/QuatroCalculatorButton.vue |
quatro-calculator-image | Official Quatro button image | Components/Shop/QuatroCalculatorButton.vue |
quatro-calculator-label | Text fallback when the image is missing | Components/Shop/QuatroCalculatorButton.vue |
quatro-calculator-note | Helper line under the button | Components/Shop/QuatroCalculatorButton.vue |
review-list / review-item | Reviews container / a review | Components/Sections/ReviewsCarousel.vue |
Category
| Hook | Element | Where |
|---|---|---|
category-card | Card root | Components/Shop/CategoryCard.vue (root pre-existing) |
category-card-image | Image wrapper | Components/Shop/CategoryCard.vue |
category-card-title | Title | Components/Shop/CategoryCard.vue |
quick-category-menu | Quick category menu root | Components/Shop/QuickCategoryMenu.vue |
quick-category-menu-grid | Links grid | Components/Shop/QuickCategoryMenu.vue |
quick-category-menu-item | Category pill link (is-active on current category) | Components/Shop/QuickCategoryMenu.vue |
quick-category-menu-item-image | Category thumbnail | Components/Shop/QuickCategoryMenu.vue |
quick-category-menu-item-label | Category name text | Components/Shop/QuickCategoryMenu.vue |
quick-category-menu-toggle | Show more / show less button | Components/Shop/QuickCategoryMenu.vue |
Desktop navigation
| Hook | Element | Where |
|---|---|---|
nav-item | Each top-level menu item wrapper | DesktopMenuItems.vue, MenuLink.vue, DropdownMenu.vue, + the 4 inline headers |
nav-link | Top-level nav link / menu trigger | same as above |
nav-link-icon | Icon inside a nav link | DesktopMenuItems.vue, MenuLink.vue, DropdownMenu.vue |
nav-link-label | Text label inside a nav link | same |
nav-dropdown | Any desktop dropdown / flyout panel | DesktopMenuItems.vue, DropdownMenu.vue, + the 4 inline headers |
nav-dropdown-toggle | Plain dropdown trigger button | DropdownMenu.vue |
nav-dropdown-list | Plain dropdown item list | DropdownMenu.vue |
nav-dropdown-link | A child link in a plain dropdown | DropdownMenu.vue |
nav-overflow | Overflow ("Viac"/more) wrapper | 7 variant Header.vue (boutique has no overflow menu) |
nav-overflow-toggle | Overflow trigger button | same 7 |
nav-overflow-panel | Overflow dropdown panel | same 7 |
Menu panels (the four menu types)
Each panel carries nav-dropdown plus a type-specific hook, so you can style one menu type without hitting the others. The inner component root is hooked separately.
| Menu type | Panel hook (on the dropdown) | Content root hook | Component |
|---|---|---|---|
| Mega menu | mega-menu-panel | mega-menu | Navigation/MegaMenu.vue |
| Category flyout | nav-category-menu-panel | nav-category-menu | Navigation/CategoriesMenu.vue |
| Main-categories grid | categories-grid-menu-panel | categories-grid-menu | Navigation/MainCategoriesGridMenu.vue |
| Parent-category menu | parent-category-menu-panel | parent-category-menu | Navigation/ParentCategoryMenu.vue |
Inner hooks per menu type:
| Hook | Element |
|---|---|
mega-menu-grid, mega-menu-section, mega-menu-title, mega-menu-item, mega-menu-item-image, mega-menu-item-title, mega-menu-banner | Mega-menu grid, column, heading, item link, item image, item label, image-banner tile |
nav-category-menu-rail, nav-category-menu-item, nav-category-menu-item-link, nav-category-menu-item-image, nav-category-menu-item-title, nav-category-menu-item-arrow, nav-category-menu-products, nav-category-menu-products-grid | Left category rail, a row, its link, thumbnail, label, round go-to arrow, right product pane, product grid |
categories-grid-menu-grid, categories-grid-menu-column, categories-grid-menu-item, categories-grid-menu-item-image, categories-grid-menu-item-title | Grid, column, item link, thumbnail, label |
parent-category-menu-grid, parent-category-menu-section, parent-category-menu-section-link, parent-category-menu-section-image, parent-category-menu-section-title, parent-category-menu-items, parent-category-menu-item, parent-category-menu-view-all | Grid, a section column, its header link, image, title, child list, a child link, the "view all" link |
Sidebar category menu
Variants: Components/Shop/CategoryMenu/Variants/{default,simple}/CategoryMenu.vue (+ the recursive Components/Shop/CategoryMenuItem.vue). Both variants carry the same hooks, so a rule written for one keeps working after a variant switch. The product-filter-style category dropdown in ProductListingSidebar/Variants/top uses the same names.
| Hook | Element |
|---|---|
category-menu | Menu root |
category-menu-header | Headline block |
category-menu-toggle | Collapsible headline button (when closable) |
category-menu-list | The <nav> item list |
category-menu-item | One item row |
category-menu-link | The item's link |
category-menu-item-toggle | Expand/collapse chevron button |
category-menu-submenu | Nested children container |
These sit alongside the older desktop-sidebar-* styled hooks (see Appendix A), which carry the components' own scoped rules.
Mobile navigation
| Hook | Element | Where |
|---|---|---|
mobile-menu | Drawer panel root | Navigation/MobileMenu.vue |
mobile-menu-backdrop | Dimmed backdrop behind the drawer | MobileMenu.vue |
mobile-menu-header | Drawer header bar (also the mega-overlay header) | MobileMenu.vue |
mobile-menu-close | Close (×) button | MobileMenu.vue |
mobile-menu-back | Back arrow in the mega overlay | MobileMenu.vue |
mobile-menu-body | Scrolling content area | MobileMenu.vue |
mobile-menu-account | Account / login block | MobileMenu.vue |
mobile-menu-switchers | Language + currency cluster in the drawer | MobileMenu.vue |
mobile-menu-blocks-above | Custom blocks rendered above the nav | MobileMenu.vue |
mobile-menu-accordion | An expand/collapse row | MobileMenu.vue |
mobile-menu-panel | Full-screen mega-menu overlay | MobileMenu.vue |
mobile-menu-item-image | Item thumbnail in the overlay | MobileMenu.vue |
mobile-menu-link, mobile-menu-headline, mobile-menu-subcategory, mobile-menu-block | Link / heading / subcategory / custom block (pre-existing) | MobileMenu.vue, MobileMenuBlockRenderer.vue |
mobile-search-overlay | Full-screen mobile search overlay | Navigation/MobileSearchOverlay.vue |
mobile-search-overlay-header | Its header bar | MobileSearchOverlay.vue |
mobile-search-overlay-title | Its title | MobileSearchOverlay.vue |
mobile-search-overlay-close | Its close button | MobileSearchOverlay.vue |
Search, logo, breadcrumb, footer
| Hook | Element | Where |
|---|---|---|
search-autocomplete-input | The search <input> | Search/Variants/{default,full_width,full_width_modal}/SearchAutocomplete.vue |
search-autocomplete-dropdown | Results container (styled hook, pre-existing) | same three variants |
search-autocomplete-modal | Modal shell | Search/Variants/full_width_modal/SearchAutocomplete.vue |
header-search-wrapper | Column that holds the desktop search box in the header row | all 8 variants Header.vue |
search-autocomplete | Search component root (sits inside header-search) | Search/Variants/{default,full_width,full_width_modal}/SearchAutocomplete.vue |
search-autocomplete-field | Wrapper directly around the <input> + icon | same three variants |
search-autocomplete-icon | Magnifier icon inside the field | same three variants |
search-autocomplete-loading | Loading veil over the results panel | default, full_width |
search-section | Any results group in the dropdown | default, full_width |
search-section-popular / -products / -categories / -pages / -blogs / -brands | The individual result groups | default, full_width |
search-section-title | Group heading (Products (3), Popular Searches, …) | default, full_width |
search-popular-item | Popular-query pill | default, full_width |
search-suggestion-item | Suggested-term pill in the empty state | default, full_width |
search-empty | "No results for …" block | default, full_width |
search-result-item | Every result row/card, whatever its type | all three variants + Search/Items/*.vue |
search-result-product / -category / -brand / -blog / -page | Per-type result | product = carousel card wrapper; others = Search/Items/*.vue |
search-result-slide | Carousel slide holding a product result (width lives here) | default, full_width |
search-modal-overlay | Dark backdrop behind the search modal | Search/Variants/full_width_modal/SearchAutocomplete.vue |
search-modal-close | Modal close button | Search/Variants/full_width_modal/SearchAutocomplete.vue |
mobile-search-overlay-body | Scrollable body of the mobile search overlay | Components/Shop/Navigation/MobileSearchOverlay.vue |
logo | Logo link (pre-existing) | Components/Shop/Logo.vue |
logo-image | Logo <img> | Components/Shop/Logo.vue |
logo-text | Site-name fallback when there is no logo image | Components/Shop/Logo.vue |
breadcrumb | Breadcrumb root | Components/Shop/Breadcrumb.vue, Navigation/Variants/simple/Header.vue |
breadcrumb-list | The <ol> | both |
breadcrumb-item | Each <li> | both |
breadcrumb-link | A clickable crumb | both |
breadcrumb-current | The current-page crumb | both |
breadcrumb-separator | The chevron between crumbs | both |
site-footer | Footer root | Navigation/Variants/default/Footer.vue, Navigation/Variants/builder/Footer.vue |
Cart & checkout
| Hook | Element | Where |
|---|---|---|
cart-drawer | Cart drawer panel | Components/Shop/CartDrawer.vue |
cart-item | Cart line row | Components/Shop/CartDrawer.vue, Components/Shop/CartItem.vue |
checkout-form | Checkout form root | Components/Shop/CheckoutForm.vue |
checkout-steps / checkout-step (+ checkout-step--current / --done / --locked / --cart) / checkout-step-nav / checkout-step-summary (+ checkout-summary-row / checkout-summary-logo / checkout-summary-badge) | Step-by-step checkout (Canvas → Rozloženie pokladne → Po krokoch): progress bar, one step, Back / Continue row, step-3 recap (one row per section, carrier / payment logo box, delivery-type pill) | Components/Shop/Checkout/CheckoutSteps.vue, CheckoutStepSummary.vue, CheckoutForm.vue |
card-payment-form | Card payment panel shown after "Pay" (the card fields themselves are an iframe — style the frame, title, button; [data-gateway] tells the gateway) | Components/Shop/StripeCheckout.vue |
merzio-pay-form | Merzio pay's card fields inline under the selected payment method (the fields are an iframe — style the wrapper, hint and security note) | Components/Shop/MerzioPayInlineForm.vue |
merzio-pay-express | Retired (2026-09-30): Apple Pay / Google Pay are now separate payment options (checkout-method-card); no element carries this class any more | Components/Shop/MerzioPayInlineForm.vue |
checkout-method-badges | Row of card / wallet acceptance marks on a payment method option | Components/Shop/CheckoutMethodOption/Variants/*/CheckoutMethodOption.vue |
order-summary | Order/cart summary panel | Components/Shop/OrderSummary.vue |
checkout-method-card | A shipping/payment method option (Pills or Cards variant) | CheckoutMethodOption/Variants/{default,cards}/CheckoutMethodOption.vue |
checkout-method-radio | The option's radio control | same |
checkout-method-logo | Carrier / payment logo | same |
checkout-method-title | Method name | same |
checkout-method-description | Method description | same (Cards) |
checkout-method-meta / checkout-method-price / checkout-method-extras | Delivery time / price / extra info | same |
Account area (renders in UserAccountLayout, also .shop-layout)
| Hook | Element | Where |
|---|---|---|
account-nav | Account sidebar/menu | Layouts/UserAccountLayout.vue |
account-nav-link | Account menu link | Layouts/UserAccountLayout.vue |
account-card | Content card/panel | Pages/User/*.vue, Pages/Account/*.vue |
order-detail | Order detail root | Pages/Shop/Orders/Show.vue |
order-line | Order line-item row | Pages/Shop/Orders/Show.vue |
confirmation-header / confirmation-badge / confirmation-email-note | Order-confirmation success header, its check badge and the "we e-mailed you" line | Pages/Shop/Checkout/Confirmation.vue |
confirmation-summary / confirmation-items / confirmation-item / confirmation-item-thumb / confirmation-item-gift | Purchased-items panel on the confirmation page | Pages/Shop/Checkout/Confirmation.vue |
confirmation-totals / confirmation-total / confirmation-total-discount | Totals block on the confirmation page | Pages/Shop/Checkout/Confirmation.vue |
confirmation-details / confirmation-payment-status / confirmation-payment-instructions | Order reference numbers, payment-status pill and bank-transfer instructions | Pages/Shop/Checkout/Confirmation.vue |
confirmation-delivery | Delivery address and shipping method on the confirmation page | Pages/Shop/Checkout/Confirmation.vue |
confirmation-actions / confirmation-lookup-note / confirmation-lookup-link | Confirmation-page buttons and the link to the order-lookup page | Pages/Shop/Checkout/Confirmation.vue |
order-status-stepper / order-status-step | Order-status progress bar and its steps (is-done / is-current state classes) | Pages/Shop/Orders/Show.vue |
order-timeline / order-timeline-item | Customer-facing order event timeline | Pages/Shop/Orders/Show.vue |
order-tracking-link | Carrier tracking link on the order page | Pages/Shop/Orders/Show.vue |
order-lookup-form / order-lookup-another | "Moja objednávka" lookup form; link back to it from the order page | Pages/Shop/OrderLookup/Form.vue, Pages/Shop/Orders/Show.vue |
Blog / FAQ / services
| Hook | Element | Where |
|---|---|---|
blog-card | Blog listing item | Components/Shop/BlogCard.vue |
blog-title | Blog card/post title | Components/Shop/BlogCard.vue, Pages/Shop/Blog/Show.vue |
blog-post | Blog article body | Pages/Shop/Blog/Show.vue |
faq-item / faq-question / faq-answer | FAQ entry / question / answer | Components/Shop/FaqAccordion.vue |
blog-hero-overlay / blog-hero-content / blog-hero-title / blog-hero-subtitle | Blog listing banner: dark image overlay, inner content box, headline, subtitle | Pages/Shop/Blog/Index.vue |
blog-category-bar / blog-category-pills / blog-category-pill | Blog category filter strip, its pill row, one pill | Pages/Shop/Blog/Index.vue |
blog-listing-body / blog-listing-layout / blog-grid | Blog listing content column, sidebar+main row, post grid (featured + main) | Pages/Shop/Blog/Index.vue |
blog-sidebar / blog-sidebar-widgets / blog-sidebar-title / blog-sidebar-category / blog-sidebar-tag / blog-sidebar-sort-option | Blog sidebar column, widget stack, widget heading, category button, tag button, sort radio row | Pages/Shop/Blog/Index.vue, Components/Shop/BlogSidebar.vue |
blog-footer | Blog listing footer description band | Pages/Shop/Blog/Index.vue |
blog-footer-text | Rendered rich-text body of the blog listing footer band (v-html, inside .prose) | Pages/Shop/Blog/Index.vue |
faq-footer-text | Rendered rich-text body of the FAQ listing footer band (v-html, inside .prose) | Pages/Shop/Faq/Index.vue |
blog-footer-toggle | "Read more / read less" button under the blog footer text | Pages/Shop/Blog/Index.vue |
faq-footer-toggle | "Read more / read less" button under the FAQ footer text | Pages/Shop/Faq/Index.vue |
blog-footer-inner, faq-footer-inner | Inner wrapper of the footer band. Carries no alignment: the rich-text editor decides per paragraph. Set text-align: center here to centre the whole band again | Pages/Shop/Blog/Index.vue, Pages/Shop/Faq/Index.vue |
blog-card-vertical / blog-card-compact / blog-card-image / blog-card-image-link / blog-card-body / blog-card-excerpt / blog-card-meta | Blog card layout wrapper, image box + its link, text body, excerpt, meta row | Components/Shop/BlogCard.vue (all layouts) |
blog-post-hero-overlay / blog-post-hero-content | Blog post hero overlay and inner content box | Pages/Shop/Blog/Show.vue |
blog-post-content / blog-post-body / blog-post-footer / blog-post-taxonomy / blog-post-author | Blog post content column, rendered body, footer block, categories+tags block, author box | Pages/Shop/Blog/Show.vue |
blog-share / blog-share-label | Blog post share row and its label | Components/Shop/BlogShareButtons.vue |
blog-recent-posts / blog-recent-posts-grid / blog-recent-posts-carousel | Recent-posts strip under a post: section, desktop grid, mobile carousel | Components/Shop/BlogRecentPosts.vue |
faq-hero-overlay / faq-search | FAQ banner overlay, search box wrapper | Pages/Shop/Faq/Index.vue |
faq-category-bar / faq-category-pills / faq-category-pill | FAQ category strip, pill row, one pill | Pages/Shop/Faq/Index.vue |
faq-body / faq-layout / faq-main / faq-list / faq-empty / faq-footer | FAQ content column, sidebar+main row, main column, question list, empty state, footer band | Pages/Shop/Faq/Index.vue |
faq-sidebar / faq-sidebar-widgets / faq-sidebar-category | FAQ sidebar column, widget stack, category button | Pages/Shop/Faq/Index.vue |
faq-toggle / faq-answer-panel | FAQ question row (the clickable header) and the answer panel that holds its padding/border | Components/Shop/FaqAccordion.vue, Components/Shop/Blueprints/FaqSection.vue |
faq-section-list | Item list inside the FAQ blueprint | Components/Shop/Blueprints/FaqSection.vue |
faq-search-autocomplete / faq-search-input / faq-search-dropdown / faq-search-clear | FAQ search root, input (desktop + mobile overlay), results dropdown, clear button | Components/Shop/FaqSearchAutocomplete.vue |
service-card | Service listing item | Components/Shop/ServiceCard.vue |
service-detail | Service detail root | Pages/Shop/Services/{Show,ShowBooking}.vue |
Filters, pagination, forms, dialogs
| Hook | Element | Where |
|---|---|---|
product-filter | A filter control | Components/Shop/ProductListingSidebar/Variants/{default,simple,top}.vue |
filter-group | A filter section/group | same as above |
filter-bar | Desktop horizontal filter bar root (top variant) | ProductListingSidebar/Variants/top |
filter-bar-row | Pill row inside the bar | ProductListingSidebar/Variants/top |
filter-pill | One filter pill wrapper | ProductListingSidebar/Variants/top |
filter-pill-toggle | The pill <button> itself | ProductListingSidebar/Variants/top |
filter-pill-badge | Active-count badge inside a pill | ProductListingSidebar/Variants/top |
filter-pill-panel | Dropdown panel under a pill | ProductListingSidebar/Variants/top |
filter-sidebar | Desktop filter sidebar root (left rail) | ProductListingSidebar/Variants/{default,simple} |
active-filters | Active-filter chip row/card | ProductListingSidebar/Variants/top (desktop row + drawer row), Components/Shop/ProductListingFilters.vue |
active-filters-label | "Active filters" label | same as above |
active-filter-chip | One removable filter chip | same as above |
active-filters-clear | Clear-all / reset control | ProductListingSidebar/Variants/top, ProductListingFilters.vue |
filter-toggle | FILTER open/close button on the listing page (mobile + closable desktop) | Pages/Shop/ProductListing/Variants/{default,simple,no_banner}/ProductListing.vue |
filter-drawer | Mobile filter drawer root (teleported, carries .shop-layout itself) | ProductListingSidebar/Variants/{default,simple,top} |
filter-drawer-backdrop | Mobile drawer backdrop (teleported, no .shop-layout) | same as above |
filter-drawer-header | Drawer header row | same as above |
filter-drawer-close | Drawer close button | same as above |
filter-drawer-clear | Drawer footer "clear filters" button | same as above |
filter-drawer-apply | Drawer footer "apply filters" button | same as above |
filter-color-swatches | Color swatch grid in a filter | ProductListingSidebar/FilterColorSwatches.vue |
filter-color-swatch | One color swatch button | ProductListingSidebar/FilterColorSwatches.vue |
pagination | Pagination control | Components/Shop/Pagination/Variants/{default,load_more}/Pagination.vue (dispatcher: Components/Shop/Pagination.vue) |
load-more-btn | "Show more" append button (load_more variant) | Components/Shop/Pagination/Variants/load_more/Pagination.vue |
form-field | Labelled field wrapper | Components/InputFild.vue, Shop/Filters/CustomInput.vue, auth pages/dialogs |
form-input | Raw <input> / <textarea> | Components/InputFild.vue, Shop/Filters/CustomInput.vue |
form-submit | Primary submit button | auth pages, dialogs, profile sections, PrimaryBtn usages |
shop-dialog | Storefront modal panel | LoginDialog.vue, RegisterDialog.vue, ForgotPasswordDialog.vue, ResetPasswordDialog.vue |
Notes on the filter family:
- Pill/chip colors are inline styles.
filter-pill-toggle,filter-pill-badge,active-filter-chip,active-filters-label,active-filters-clearand the drawer footer buttons get their colors, radius and padding from inline styles driven by the admin filter-bar settings. Inline style beats any stylesheet, so CSS overriding those same properties needs!important:cssProperties the inline style doesn't set (e.g..shop-layout .filter-pill-toggle { border-radius: 8px !important; }text-transform,box-shadow) work without it. - Desktop pill dropdowns are NOT teleported —
.shop-layout .filter-pill-panelworks normally. - The mobile drawer IS teleported.
filter-drawersits on the same element as.shop-layout→ use.shop-layout.filter-draweror bare.filter-drawer.filter-drawer-backdropdoes not carry.shop-layout→ target it as a bare class.
Page roots & titles
Every storefront page carries page-<slug> on its outer wrapper and page-title on its main heading.
| Hook | Page file |
|---|---|
page-title | main <h1>/<h2> on every page (28 files) |
page-cart | Pages/Shop/Cart.vue |
page-checkout / -payment / -confirmation | Pages/Shop/Checkout.vue, Checkout/Payment.vue, Checkout/Confirmation.vue |
page-product | Pages/Shop/Show.vue |
page-product-listing | Pages/Shop/ProductListing/Variants/*/ProductListing.vue |
page-blog-listing / page-blog-post | Pages/Shop/Blog/{Index,Show}.vue |
page-faq | Pages/Shop/Faq/Index.vue |
page-services / page-service-detail | Pages/Shop/Services/{Index,Show,ShowBooking}.vue |
page-order-detail | Pages/Shop/Orders/Show.vue |
page-account-dashboard/-profile/-orders/-addresses/-loyalty/-favorites/-coupons | Pages/User/*.vue, Pages/Account/*.vue |
page-auth-forgot-password/-reset-password/-verify-email/-confirm-password/-complete-profile | Pages/Auth/*.vue, Pages/Account/Auth/CompleteProfile.vue |
page-withdrawal | Pages/Shop/Withdrawal/*.vue |
page-order-lookup | Pages/Shop/OrderLookup/Form.vue |
page-download | Pages/Shop/{DigitalDownload,GiftCardDownload}.vue |
page-error | Pages/Errors/{403,404}.vue |
page-password-protected | Pages/Pages/PasswordProtected.vue |
5. Known gaps & notes
Pages/Pages/Simple.vue(custom builder canvas) has no page-root hook by design — it owns the full canvas and its content is per-blueprint (already hooked).Teleported panels carry
.shop-layouton themselves, so a.shop-layout .hookdescendant selector won't self-match — target.shop-layout.hookor the bare class. This applies tonav-dropdownand to every panel hook that sits on the same element:mega-menu-panel,nav-category-menu-panel,categories-grid-menu-panel,parent-category-menu-panel.mobile-menu,mobile-menu-panel,mobile-menu-backdrop,mobile-search-overlay,filter-drawerandfilter-drawer-backdropare teleported too. The panels' inner roots (mega-menu,nav-category-menu, …) are ordinary descendants and match normally.css/* Style the mega menu only — not the other three dropdown types. */ .mega-menu-panel { padding-top: 0; } /* the teleported panel */ .shop-layout .mega-menu { border-radius: 16px; } /* its content root */Four header variants inline their desktop menu instead of using
DesktopMenuItems.vue:large,large_sticky,double_decker,double_decker_static. They now carry the samenav-item/nav-link/*-panelhooks as the shared component, so one rule works across all eight variants. If you add a menu type, hook it in all five places.Announcement bar lives inline inside each header variant. It now has a
header-announcementwrapper hook, but the bar's internals belong toAnnouncementBar.vueand are not individually hooked.Admin (
/admin) is intentionally not hooked — it's Merzio-branded and not merchant-themeable. These hooks are storefront-only.Shared input wrappers (
InputFild,Filters/CustomInput) also render in a few admin-adjacent profile sections; the.shop-layoutprefix keeps brand/merchant CSS from leaking there.
6. Adding a new hook
- Pick a bare-kebab name; reuse an existing one if the concept matches.
- Prepend it to the element's existing
class="…"(or add a staticclass="…"next to a:classbinding — Vue merges them). Never mutate:class/:style. - Add it once in the shared component if it only renders in one context; otherwise per-usage.
- Record it in this document (area table + location).
npm run build, then verify the class appears in the DOM (document.querySelectorAll('.shop-layout .your-hook')).
Appendix A — Complete hook inventory
This is the full list of stable, semantic hook classes in the storefront, including the many that pre-date the systematic hook effort (they are the components' own <style scoped> class selectors, so they are stable and targetable). Sections 4–5 above are the curated primary set; this appendix is the exhaustive catalogue.
Two kinds of hook — important
- Inert hooks (most of what §4 added:
section-title,product-card,header-*,page-*,account-*, …) carry no CSS by default → both Brand CSS and Vlastný kód style them freely, no!important. - Styled hooks (most items below that live in a component's
<style scoped>:product-detail-*,product-price-*,desktop-sidebar-*,checkout-section-*,card-*, …) already carry the component's own scoped rules (specificity ~0,2,0). To override them: Vlastný kód wins on equal specificity (it's unlayered + injected last); Brand CSS (@layer brand) may need a more specific selector (e.g..shop-layout .product-detail .product-detail-info) or a CSS variable, because unlayered scoped rules outrank a cascade layer. This is the §2 boundary, per-hook.
Root / layout
shop-layout (Layouts/ShopLayout.vue), page-responsive-pad (Pages/Pages/Simple.vue), page-title, and the page-* body-identity family (one per page — see §4 "Page roots").
Header / navigation
Header shell (all 8 Navigation/Variants/*/Header.vue): site-header, header-announcement, header-nav, header-row / header-middle-row, header-top-bar, header-top-links, header-top-link, header-top-link-image, header-logo, header-nav-links, header-action-item, header-switchers, header-breadcrumb, header-actions, header-search, header-search-toggle, header-menu-toggle; plus nav-overflow, nav-overflow-toggle, nav-overflow-panel. (Not every hook exists in every variant — see the §4 table for which.)
Action widgets: header-cart (CartWidget.vue), header-wishlist (FavoritesWidget.vue), header-account (UserAccountWidget.vue), favorite-button-header-icon (Products/FavoriteButton.vue).
Menus: nav-item, nav-link, nav-link-icon, nav-link-label, nav-dropdown, nav-dropdown-toggle, nav-dropdown-list, nav-dropdown-link; panel hooks mega-menu-panel, nav-category-menu-panel, categories-grid-menu-panel, parent-category-menu-panel; content roots and their inner families mega-menu-*, nav-category-menu-*, categories-grid-menu-*, parent-category-menu-* (§4). nav-link-custom-text / -custom-surface / -custom-hover-text / menu-hover-fallback are behavioural, not hooks — do not target them.
Sidebar category menu: category-menu, -header, -toggle, -list, -item, -link, -item-toggle, -submenu, -panel (CategoryMenu/Variants/*, CategoryMenuItem.vue, ProductListingSidebar/Variants/top); the older styled desktop-sidebar-* family sits on the same elements.
Breadcrumb: breadcrumb, breadcrumb-scroll, breadcrumb-list, breadcrumb-item, breadcrumb-link, breadcrumb-current, breadcrumb-separator (Breadcrumb.vue, simple/Header.vue).
Logo: logo, logo-image, logo-text (Shop/Logo.vue); logo-block-container and logo-link belong to the footer/nav builder (Blocks/LogoBlock.vue), not the header.
Switchers: language-switcher (LanguageSwitcher.vue), language-switcher-block, currency-selector.
Header height is exposed as the CSS variable
--shop-header-height(set by each variant's resize observer, consumed atLayouts/ShopLayout.vue) — there is noheader-heightclass.
Mobile menu
mobile-menu, mobile-menu-backdrop, mobile-menu-header, mobile-menu-close, mobile-menu-back, mobile-menu-body, mobile-menu-account, mobile-menu-switchers, mobile-menu-blocks-above, mobile-menu-accordion, mobile-menu-panel, mobile-menu-item-image, mobile-menu-link, mobile-menu-headline, mobile-menu-subcategory (MobileMenu.vue); mobile-menu-block (MobileMenuBlockRenderer.vue); mobile-search-overlay, -header, -title, -close (MobileSearchOverlay.vue).
Footer
site-footer, footer-grid, footer-row, footer-above, footer-block-above, footer-bottom-bar; footer-builder, footer-column, footer-content-wrapper, footer-row-grid (Variants/builder/Footer.vue); logo-footer / logo-footer-image (LogoFooter.vue — footer logo link + image), merzio-footer-branding (MerzioFooterBranding.vue).
Product card & category
product-card, product-card-image, product-title, product-badge, product-availability-text (ProductCard variants + Products/ProductInfo.vue); category-card, category-card-image, category-card-title (CategoryCard.vue); category-menu-link-styled (CategoryMenuItem.vue).
Product price (family — ProductPrice.vue, ProductInfo.vue)
product-price, product-price-row, product-price-current, product-price-regular, product-price-unit, product-price-package, product-price-without-vat, product-price-lowest-30d.
Quatro instalment calculator (family — Shop/QuatroCalculatorButton.vue)
quatro-calculator, quatro-calculator-link, quatro-calculator-image, quatro-calculator-label, quatro-calculator-note.
Rendered on the product detail (via Products/ProductInfo.vue, so both product-detail theme variants get it) only when the merchant has the calculator enabled and the price sits inside Quatro's financed range. The component has no scoped styles, so both Brand CSS and merchant Vlastný kód win without !important.
/* Turn the default bordered block into a plain inline button. */
.shop-layout .quatro-calculator { border: 0; padding: 0; }
.shop-layout .quatro-calculator-note { display: none; }
/* Or make it a full-width call-out. */
.shop-layout .quatro-calculator {
display: flex;
width: 100%;
background: #fff7ed;
border-color: #fdba74;
border-radius: 12px;
}
.shop-layout .quatro-calculator-image { transition: transform .2s ease; }
.shop-layout .quatro-calculator-link:hover .quatro-calculator-image { transform: scale(1.03); }Do not restyle the button artwork itself (recolour, crop, distort) — Quatro requires their graphic used verbatim. Spacing, the surrounding block and the note are yours.
Quatro handoff panel (family — Pages/Shop/Checkout/Confirmation.vue)
quatro-handoff, quatro-handoff-title, quatro-handoff-description, quatro-continue-btn, quatro-handoff-countdown, quatro-handoff-cancel, quatro-handoff-note.
Shown on the order-confirmation page for Quatro orders only. Quatro's spec has no customer return URL, so this panel is the handoff point — the customer goes on to Quatro from here, or later from the link in their confirmation e-mail.
quatro-continue-btn carries btn-primary, the admin-controlled theme button (--color-primary / --color-add-to-cart-text) — the same system Add to cart uses — so it follows Vzhľad settings automatically. Note .btn-primary sets its colours with !important, so to recolour just this button, drive the variable instead of the property:
/* Recolour only the Quatro CTA, without touching other primary buttons. */
.shop-layout .quatro-continue-btn { --color-primary: #f97316; --color-primary-hover: #ea580c; }
/* Calmer panel, no countdown. */
.shop-layout .quatro-handoff { border-width: 1px; }
.shop-layout .quatro-handoff-countdown { display: none; }Product detail (family — ProductDetail/Variants/{default,compact}/ProductDetail.vue)
product-detail, product-detail-page, product-detail-layout, product-detail-info, product-detail-info-column, product-detail-title, product-detail-description, product-detail-description-title, product-detail-description-content, product-detail-actions, product-detail-stock, product-detail-tags, product-detail-parameters, product-detail-quantity-discount, product-detail-file-upload, product-detail-recommenders, product-detail-thumbnails, product-detail-swatches (riadok „Ďalšie varianty“ pod názvom); gallery: product-detail-gallery, -gallery-column, -gallery-main, -gallery-sticky, product-gallery (Products/ProductGallery.vue), product-spin, product-spin-frame, product-spin-controls, product-spin-control, product-spin-badge, product-spin-thumb, product-spin-thumb-badge (360° viewer); blueprint slots: product-detail-blueprints-above-description, -below-description, -below-cart, product-detail-block (each block in a slot); share: share-container, share-icon-button, compact-share-button, compact-share-icon; quantity-input (Products/QuantitySelector.vue).
Product listing / filters / sidebar
product-listing, product-listing-banner-section, listing-block (a block in the top/bottom description), product-filter, filter-group, product-search-container, product-section, product-slider, product-grid-section, featured-products; filter bar/pills (ProductListingSidebar/Variants/top): filter-bar, filter-bar-row, filter-pill, filter-pill-toggle, filter-pill-badge, filter-pill-panel; desktop rail root (Variants/{default,simple}): filter-sidebar; active chips (Variants/top + ProductListingFilters.vue): active-filters, active-filters-label, active-filter-chip, active-filters-clear; listing-page FILTER button (Pages/Shop/ProductListing/Variants/{default,simple,no_banner}): filter-toggle; mobile drawer (all three sidebar variants, teleported): filter-drawer, filter-drawer-backdrop, filter-drawer-header, filter-drawer-close, filter-drawer-clear, filter-drawer-apply; color swatches (FilterColorSwatches.vue): filter-color-swatches, filter-color-swatch; range slider (Filters/CustomRangeSlider.vue): custom-range-slider, slider-styled, slider-connect, slider-handle, slider-origin, slider-label, slider-values, number-input, number-input-group, number-input-label, number-inputs; sidebar (ProductListingSidebar*): desktop-sidebar, -nav, -menu, -menu-box, -item, -link, -children, -headline, -text, -toggle, -block, -block-above, -block-below, -banner, -banner-image, -banner-overlay; sort-fade-overlay (ProductListingSorting.vue); pagination + load-more-btn (Pagination/Variants/{default,load_more}/Pagination.vue; dispatcher Pagination.vue).
Cart / checkout
cart-drawer, cart-item, cart-added; checkout-form, card-payment-form, merzio-pay-form, checkout-method-badges, form-field, form-input, form-radio, form-submit; checkout sections (CheckoutForm.vue): checkout-section-personal-info, -company-info, -billing-address, -delivery-address, -shipping-method, -payment-method, -order-note, -country / -card-payment (step layout only); order-summary, payment-status; checkout method options (CheckoutMethodOption): checkout-method-card (+ is-selected), checkout-method-radio, checkout-method-logo, checkout-method-title, checkout-method-description, checkout-method-meta, checkout-method-price, checkout-method-extras (PaymentStatus.vue), free-shipping-info (FreeShippingInfo.vue); add-to-cart-btn, product-card-cart-btn, primary-btn / btn-primary.
Account / auth
account-card, account-nav, account-nav-link (Account pages, Layouts/UserAccountLayout.vue); order-detail, order-line (Shop/Orders/Show.vue); shop-dialog (login/register/forgot/reset dialogs). Page identity classes: the page-account-* / page-auth-* family (§4).
Blog / FAQ / services / reviews
Blog: blog-card, blog-post, blog-title (BlogCard.vue), blog-hero-section, blog-show-hero-section, blog-sort-radio, blog-swiper, blog-hero-overlay, blog-hero-content, blog-hero-title, blog-hero-subtitle, blog-category-bar, blog-category-pills, blog-category-pill, blog-listing-body, blog-listing-layout, blog-grid, blog-sidebar, blog-sidebar-widgets, blog-sidebar-title, blog-sidebar-category, blog-sidebar-tag, blog-sidebar-sort-option, blog-footer, blog-card-vertical, blog-card-compact, blog-card-image, blog-card-image-link, blog-card-body, blog-card-excerpt, blog-card-meta, blog-post-hero-overlay, blog-post-hero-content, blog-post-content, blog-post-body, blog-post-footer, blog-post-taxonomy, blog-post-author, blog-share, blog-share-label, blog-recent-posts, blog-recent-posts-grid, blog-recent-posts-carousel, blog-grid-section. FAQ: faq-hero-section, faq-item, faq-question, faq-answer. Services: service-card, service-detail. Reviews (Sections/ReviewsCarousel.vue): review-list, review-item, reviews-swiper, reviews-swiper-prev-btn, reviews-swiper-next-btn.
Blueprints — root identity (Components/Shop/Blueprints/**)
hero-section-blueprint, banner-grid-blueprint, banner-section-blueprint, advanced-banner-blueprint, banner-with-product-blueprint, product-grid-blueprint, category-grid-blueprint, blog-grid-blueprint, newsletter-blueprint, faq-section-blueprint, testimonials-section-blueprint, features-section-blueprint, contact-form-blueprint, contact-info-bar-blueprint, card-blueprint, benefit-card-blueprint, contact-card-blueprint, accordion-blueprint, tabs-blueprint, divider-blueprint, image-block-blueprint, image-carousel-blueprint, layout-section-blueprint, map-embed-blueprint, downloadable-file-blueprint, headline-block-blueprint, button-block-blueprint, product-carousel-blueprint, product-recommender-block-blueprint, blueprint-renderer-blueprint, custom-blueprint, ups-statistics-blueprint, contact-form-{checkbox,select,textarea,text-input,file-upload}-blueprint. Shared per-section hooks: section-title, section-subtitle, section-text, section-button.
Blueprints — inner hooks
- Hero:
hero-carousel,hero-height-custom,hero-swiper-prev-btn,hero-swiper-next-btn,hero-content-padding-responsive. - Banner grid:
banner-grid-swiper,banner-grid-slide,banner-grid-pagination,banner-grid-pagination-dot,banner-grid-custom-height. - Banners:
banner-slider,banner-slide,banner-height,banner-product-swiper. - Grids:
category-swiper,product-swiper,category-grid-section,product-grid-section. - Newsletter:
newsletter-container,newsletter-form,newsletter-header,newsletter-description,newsletter-section. - Divider:
divider-line. Image:image-block,image-block-img,image-placeholder,image-placeholder-builder. - Map embed:
map-embed-container,map-embed-iframe,map-embed-placeholder,map-embed-title,map-embed-builder-badge. - Card / benefit-card / contact-card families:
card-content-container,card-nested-content,card-headline,card-headline-wrapper,card-subtitle,card-subtitle-wrapper,card-text,card-text-wrapper,card-button;benefit-card-icon,-icon-wrapper,-image,-content-container,-nested-content;contact-card-icon,-icon-wrapper,-image,-content-container,-nested-content. - Contact-form inputs:
contact-form-input,contact-form-select,contact-form-textarea,contact-form-checkbox,contact-form-field. - Product recommender:
product-recommender-block,product-recommender-carousel,product-recommender-grid,arrow-button,arrow-icon,pagination-container; miniatúry (ďalšie varianty):product-swatches,product-swatches-title,product-swatches-list,product-swatch,product-swatch-current,product-swatch-image,product-swatch-label. - Instagram:
instagram-feed-section,instagram-feed-block.ups-statistics-container.
Nav-builder blocks (Navigation/Variants/builder/Blocks/**)
blueprint-block, contact-info-block, courier-logos-block, courier-logos-container, courier-logo-item, payment-logos-block, payment-logos-container, payment-logo-item, social-links-block, text-block, text-block-container, spacer-block, divider-block, menu-column-block, image-block, logo-block-container, language-switcher-block.
Misc storefront widgets
Flash (StorefrontFlash.vue, BEM): storefront-flash-overlay, storefront-flash-card (+ __icon __text __body __actions __btn __close). AI chat (StorefrontAssistant/ChatWidget.vue, BEM): storefront-ai-chat (+ __header __bubble__user-bubble __chip __input __send __disclaimer). product-assistant-wizard, popup-container, popup-content (PopupDisplay.vue), back-to-top (BackToTopButton.vue), bento-mobile-carousel.
Deliberately excluded (not storefront hooks)
Tailwind utilities; Swiper library internals (swiper-slide, swiper-button-*, swiper-pagination*, swiper-wrapper); Tailwind-plugin classes (prose*, scrollbar-thin, tabular-nums); sr-only / safe-area-* / no-underline utility-ish; state flags (show-popup, success-state, menu-dropdown-open, …); and the admin/Merzio scope (admin-layout, admin-shell-bg, merzio-portal) which is intentionally not merchant-themeable.