Composants B2C dans le kit
60+
1,2 s
LCP médian dans le frontend en production
−65 %
Time-to-launch par nouvelle page
50+
Backends connectables
Ce que contient le kit
Huit groupes de composants couvrent l'ensemble du funnel B2C – découverte, produit, conversion, service. Chaque composant est testé, performant et accessible. Une fois dans la bibliothèque UI, utilisable dans chaque frontend et chaque marque.
B2C
Banner Basic
A full-width promotional banner with image, headline and a call-to-action button, great for announcements, campaigns or sales.
B2C
Banner Integrated
A banner that blends into surrounding content with media, text and a button, ideal for in-page promotions between sections.
B2C
Banner Showcase
A bold, image-led showcase banner with heading and call-to-action. Built to highlight a single hero offer or campaign.
B2C
Breadcrumbs
A trail of links to the current page, with the home page always prepended automatically. It can draw items from a bound breadcrumb query or from manual entries, which take precedence when both are set.
B2C
Category Card Grid
A responsive grid of category cards to help shoppers jump into a product category from the homepage or landing pages.
B2C
Category Card Slider
A horizontal, swipeable carousel of category cards, great for showcasing many categories without taking up much vertical space.
B2C
Container
A flexible empty container that can hold any blocks. Use it to combine and arrange content freely.
B2C
Footer
The page footer with link columns on desktop and collapsible sections on mobile, the standard place for menus, contact info and social links.
B2C
Basic Header
A compact site header with logo, navigation, an optional action button and a built-in locale switcher, without the cart, search and account icons of a full shop header. Well-suited to content sites and smaller catalogues.
B2C
Shop Header
A full shop header with search, cart, wishlist and account icons plus a multi-level menu, built for stores with many categories and products.
B2C
Hero Slider
A full-width hero carousel that rotates between multiple slides, each with its own image or video background, typically the first thing visitors see on a landing page.
B2C
Media & Text
A side-by-side layout pairing a large image or video with text content and an optional button, great for storytelling sections.
B2C
Newsletter Signup
A full-width signup section to collect email subscribers, looks particularly good near the footer to capture visitors before they leave.
B2C
Page Hero
A clean text hero introducing a page with a heading and optional subline. A lightweight alternative to image heroes.
B2C
Page Not Found
The 404 page shown when a visitor reaches a missing URL. Includes a friendly message and a button back to safety.
B2C
Pop-up
A modal overlay that opens automatically on page load, showing one content block, an info, newsletter or promotion pop-up, with configurable appearance and close behavior.
B2C
Product Detail
The foundation of every Product Detail Page, a media gallery on one side and a product-information column (price, variants, rating, stock, add-to-cart) on the other. It renders the single product bound by the page's Product query.
B2C
Product Listing
A product grid with heading, filters, sorting and pagination. The standard category page for browsing a catalogue.
B2C
Product Reviews
Customer reviews for a product, an overall rating summary computed from the product's linked reviews, with filters and pagination. It runs its own Product query, typically bound to the same product as the product-detail section above it.
B2C
Product Slider
A swipeable row of product tiles bound to a curated or queried product set. Great for "new arrivals", "bestsellers" or related products.
B2C
Product Slider – Showcase
A product slider paired with a promotional banner (heading, image or video, button) up front, combines a campaign message with a curated, query-bound product row.
B2C
Promotion Banner
A promotion banner with an optional countdown, code-copy button, and CTA.
B2C
Scroll Anchor
An invisible jump target identified by an anchor name that is unique per page. Link to that name from anywhere to scroll visitors straight to this spot.
B2C
Search Result Hero
A hero strip at the top of the search results page showing the searched term and number of hits. The count comes from the same Product query that feeds the results grid, and the search term is read from the ?q= URL parameter.
B2C
Top Bar
A slim bar above the header for service links, language switcher and an optional light/dark mode toggle.
B2C
USP Banner
A thin banner of selling points like "free shipping" or "easy returns", typically sits above or below the header to reassure shoppers.
B2C
Accordion
A collapsible list of question-and-answer items. Perfect for FAQs or expandable details that save vertical space.
B2C
Banner Basic
A promotional banner with a caption, headline, subline and a call-to-action over a full-bleed background image or video. Drop it into any section or content slider alongside cards and other banners.
B2C
Banner Integrated
A compact banner that blends into surrounding content, combining an icon, heading, subline and up to two call-to-action buttons. Works with or without a background image inside a content slider or grid.
B2C
Banner Showcase
A bold, image-led showcase banner that foregrounds a media asset alongside a heading, a short description and a call-to-action. Highlights a single offer, product or campaign inside a slider or grid.
B2C
Button
A clickable call-to-action button. Link visitors to any page, anchor or external URL.
B2C
Category Card
A visual entry point for a product category, pairing an image or video with a title, an optional flag badge and a link to the category page. Used inside Category Card Grid and Slider sections.
B2C
Filter Bar
Filter controls for a product listing that read the available facets, sortings and totals from the same product query as the grid they accompany. Shows a live product count and active filters, with optional quick filters and inline sorting.
B2C
Footer Menu
A titled column of links for the footer. Group related pages like "Help", "Company" or "Legal".
B2C
Hero Slide
A single slide for the Hero Slider, pairing a full-bleed background image or video with captions, a headline, subline and call-to-action buttons.
B2C
Embedded Page
Embed an external web page or widget, forms, calculators, booking widgets or maps, inside your page. The embedded site must permit framing; some sites block it through their security headers.
B2C
Load More
A "load more" control for long lists, an alternative to pagination. Shows how many of the available products are already loaded.
B2C
Image
A single image or video with an optional lightbox. Drop it into any section to add standalone visual content.
B2C
Mega Menu
A large multi-column dropdown that opens below the header, building its columns from a queried category tree, curated navigation items, manually authored items, or a mix. Used in a header's desktop slot for shops with many categories and subcategories.
B2C
Basic Menu
A simple horizontal navigation menu with manually authored dropdowns up to three levels deep. Used in a header's desktop slot, best for sites with a small number of top-level pages.
B2C
Side-by-Side Menu
A drawer-style navigation that opens from the header and shows categories and subcategories side by side, great for deep catalogues.
B2C
Mobile Menu (Basic)
A simple slide-in mobile menu paired with the Basic Header. List pages and links for small-screen visitors.
B2C
Mobile Menu (Shop)
A full mobile menu for shops with a category grid and drill-down navigation, designed for catalogues with many categories.
B2C
Pagination
Page-number controls for long lists. Lets visitors step through products, blog posts or search results.
B2C
Info Pop-up
An informational pop-up: icon, heading, text and an optional call-to-action. Ideal for announcements like shipping delays or new features. Placed inside a Pop-up section.
B2C
Newsletter Pop-up
A newsletter sign-up pop-up: icon, heading, text and an email input. Grow your subscriber list without interrupting the landing experience. Placed inside a Pop-up section.
B2C
Promotion Pop-up
A promotional pop-up: icon, heading, text, a call-to-action, and either a discount code or a countdown. Drive immediate sales during a campaign. Placed inside a Pop-up section.
B2C
Product Title & Brand
Shows the product's name and brand at the top of the product page.
B2C
Benefits Box
A short bulleted list of product benefits or trust badges (e.g. free shipping, easy returns) on the product page.
B2C
Product Description
The long-form product description and details on the product page. Supports rich text formatting.
B2C
Energy Label
EU energy efficiency label with class image, lightbox preview and an optional product data sheet link.
B2C
Price
The product price block, showing the price of the currently selected variant along with any discount or strikethrough price and tax info. The displayed price updates as the shopper changes their variant selection.
B2C
Rating
Shows the product's average star rating and the number of reviews.
B2C
Variant Options
Inline variant pickers (size, color, etc.) shown as buttons or swatches on the product page. Selecting an option updates the shared variant selection, so the price, stock and gallery blocks on the same page update to match.
B2C
Product Variants (Multiple)
A multi-quantity variant picker for products bought in several variants at once, sets, packs or wholesale ordering. When the variants include a color option, they are grouped by color automatically.
B2C
Product Image Gallery
A gallery of product images and videos with thumbnails and zoom, the main visual on the product page. Falls back to the product's cover image when no gallery images are configured.
B2C
Product Grid
A responsive grid of product tiles for a listing or category page, with add-to-cart directly from each tile. Bind it to a collection or query to populate products; filter, sort and pagination blocks in the same section share that bound query.
B2C
Sort Selector
A dropdown for shoppers to sort a product listing. By price, popularity, newness and more.
B2C
USP Item
A single selling point with icon and short text. Drops into the USP Banner alongside other reassurance items.
B2C
Withdrawal Button
A statutory right-of-withdrawal button (EU Widerrufsbutton, § 356a BGB). Opens a form with name, order/contract reference and email, and submits the withdrawal. Place it in the footer.
Aperçu en direct
Pas une liste de pièces détachées – des pages d'exemple finies avec nos Frontend Blueprints
Avec nos Frontend Blueprints, vous ne voyez pas seulement des composants isolés, mais des pages B2C complètes en exemple, composées à partir du kit. En une minute, vous découvrez ce que vous pouvez mettre en production en quelques jours plutôt qu'en quelques semaines.
Page d'accueil
Catégorie
Fiche produit