Konfiguration und Anpassung an das Thema Delaware

Delaware ist das am häufigsten verwendete Theme von Shoporama. Es ist modern, responsiv und basiert auf Tailwind CSS, sodass es sowohl auf dem Desktop als auch auf Mobilgeräten hervorragend funktioniert. Nahezu alle optischen und funktionalen Aspekte lassen sich im Admin-Bereich unter „Design“ anpassen, ohne dass Code geschrieben werden muss. Diese Anleitung führt Sie durch die wichtigsten Einstellungen.

Wo findest du die Einstellungen?

Fast alles wird über „Konto“ → „Webshop“ → „Theme“ → „Einstellungen“ verwaltet. Die Felder sind in Abschnitte wie „Allgemein“, „Unternehmen“, „Theme“, „Badges“, „Produkt“, „Kasse“, „Integrationen“ und „Benutzerdefinierter Code“ gruppiert. Jedes Feld verfügt über eine kurze Beschreibung auf der Seite selbst, sodass Sie häufig nicht in diesem Leitfaden nachschlagen müssen.

Logo, Farben und Badges

Unter „Theme“ kannst du:

• die URL für das Logo und das Favicon einfügen (lade die Datei unter „Theme“ → „Dateien“ hoch und kopiere die URL)
• Die Primär- und Aktionsfarbe als Hex-Code auswählen, z. B. #1a73e8
• Einen Alt-Text für das Logo eingeben (wichtig für Barrierefreiheit und SEO)

Unter „Badges“ passen Sie die Farben der kleinen Symbole an, die bei Produkten angezeigt werden, z. B. „Angebot“, „Neu“, „Nur noch wenige auf Lager “ und „Mengenrabatt“.

Fußzeilenmenüs

Delaware bietet Platz für drei Menüs in der Fußzeile. So fügst du sie hinzu:

1. Gehen Sie zu „Inhalt“ → „Menüs“
2. Erstellen Sie ein neues Menü und geben Sie ihm eines dieser Tags: footer_menu_1, footer_menu_2 oder footer_menu_3
3. Fügen Sie die Menüpunkte hinzu, die Sie anzeigen möchten
4. Der Name des Menüs wird automatisch zur Überschrift in der Fußzeile

Megamenü

Ein Megamenü ist ein großes, mehrspaltiges Dropdown-Menü, das typischerweise als Hauptnavigation verwendet wird, damit Kunden sich schnell in einem großen Sortiment zurechtfinden.

In Delaware wird das Megamenü durch die CSS-Klasse „megamenu“ aktiviert (genau diese Zeichenfolge – nicht „mega_menu“ und ohne Leerzeichen). Die Klasse wird im Feld „Klasse“ des jeweiligen Menüpunkts in der Hauptnavigation eingegeben – nicht im Menü selbst. Sie finden das Feld unter „Inhalt“ → „Menüs “ → „Menüpunkt bearbeiten“.

Die Struktur selbst erfordert drei Ebenen: Die Hauptnavigation enthält einen Menüpunkt mit der Klasse „megamenu“, der auf einen Mega-Menü-Container verweist; der Container hat einen Menüpunkt pro Spalte, der auf ein Spaltenmenü verweist; und der erste Punkt des Spaltenmenüs wird zur Spaltenüberschrift (der Rest sind Links). Wenn du dem ersten Menüpunkt einer Spalte die Klasse „show_image“ zuweist und es sich dabei um eine Kategorie, ein Produkt oder eine Landingpage handelt, wird das Bild des Objekts als Blickfang oben in der Spalte angezeigt.

Zahlungs- und Versand-Symbole in der Fußzeile

Sie müssen keine Bilder von Zahlungskarten oder Versanddienstleistern hochladen. Delaware verfügt über integrierte SVG-Symbole, die Sie über zwei Felder unter „Allgemein“ auswählen können.

Das Feld „Zahlungsmethoden“ (Pfad: payment_methods) ist eine durch Kommas getrennte Liste, z. B.:

dankort,visa,mastercard,maestro,mobilepay,applepay,googlepay

Diese Bezeichnungen sind in Delaware als Symbole integriert:

• dankort, visa, mastercard, maestro
• mobilepay, applepay, googlepay, paypal
• Klarna, Viabill, Anyday, Banküberweisung, Rechnung, EAN

Geben Sie die Namen in Kleinbuchstaben ein, ohne Leerzeichen zwischen den Kommas. Ein Name, der nicht als integriertes Symbol vorhanden ist, wird einfach ohne Fehler übersprungen.

Das Feld „Versandarten“ (Pfad: shipping_methods) funktioniert auf die gleiche Weise, z. B.:

gls, postnord, ups, burd

Trustpilot-Integration

Delaware verwendet die offiziellen Widgets von Trustpilot. Jedes Widget benötigt eine eigene Template-ID, die du aus dem Trustpilot-Business-Portal kopierst. Die Felder befinden sich unter „Integrationen“:

1. Aktivieren Sie „Enable Trustpilot“
2. Gib deine Trustpilot-Business-ID ein (Pfad: trustpilot_business_id) – das ist die eindeutige ID deines Shops bei Trustpilot
3. Geben Sie die Template-ID für die Widgets ein, die Sie tatsächlich anzeigen möchten:

