Konfiguration und Anpassung an das Thema Delaware

Delaware ist das meistgenutzte Theme von Shoporama. Es ist modern, responsiv und basiert auf Tailwind CSS, so dass es sowohl auf dem Desktop als auch auf dem Handy hervorragend funktioniert. Fast das gesamte Aussehen und Verhalten kann über das Design in der Verwaltung angepasst werden, ohne dass Code geschrieben werden muss. Dieser Leitfaden wird Sie durch die wichtigsten Einstellungen führen.

Wo Sie die Einstellungen finden

Fast alles wird über Konto → Webshop → Thema → Einstellungen gesteuert. Die Felder sind in Abschnitte wie Allgemein, Unternehmen, Thema, Abzeichen, Produkt, Kasse, Integrationen und Benutzerdefinierter Code unterteilt. Zu jedem Feld gibt es eine kurze Beschreibung auf der Seite selbst, so dass Sie es oft nicht hier im Leitfaden nachschlagen müssen.

Logo, Farben und Abzeichen

Unter Thema können Sie:

• URL für Logo und Favicon einfügen (laden Sie die Datei unter Thema → Dateien hoch und kopieren Sie die URL)
• Primär- und Aktionsfarbe als Hex-Code wählen, z. B. #1a73e8
• Schreiben Sie einen Alt-Text für das Logo (wichtig für Barrierefreiheit und SEO)

Passen Sie unter Badges die Farben der kleinen Badges an, die auf den Produkten erscheinen, z. B. Angebot, Neu, Auf Lager und Mengenrabatt.

Menüs in der Fußzeile

Delaware hat Platz für drei Menüs in der Fußzeile. So fügen Sie sie hinzu:

1. Gehen Sie zu Inhalt → Menüs
2. Erstellen Sie ein neues Menü und geben Sie ihm eines der folgenden 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.

Mega-Menü

Ein Megamenü ist ein großes, mehrspaltiges Dropdown-Menü, das in der Regel als Hauptnavigation verwendet wird, um den Kunden zu helfen, sich schnell in einem großen Sortiment zurechtzufinden.

In Delaware wird das Megamenü durch die CSS-Klasse megamenu (genau diese Zeichenfolge - nicht mega_menu und ohne Leerzeichen) aktiviert. Die Klasse wird im Feld Klasse des einzelnen Menüpunkts in der Hauptnavigation gesetzt - nicht im Menü selbst. Sie finden das Feld unter Inhalt → Menüs → Bearbeiten eines Menüpunktes.

Die Struktur selbst erfordert drei Ebenen: Die Hauptnavigation enthält einen Menüpunkt mit der Klasse megamenu, der auf einen Megamenü-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 werden Links). Wenn Sie die show_image-Klasse auf den ersten Menüpunkt in einer Spalte setzen und es sich um eine Kategorie, ein Produkt oder eine Landing Page handelt, wird das Bild des Objekts als Blickfang am oberen Rand der Spalte angezeigt.

Zahlungs- und Versandsymbole in der Fußzeile

Sie müssen keine Bilder von Zahlungskarten oder Versandunternehmen hochladen. Delaware verfügt über integrierte SVG-Symbole und wählt diese aus zwei Feldern unter Allgemein aus.

Das Feld Zahlungsarten (Pfad: payment_methods) ist eine durch Komma getrennte Liste, z. B:

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

Diese Namen sind als Symbole in Delaware eingebettet:

• dankort, visa, mastercard, maestro
• mobilepay, applepay, googlepay, paypal
• klarna, viabill, anyday, banküberweisung, rechnung, ean

Schreiben Sie die Namen in Kleinbuchstaben, ohne Leerzeichen zwischen den Kommas. Ein Name, der nicht als eingebautes Symbol existiert, wird einfach übersprungen, ohne dass ein Fehler auftritt.

