Design v1 · 2026

Templates.

Alle Templates für den Dr. Knoop Shopify-Shop. Jedes Template ist responsive (Desktop + Mobile) und nutzt das gemeinsame Design System aus assets/design-system.css.

11 Templates 1 Styleguide Responsive Desktop + Mobile Shared Design System

01 — Core

Storefront-Kern

Hero + Featured-Card + Kategorien + Sparpaket + Produktfinder + Bestseller + Reviews + Ratgeber + Newsletter.

startseite.html

Kategorie · Hund

Collection Page für Hund — Filter, Produkt-Grid, kompakter Sparpaket-Callout, FAQ.

kategorie-hund.html

Kategorie · Katze

Collection Page für Katze — 7 Produkte, Katzen-spezifische Bereiche & FAQs.

kategorie-katze.html

Produkt-Detail-Seite mit Galerie, Varianten, ATC, Tabs (Zutaten/Wirkung/Anwendung/FAQ), Cross-Sell.

Line Items, Mengen-Steuerung, Zwischensumme, Free-Shipping-Progressbar, Trust-Icons, Cross-Sell.

02 — Content & Conversion

Landingpages & Ratgeber

Dedizierte Landingpage: 3 Pakete im Vergleich, Vorteile, Vergleichs-Tabelle, Testimonials, FAQ.

Interaktiver Symptom-Check als Section auf der Startseite (Section 07). 4 Schritte: Tier → Bereich → Anlass → Ergebnis mit Produkt-Empfehlung.

startseite.html#produktfinder

Blog-Übersicht mit Suche, Kategorie-Filter, Featured-Article, Sprechstunden-Protokolle, Artikel-Grid.

Ratgeber Artikel

Einzelner Artikel mit Hero-Bild, Meta-Zeile, Table-of-Contents, Content, Related Articles, Newsletter-CTA.

ratgeber-artikel.html

03 — B2B & Account

Fachhändler & Login

B2B / Fachhändler-Portal

Landing für Tierärzte, Zoofachhandel und Züchter — Staffelpreise, Rechnungskauf, Fachhändler-Antrag mit Formular.

Zentrierte Login-Card mit Privatkunde/B2B-Tabs, Google/Apple-SSO, Passwort-vergessen-Modal, Trust-Panel rechts.

04 — Brand

Marken-Seiten

Marken-Story, Dr. Knoop Portrait, Timeline (20+ Jahre Praxis), Werte, Team, Presse-Nennungen.

Design System-Dokumentation: Farben, Typography, Radien, Shadows, Icons, Buttons, Pills, Cards, Forms.

styleguide.html

05 — Archiv

Backup & Legacy

Startseite Backup

Unveränderte Kopie der Desktop-Startseite vor Mobile-Merge. Als Sicherungsnetz für Rollback.

startseite.backup.html

Startseite Mobile (Legacy)

Standalone Mobile-Version bevor der Merge in die responsive startseite.html erfolgte.

startseite-mobile.html