• Trustpilot-Template-ID „Carousel“ (trustpilot_template_id_carousel) – großes Karussell-Element, typischerweise auf der Startseite und im Warenkorb
• Trustpilot-Vorlagen-ID „Micro Star“ (trustpilot_template_id_micro_star): kompakte Sterne in der Kopfzeile und im ersten Schritt des Bestellvorgangs
• Trustpilot-Vorlagen-ID „Micro Review Count“ (trustpilot_template_id_micro_reviewcount): kleines Text-Widget mit der Anzahl der Bewertungen in der Fußzeile
• Trustpilot Template ID Micro Trustscore (trustpilot_template_id_micro_trustscore) Gesamtbewertung in der Kopfzeile und in der Seitenleiste des Warenkorbs
• Trustpilot-Vorlagen-ID „Product Mini“ (trustpilot_template_id_product_mini): Sterne unter dem Produktnamen auf der Produktseite
• Trustpilot Template ID Product Reviews (trustpilot_template_id_product_reviews) vollständige Bewertungsliste auf der Produktseite
• Trustpilot-Vorlagen-ID „Starter“ (trustpilot_template_id_starter) – wird verwendet, wenn Sie noch keine Bewertungen erhalten haben

Instagram, Facebook und weitere Social-Media-Links

Delaware zeigt in der Fußzeile kleine Symbole an, die zu Ihren Profilen in den sozialen Medien führen. Sie geben die URLs unter „Company“ ein:

• Instagram-URL (Pfad: instagram_url)
• Facebook-URL (facebook_url)
• YouTube-URL (youtube_url)
• Google-URL (google_url)

Gib die vollständige URL ein, z. B. https://www.instagram.com/dinprofil/. Wenn du das Feld leer lässt, wird das Symbol nicht angezeigt.

Wertversprechen (USPs)

Du kannst bis zu vier Wertversprechen anzeigen, typischerweise unter der Kopfzeile oder in der Fußzeile. Das könnten beispielsweise „Kostenloser Versand ab 500 kr.“, „30 Tage Rückgaberecht“ oder „Schnelle Lieferung“ sein. Richten Sie diese unter „Wertversprechen“ ein, wo jedes USP Felder für Text, Beschreibung, Symbol und ggf. einen Link enthält.

Startseite und Seiten-Designer

Die Startseite wird über den Seiten-Designer erstellt, wo du Abschnitte wie Hero-Banner, Produktkarussells, Bildergalerien, Text und Blog-Feeds hinzufügen kannst. Du ziehst Abschnitte per Drag & Drop und bearbeitest den Inhalt, ohne den Code zu verändern.

Funktionen der Produktseite

Unter „Produkt“ kannst du eine Vielzahl von Funktionen aktivieren und deaktivieren:

• „Andere kauften auch“, „Ähnliche Produkte“, „Verwandte Produkte“ – jeweils mit Autovervollständigung aus derselben Kategorie
• Wunschliste, sowohl einfach (browserbasiert) als auch vollständig (Login erforderlich)
• Registerkarten für Produktattribute, Versand, Rücksendung, Zahlung und Fragen
• „Auf Lager“-Badge, Backorder-Meldung, Aktionsmeldung
• Bildergalerie mit Miniaturansichten und Lightbox
• Waschanleitung und Größentabelle
• Omnibus-Preisanzeige des niedrigsten Preises der letzten 30 Tage für Aktionsartikel

Anpassungen am Checkout

Die Abschnitte „Checkout: Allgemein“, „Checkout: Warenkorb“, „Checkout: Adresse“ und „Checkout: Bestätigen“ steuern die einzelnen Phasen des Bestellvorgangs. Hier kannst du unter anderem die Anmeldung aktivieren/deaktivieren, Geschenkgutscheine, Apple Pay/MobilePay-Schnellkasse, Newsletter-Anmeldung und Upselling aktivieren bzw. deaktivieren sowie festlegen, ob Sie Privatpersonen (B2C), Unternehmen (B2B) und/oder öffentliche Kunden (B2G/EAN) ansprechen.

Site Notice (Banner oben)

Möchten Sie über eine Aktion, eine Feiertagsschließung oder eine allgemeine Mitteilung informieren? Aktivieren Sie „Site Notice“ und verfassen Sie einen Text, gegebenenfalls mit einer Schaltfläche zum Schließen. Sie können unterschiedliche Texte für Desktop und Mobilgeräte verwenden und festlegen, wie viele Tage das Banner geschlossen bleiben soll, wenn der Kunde es wegklickt.

Weitere Integrationen

Unter „Integrationen“ können Sie neben Trustpilot auch Folgendes aktivieren:

• Pricerunner, indem du deine Account-ID eingibst
• E-mærket durch Eingabe der URL zu Ihrer E-mærket-Seite
• Viabill für Ratenzahlungen (erfordert eine Viabill-Shop-ID)
• AnyDay für Ratenzahlungen (erfordert ein AnyDay-Preis-Token)
• Clerk.io für intelligente Suche und Produktempfehlungen (erfordert einen API-Schlüssel)

