Zum Inhalt
← Rezepte
Alle Rezepte

Laden vor Ort: Schaufenster, Beratung, Abholung

Fachgeschäft und Einzelhandel vor Ort (Buchhandlung, Fahrradladen mit Werkstatt, Blumenladen, Spielwaren, Unverpackt, Wohnen und Geschenke)

Der Laden verkauft Besuch und Beratung, nicht Versand: Hat er heute offen, was ist neu und was empfiehlt das Team, kann ich etwas reservieren und abholen, gibt es eine Werkstatt oder eine Lesung. Der Hero ist das Schaufenster im Rahmen, darunter die Abteilungen als Bildstreifen, die sich beim Darüberfahren oder Antippen öffnen. Empfehlungen mit Namen, Reservierung ohne Shop, Werkstatt mit Festpreisen, Veranstaltungen. Libre Caslon Display für Überschriften wie auf einem Buchumschlag, Familjen Grotesk für Text. Papier, Kraftkarton und ein Schaufenstergrün. Abgrenzung zu d2c-produkt-zuerst (Versandmarke mit Bento und Warenkorb-Flug) und mode-beauty-kollektion (Kollektion).

Bauplan tokens.css Alle Techniken

Schrift

Schaufenster, Beratung, Abholung

Der Laden verkauft Besuch und Beratung, nicht Versand: Hat er heute offen, was ist neu und was empfiehlt das Team, kann ich etwas reservieren und abholen, gibt es eine Werkstatt oder eine Lesung.

Headline
Libre Caslon Display
Text
Familjen Grotesk

Farbe

  • #F5F1E8
  • #211F1C
  • #E2D3B8
  • #2C2A26
  • #2E5B45
  • #615B51
  • #D9CFBE

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
Dauer
150 (Hover, Farbe), 1000 (Bildstreifen wächst), 300 (Panel, Dialog öffnen), 200 (schließen), 1200 (Schaufenster-Foto öffnet sich einmal)

Aufbau der Seite

SignaturHorizontale Akkordeon-Panels / Akkordeon-Bildgalerie

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Foto im

  1. Heute geöffnet (Status im Kopf aus echten Zeiten; Sonderzeiten wie Advent, Inventur, Feiertage nach Bundesland)Öffnungszeiten mit Live-Status · Kopfzeile
  2. Abteilungen und Themen (drei bis sechs Bildstreifen aus dem eigenen Laden, z. B. Romane, Kinderbuch, Reise oder Stadträder, E-Bikes, Werkstatt; je Streifen ein Satz und der Weg dorthin; mobil senkrechtes Akkordeon)Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie
  3. Neu und empfohlen (Empfehlungen des Teams mit Name und einem Satz, Preis inkl. MwSt.; Reihe mit fünf bis zehn Stücken; kein voller Shop nötig; Aktionen mit Zeitraum nur, wo der Preis frei ist: nicht für Bücher (Buchpreisbindung))Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · ProduktreiheKarussell-Steuerung und Anzeige · FortschrittsleisteProduktkarte mit Bildwechsel · ZweitbildAktion mit Preisangabe nach § 11 PAngV · Zeitraum
  4. Reservieren und abholen (Artikel oder Wunsch als Text, Menge, Abholtag; Bestätigung, ab wann es bereitliegt und wie lange es zurückgelegt wird; ohne Online-Zahlung eine Reservierung, kein Kauf)Vorbestellung mit Abholtag und Zeitfenster · BackstubeFehlerzusammenfassung im Formular · Kompakt über dem Knopf
  5. Werkstatt und Service (nur Läden mit Werkstatt: Festpreise je Leistung mit Stand-Datum, Termin, freiwillig das Europäische Formular für Reparaturinformationen)Speisekarte als Editorial · Salon-PreiseReparatur-Richtpreise und Reparaturweg · BetriebTermin-Buchung per 2-Klick-Einbettung · VorauswahlZeichnungsfamilie für Produkte, Läden und Leistungen · Filialfassaden
  6. Veranstaltungen (Lesungen, Workshops, Probefahrten, Kranzbinden; Datum, Preis, freie Plätze; Liste nach Monat, Kalender erst ab etwa acht Terminen im Monat)Programm-Kalender mit Liste und Monat · Liste und Monat
  7. Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: Lesung, Workshop oder Probefahrt mit Datum, Uhrzeit, Preis, Plätzen und Anmeldung; freie Plätze nur aus echter Quelle, Vergangenes mit Hinweis statt Fehlerseite)Veranstaltung: Detailseite mit Zuständen · AnmeldungTeilen und In den Kalender · Veranstaltung
  8. Online kaufen (nur mit Shop: Kaufbox mit Gesamtpreis, Versand und Lieferzeit, Gewährleistungshinweis; Raten nur mit allen Pflichtangaben)Kaufbox mit Farb- und Größenwahl · SchnellkaufWarenkorb als Seitenpanel · Hinweis am SymbolEU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste inFinanzierung mit Pflichtangaben und Warnhinweis · Ratenzeile in der KaufboxMehr laden mit Rückkehr an die Stelle · Knopf
  9. Wer hier berät (das Team in einem Satz mit kleinen Porträts, Schwerpunkte und Lieblingsstücke)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
  10. Aus dem Laden (Auswahl eigener Instagram-Bilder selbst gehostet mit Link zum Profil; Live-Feed erst nach Klick)Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Social Feed
  11. Laden und Anfahrt (Adresse als Text, Bus und Bahn, Rad- und Lastenradstellplätze, Stufen am Eingang; Karte per 2-Klick)Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildFirmendaten aus einer Quelle · Friseursalon
  12. Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Sortiment-Schwerpunkt, Bus und Rad, Stufen am Eingang; nie dieselbe Seite mit getauschtem Ortsnamen)Standort-Detailseite · FilialeZeichnungsfamilie für Produkte, Läden und Leistungen · Filialfassaden
  13. Gutscheine (nur mit Zahlungsdienst und Codeverwaltung; sonst „im Laden oder telefonisch“)Gutschein-Konfigurator
  14. Vertrag widerrufen, Gewährleistung, Barrierefreiheit (Footer und mobiles Menü, ohne Login; nur bei Online-Verkauf bzw. Online-Termin nach BFSG prüfen lassen)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Erster Bildschirm: Schaufenster im Rahmen, Name, ein Satz zum Sortiment, Status aus echten Zeiten, zwei Wege. Ladenbesuch geht vor Online-Kauf.
  • Signatur (akkordeon-panels): drei bis sechs Bildstreifen mit echten Fotos aus dem Laden; der aktive Streifen wächst, der Name steht in Libre Caslon Display, ein Satz erscheint. Hover mit 50 ms Verzögerung, Fokus und Tippen sofort; mobil senkrechtes Akkordeon. Kein Text, der vor dem Öffnen gelesen werden muss.
  • Reservieren statt Shop: Wer nur reserviert und im Laden bezahlt, schließt online keinen Kaufvertrag; das klar sagen („Wir legen es bis [Tag] zurück“). Ob dennoch Pflichten greifen, vom Kunden prüfen lassen.
  • Preise inkl. MwSt.; Streichpreise und Aktionen nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); Bücher unterliegen der Buchpreisbindung, keine Rabatte darauf.
  • Online-Verkauf: Gesamtpreis, Versand, Lieferzeit, „zahlungspflichtig bestellen“, Widerrufs-Button, EU-Gewährleistungshinweis (eu-gewaehrleistungshinweis), Hersteller- und Sicherheitsangaben nach GPSR; Ratenwerbung mit allen Pflichtangaben direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).
  • Werkstatt: Festpreise mit Stand-Datum und dem Satz, was nicht enthalten ist; das Europäische Formular für Reparaturinformationen ist freiwillig (reparatur-richtpreise, Variante betrieb).
  • Typografie: Libre Caslon Display nur ab 1.5rem; Kursives in Familjen Grotesk Italic; Preise mit Tabellenziffern.
  • Knöpfe: Schaufenstergrün gefüllt mit allen Zuständen (button-zustaende) für Reservieren und Termin; Nebenwege als versetzte Doppelkontur wie ein Stempel (kontur-button-zeichnen, Variante doppel).
  • Pflichtangaben (Leitfaden 8a): Impressum, Datenschutz; Instagram und Karten erst nach Klick; bei Fahrrad, E-Bike und Elektrogeräten die Hinweise zur Rücknahme von Altgeräten und Batterien nach Elektro- und Batterierecht, vom Kunden prüfen lassen.
  • Filialen als Fassaden-Zeichnungen aus einer Familie (zeichnungsfamilie-produkte, Variante laden): jede Filiale an ihrer Dachform erkennbar, darunter Adresse und Status; Service-Icons und Leerzustände aus derselben Hand. Die Bildstreifen der Signatur bleiben echte Fotos aus dem Laden.
