--- title: "Academy Area" canonical_url: "https://academy.laioutr.com/en/bereiche/storefront-features" locale: en meta: "og:title": "Academy Area" --- [Go to home](https://academy.laioutr.com/en) - [Storefront features](https://academy.laioutr.com/en/bereiche/storefront-features) # Storefront features **Storefront features** describes what the storefront does for visitors and customers. It introduces the Sections and Blocks of Laioutr UI: content and navigation, product listings, product detail pages, search, cart, customer account and B2B features. It also shows Growth Kits for business models such as shop, content, booking or SaaS, plus tracking, consent and language detection in the components. It is written for e-commerce leads, content managers and Agentic UX Designers who want to know which building blocks are available for their pages. ## [Content and navigation](https://academy.laioutr.com/en/leitfaeden/content-and-navigation) 6 articles This guide introduces the sections for content and navigation: hero, card grid, testimonials, CTA, USP, logos, gallery and promotion, image and video, popups, notices, shop navigation and footer, plus blog, store locator, pricing pages and Teaser Bento. All sections are added in Studio. - [Content sections: hero, banners, grids, quotes, logos and promotion](https://academy.laioutr.com/en/artikel/content-sections-hero-banners-grids-quotes-logos)8 min - [Images and video, popups, notifications and in-page navigation](https://academy.laioutr.com/en/artikel/images-video-popups-notifications-in-page-navigation)7 min - [Set up shop navigation and footer](https://academy.laioutr.com/en/artikel/set-up-shop-navigation-and-footer)10 min - [Build a blog with overview and article pages](https://academy.laioutr.com/en/artikel/build-a-blog-with-overview-and-article-pages)8 min - [Set up the store locator and store pages](https://academy.laioutr.com/en/artikel/set-up-store-locator-and-store-pages)8 min - [Build a pricing page with plan cards and a comparison table](https://academy.laioutr.com/en/artikel/pricing-page-with-plan-cards-and-comparison-table)9 min ## [Products and categories](https://academy.laioutr.com/en/leitfaeden/products-and-categories) 5 articles This guide shows the sections for products and categories: product listings with filters and sorting, infinite loading, the product detail page with data sheet and tabs, product tiles and sliders, brand pages, search, bundles, size advice, recommendations and product comparison. The commerce platform delivers the data through Orchestr. - [Set up product listings with filters and sorting](https://academy.laioutr.com/en/artikel/set-up-product-listings-with-filters-and-sorting)6 min - [Design the product detail page and spec sheet](https://academy.laioutr.com/en/artikel/design-the-product-detail-page-and-spec-sheet)7 min - [Use product tiles and product sliders](https://academy.laioutr.com/en/artikel/use-product-tiles-and-product-sliders)5 min - [Build brand pages and a brand overview](https://academy.laioutr.com/en/artikel/build-brand-pages-and-a-brand-overview)6 min - [Set up search and the search results page](https://academy.laioutr.com/en/artikel/set-up-search-and-the-search-results-page)6 min ## [Cart, account and store](https://academy.laioutr.com/en/leitfaeden/cart-account-and-store) 1 article This guide explains the features around the purchase: the cart with notices, upselling and cross-selling, the wishlist, the customer account, and store stock and click & collect for retailers with physical stores. The connected commerce platform delivers the data, and the presentation is designed in Studio. - [Set up and check the storefront cart](https://academy.laioutr.com/en/artikel/check-and-set-up-the-storefront-cart)5 min ## [B2B](https://academy.laioutr.com/en/leitfaeden/b2b) 1 article This guide shows the B2B features of the storefront: company accounts, approvals, quotes, budgets, order lists, field sales, quick order and downloads. The Growth Kit B2B bundles the matching sections for business customers. The data comes from the connected commerce platform, for example Shopware with B2B Sellers. - [B2B in the storefront: company accounts, approvals, quotes and more](https://academy.laioutr.com/en/artikel/b2b-in-the-storefront-company-accounts-approvals-quotes)6 min ## [Growth Kits and add-ons](https://academy.laioutr.com/en/leitfaeden/growth-kits-and-add-ons) 1 article This guide introduces the Growth Kits, which bundle sections and page templates per business model: shop, content, booking, marketplace, retail, SaaS, publisher and lists. It also covers add-ons for Sites such as bookings, multi-step forms and lead popups. Add-ons are booked in Cockpit. - [Growth Kits: building blocks for each business model](https://academy.laioutr.com/en/artikel/growth-kits-building-blocks-per-business-model)5 min ## [Tracking, language and agents](https://academy.laioutr.com/en/leitfaeden/tracking-language-and-agents) 3 articles This guide explains features built into all components: tracking events and consent, setting up tracking, consent banners with Cookiebot or CCM19, country and language detection with redirection, and the storefront for AI agents through WebMCP. The basis for this is part of every storefront. - [Tracking and consent built into the components](https://academy.laioutr.com/en/artikel/tracking-and-consent-built-into-the-components)6 min - [Set up tracking: connect Google Tag Manager](https://academy.laioutr.com/en/artikel/set-up-tracking-connect-google-tag-manager)10 min - [Set up a consent banner with Cookiebot or CCM19](https://academy.laioutr.com/en/artikel/set-up-a-consent-banner-with-cookiebot-or-ccm19)10 min ## Structured Data ```json { "@context": "https://schema.org", "@graph": [ { "@id": "https://academy.laioutr.com/#website", "@type": "WebSite", "inLanguage": "en", "name": "Default", "url": "https://academy.laioutr.com/", "translationOfWork": { "@id": "https://academy.laioutr.com/#website" } }, { "@id": "https://academy.laioutr.com/en/bereiche/storefront-features#webpage", "@type": "WebPage", "name": "Academy Area", "url": "https://academy.laioutr.com/en/bereiche/storefront-features", "breadcrumb": { "@id": "https://academy.laioutr.com/en/bereiche/storefront-features#breadcrumb" }, "isPartOf": { "@id": "https://academy.laioutr.com/#website" }, "potentialAction": [ { "@type": "ReadAction", "target": [ "https://academy.laioutr.com/en/bereiche/storefront-features" ] } ] }, { "@id": "https://academy.laioutr.com/en/bereiche/storefront-features#breadcrumb", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "name": "Home", "item": "https://academy.laioutr.com/en", "position": 1 }, { "@type": "ListItem", "name": "Storefront features", "item": "https://academy.laioutr.com/en/bereiche/storefront-features", "position": 2 } ] } ] } ```