Eigene Anpassungen (Custom CSS und JS)

Wenn du eigenes CSS oder JavaScript hinzufügen möchtest, kannst du dies über „Custom Code“ tun. Aktiviere „Enable Custom CSS“ oder „Enable Custom JS“ und füge deinen Code ein. Das ist der einfachste Weg, kleine Designanpassungen vorzunehmen oder externe Skripte hinzuzufügen, ohne die Dateien des Themes selbst zu ändern.

Häufig gestellte Fragen

Welche Smarty-Version verwendet Delaware?

Delaware und DelawareDK laufen auf Smarty 4. Das ist die neueste Version, und wir empfehlen sie auch für alle neuen Themes auf Shoporama. Wenn du die Vorlagen selbst anpasst, kannst du daher die neuere Smarty-4-Syntax wie <{$foo = 123}> und <{foreach $items as $item}> verwenden.

Was ist der Unterschied zwischen Delaware und DelawareDK?

Die Funktionen sind vollkommen identisch. Der einzige Unterschied besteht in der Sprache der Admin-Bezeichnungen in den Theme-Einstellungen: Delaware hat englische Bezeichnungen (z. B. „Theme“, „Company“, „Integrations“), DelawareDK hat dänische. Der Text des Shops auf der Startseite wird unabhängig davon über die Spracheinstellung des Shops gesteuert.

Meine Zahlungssymbole werden in der Fußzeile nicht angezeigt – was ist schiefgelaufen?

Überprüfen Sie, ob das Feld „Zahlungsmethoden“ unter „Allgemein“ mit einer durch Kommas getrennten Liste ausgefüllt ist, z. B. visa,mastercard,mobilepay. Geben Sie die Namen in Kleinbuchstaben ein und verwenden Sie nur Namen aus der obigen Liste. Ein Name, der nicht als Symbol integriert ist, wird ohne Fehler übersprungen.

Welches Trustpilot-Feld muss ich ausfüllen?

Zunächst die Trustpilot-Business-ID (die ID deines Shops). Anschließend eine Template-ID pro Widget, das du verwenden möchtest. Wenn du beispielsweise nur Sterne unter dem Produktnamen anzeigen möchtest, gibst du die Trustpilot-Template-ID „Product Mini“ ein. Lass die anderen Template-ID-Felder leer, damit sie nicht angezeigt werden.

Kann ich meine neuesten Instagram-Bilder direkt auf der Startseite anzeigen?

Nicht standardmäßig. Delaware zeigt nur einen Link zu deinem Instagram-Profil in der Fußzeile an. Wenn du einen Live-Bild-Feed haben möchtest, kannst du eine Drittanbieter-Lösung hinzufügen, z. B. Behold oder Elfsight, die du über einen HTML-Block im Seiten-Designer einbettest.

Wo erstelle ich Fußzeilentexte mit Firmenadresse und Handelsregisternummer?

Firmenname, Adresse, Ort, Postleitzahl, Handelsregisternummer, Telefonnummer und E-Mail-Adresse werden unter „Company“ in den Theme-Einstellungen eingegeben. Diese Daten werden automatisch in der Fußzeile angezeigt und auch für strukturierte Daten (Schema.org) verwendet, damit Google Ihren Shop besser versteht.

Unterstützt der Theme Builder das Delaware-Theme?

Ja. Delaware wird vom Theme Builder vollständig unterstützt, sodass du Farben, Abschnitte und Layout mit einer visuellen Vorschau anpassen kannst. Die Felder in dieser Anleitung sind genau die, die du im Theme Builder findest, nur in Tabellenform dargestellt.

Wie gut funktioniert Delaware auf Mobilgeräten?

Delaware wurde mit Tailwind CSS entwickelt und ist vollständig responsiv. Das Megamenü wird zu einem Off-Canvas-Menü für Mobilgeräte reduziert, Bilder werden automatisch an die Bildschirmgröße angepasst und der Checkout ist für Touch-Bedienung optimiert. Du kannst außerdem einen separaten Text für den Site-Hinweis auf Mobilgeräten auswählen.

Kann ich das Megamenü und das normale Menü gleichzeitig verwenden?

Ja. Du kannst sie sogar innerhalb derselben Hauptnavigation mischen. Nur die Menüpunkte, die die CSS-Klasse „megamenu“ haben, werden als großes Mega-Menü aufgeklappt – Punkte ohne diese Klasse werden als normales Dropdown-Menü angezeigt. Und du kannst weiterhin separate Menüs für den Kopfbereich und die drei Fußzeilenpositionen verwenden.

Soll ich „Delaware“ oder „DelawareDK“ wählen?

Wähle „DelawareDK“, wenn dein Team auf Dänisch arbeitet und dänische Admin-Bezeichnungen bevorzugt. Wähle „Delaware“, wenn du Englisch bevorzugst oder an einem internationalen Shop arbeitest. Wenn du später zwischen den beiden wechselt, gehen deine Einstellungen nicht verloren.

Benötigen Sie Hilfe mit Delaware? Schreiben Sie uns an support@shoporama.dk.