Das Feld Versandmethoden (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 Sie aus dem Trustpilot Business Portal kopieren. Die Felder befinden sich unter Integrationen:

1. Aktivieren Trustpilot aktivieren
2. Geben Sie Ihre Trustpilot Business ID ein (Pfad: trustpilot_business_id) dies ist die eindeutige ID Ihres Shops auf 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 Checkout
• Trustpilot Template ID Micro Star(trustpilot_template_id_micro_star) kompakte Sterne in der Kopfzeile und am Anfang der Kaufabwicklung
• Trustpilot Template 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 im Header und in der Checkout-Seitenleiste
• Trustpilot Template 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 Template ID Starter(trustpilot_template_id_starter) wird verwendet, wenn Sie noch keine Bewertungen haben

Instagram, Facebook und andere soziale Links

Delaware zeigt in der Fußzeile kleine Symbole an, die auf Ihre Social-Media-Profile verweisen. Sie geben die URLs unter Unternehmen ein:

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

Geben Sie die vollständige URL ein, z. B. https://www.instagram.com/dinprofil/. Wenn Sie das Feld leer lassen, wird das Symbol nicht angezeigt.

Leistungsversprechen (USPs)

Sie können bis zu vier Value Propositions anzeigen, typischerweise unterhalb der Kopfzeile oder in der Fußzeile. Das können z. B. "Kostenloser Versand über 500 Kr.", "30-Tage-Rückgaberecht" oder "Schnelle Lieferung" sein. Richten Sie sie unter " Wertangebote" ein, wo jeder USP Felder für Text, Beschreibung, Symbol und möglicherweise einen Link hat.

Titelseite und Seitendesigner

Die Startseite wird über den Seitendesigner erstellt, wo Sie Abschnitte wie Hero-Banner, Produktkarusselle, Bildergalerien, Text und Blog-Feeds hinzufügen können. Sie können Abschnitte per Drag-and-Drop verschieben und Inhalte bearbeiten, ohne den Code zu berühren.

Funktionen der Produktseite

Unter Produkt können Sie eine breite Palette von Funktionen ein- und ausschalten:

• Andere kauften auch, Ähnliche Produkte, Verwandte Produkte jeweils mit Autofill aus derselben Kategorie
• Wunschzettel, sowohl einfach (browserbasiert) als auch vollständig (erfordert Anmeldung)
• Registerkarten für Produktattribute, Versand, Rückgabe, Zahlung und Fragen
• Lagerbestandsabzeichen, Rückstandsmeldung, Werbebotschaft
• Bildergalerie mit Thumbnails und Leuchtkästen
• Waschanleitung und Größentabelle
• Omnibus-Preisanzeige des niedrigsten Preises der letzten 30 Tage für Werbeartikel

Anpassungen an der Kasse

Die Abschnitte Kasse: Allgemein, Kasse: Warenkorb, Kasse: Adresse und Kasse: Genehmigen steuern jede Phase des Kassiervorgangs. Hier können Sie Login, Geschenkkarten, ApplePay/MobilePay-Schnellkasse, Newsletter-Anmeldung und Upselling aktivieren/deaktivieren und wählen, ob Sie sich an Privatkunden (B2C), Geschäftskunden (B2B) und/oder öffentliche Kunden (B2G/EAN) wenden.

Website-Benachrichtigung (Banner am oberen Rand)

Möchten Sie eine Werbeaktion, eine Urlaubsschließung oder eine allgemeine Nachricht ankündigen? Aktivieren Sie Site Notice und schreiben Sie einen Text mit einer optionalen Schaltfläche zum Schließen. Sie können einen unterschiedlichen Text für Desktop- und Mobilgeräte verwenden und festlegen, wie viele Tage das Banner geschlossen bleiben soll, wenn der Kunde es wegklickt.

Andere Integrationen

Unter Integrationen können Sie auch Trustpilot und Pricerunner aktivieren:

• Pricerunner durch Einfügen Ihrer Konto-ID
• E-Label durch Einfügen der URL zu Ihrer E-Label-Seite
• Viabill für Ratenzahlungen (Viabill Shop ID erforderlich)
• AnyDay für Ratenzahlungen (erfordert AnyDay-Preis-Token)
• Clerk.io für intelligente Suche und Produktempfehlungen (API-Schlüssel erforderlich)

Anpassungen (Benutzerdefinierte CSS und JS)

Wenn Sie Ihr eigenes CSS oder JavaScript hinzufügen möchten, können Sie dies über Custom Code tun. Aktivieren Sie "Enable Custom CSS" oder "Enable Custom JS" und fügen Sie Ihren Code ein. Dies ist der einfachste Weg, um kleine Design-Anpassungen vorzunehmen oder externe Skripte hinzuzufügen, ohne die Theme-Dateien selbst zu ändern.

Häufig gestellte Fragen

Mit welcher Smarty-Version läuft Delaware?

Delaware und DelawareDK laufen auf Smarty 4. Dies ist die neueste Version und diejenige, die wir für alle neuen Themes auf Shoporama empfehlen. Wenn Sie also Vorlagen selbst anpassen, können Sie 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 völlig identisch. Der einzige Unterschied ist die Sprache der Admin-Labels in den Theme-Einstellungen: Delaware hat englische Labels (z.B. "Theme", "Company", "Integrations"), DelawareDK hat dänische. Der eigentliche Shoptext auf der Startseite wird unabhängig davon über die Spracheinstellung des Shops gesteuert.

Meine Zahlungssymbole werden in der Fußzeile nicht angezeigt, was ist schief gelaufen?

Prüfen Sie, ob das Feld Zahlungsarten unter Allgemein mit einer kommagetrennten Liste ausgefüllt ist, z.B. Visa, Mastercard, Mobilepay. Schreiben Sie die Namen in Kleinbuchstaben und verwenden Sie nur Namen aus der obigen Liste. Ein Name, der nicht als Symbol eingebettet ist, wird ohne Fehler übersprungen.

Welches Trustpilot-Feld soll ich ausfüllen?

Zuerst die Trustpilot Business ID (Ihre Shop ID). Dann eine Vorlagen-ID pro Widget, das Sie verwenden möchten. Wenn Sie z.B. nur Sterne unter dem Produktnamen haben möchten, geben Sie die Trustpilot Template ID Product Mini ein. Lassen Sie die anderen Felder der Template ID leer, dann werden sie nicht angezeigt.

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

Nicht ohne Weiteres. Delaware zeigt nur einen Link zu Ihrem Instagram-Profil in der Fußzeile an. Wenn Sie einen Live-Bild-Feed wünschen, können Sie eine Lösung eines Drittanbieters wie Behold oder Elfsight hinzufügen, die Sie über einen HTML-Block im Page Designer einbetten.

Wo erstelle ich Fußzeilentexte mit Firmenadresse und Firmenname?

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

Verwendet Delaware den Theme Builder?

Ja, das tut es. Delaware wird vollständig von Theme Builder unterstützt, so dass Sie Farben, Abschnitte und Layout mit visueller Vorschau anpassen können. Die Felder in diesem Leitfaden sind genau dieselben, die Sie im Theme Builder finden, nur in tabellarischer Form.

Wie gut funktioniert Delaware auf dem Handy?

Delaware wurde mit Tailwind CSS erstellt und ist vollständig responsive. Das Mega-Menü lässt sich zu einem mobilen Off-Canvas-Menü zusammenklappen, die Bilder werden automatisch an die Bildschirmgröße angepasst und der Checkout ist für die Berührung optimiert. Sie können auch einen separaten Text für den Website-Hinweis auf dem Handy wählen.

Kann ich das Mega-Menü und das normale Menü gleichzeitig verwenden?

Ja, das können Sie. Sie können sie sogar innerhalb derselben Hauptnavigation mischen. Nur die Menüpunkte, die mit der CSS-Klasse Megamenu versehen sind, werden als ein großes Megamenü angezeigt - Punkte ohne diese Klasse erscheinen als normales Dropdown-Menü. Und Sie können immer noch separate Menüs für die oberen und die drei Fußzeilenpositionen haben.

Soll ich Delaware oder DelawareDK wählen?

Wählen Sie DelawareDK, wenn Ihr Team auf Dänisch arbeitet und dänische Verwaltungsetiketten bevorzugt. Wählen Sie Delaware, wenn Sie Englisch bevorzugen oder mit einem internationalen Shop arbeiten. Wenn Sie später zwischen den beiden Varianten wechseln, gehen Ihre Einstellungen nicht verloren.

Brauchen Sie Hilfe mit Delaware? Schreiben Sie uns an support@shoporama.dk.