Bild und Ton
  • Licht: Tageslicht durch das Schaufenster, warmes Ladenlicht am Abend.
  • Ausschnitt: Schaufenster von außen, Regale und Tische im Anschnitt, Hände bei der Beratung, Produkte auf dem Ladentisch.
  • Personen: Ja: Team mit Einwilligung; Kundschaft nur mit Erlaubnis.
  • Formate: 4:5, 3:2, 1:1
  • Nicht: Keine Hersteller-Pressebilder als Stimmung, keine Stockfotos von Einkaufstüten, keine fremden Marken ohne Erlaubnis.
  • Anrede: Sie, in jungen Läden du (dann durchgehend)
  • Sätze: Persönlich und konkret: was, für wen, wer empfiehlt es, wann abholen.
  • Haltung: Wie ein gutes Gespräch an der Kasse, kenntnisreich, ohne Verkaufsdruck.
  • Tonproben: Bis 18 Uhr reserviert, morgen ab 10 Uhr abholbereit., [Name] empfiehlt: [Titel], weil …
  • Nicht schreiben: „Shoppingerlebnis“, „Top-Angebote“, „nur noch heute“, Superlative.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Schaufenster-Foto im Rahmen über Spalte 1 bis 7, Name, Satz, Status und Wege über 8 bis 12; mobil Foto oben.
  • Hero-Bild: Echtes Schaufenster oder Laden innen, 4:5, eingefasst in die Ladenfarbe (inset-rahmen).
  • Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5rem), Libre Caslon Display; Name des Ladens oder ein Satz zum Sortiment, kein Label darüber.
  • Handlung: „Reservieren und abholen“ (Schaufenstergrün gefüllt) und „Was gibt es Neues“ bzw. „Werkstatt-Termin“ (Doppelkontur).
  • Zusatz: Status „Heute geöffnet bis …“ aus echten Zeiten direkt unter den Wegen.
  • Sektionsabstand: clamp(64px, 9vw, 136px)
  • Dichte: mittel
  • Raum: Wie ein aufgeräumtes Regal: Empfehlungen mit 24 px Abstand, Preislisten eng (8 px), Bildstreifen mit 6 px Spalt.
  • Spalten: 12
  • Maximale Breite: 1320px
  • Raster: Hero 7/5 (Schaufenster links im Rahmen, Text rechts). Bildstreifen über volle Breite, Höhe clamp(360px, 57vh, 600px). Empfehlungen als Reihe.
  • Radius klein: 2px
  • Radius groß: 6px
  • Schatten: keiner
  • Form: Fast eckig wie Etiketten und Buchrücken; Nebenwege als Doppelkontur.
Vorbilder