Storefront-Branding
Erstellt für:
- Einsteiger
- Fortgeschrittener
- Admin
- Führungskraft
- Benutzende
Eines der ersten Dinge, die Sie tun möchten, ist Logo ändern in der Kopfzeile und ein Favicon hochladen für den Browser. Als Nächstes sollten Sie Ihre Begrüßungsnachricht hinzufügen und den Copyright-Hinweis aktualisieren in der Fußzeile einfügen. Diese Aufgaben sind einige einfache Design-Elemente, die Sie sofort übernehmen können. Während sich Ihr Store in der Entwicklung befindet, können den Hinweis zur Store-Demound ihn dann entfernen, wenn Sie für den Start bereit sind.
Logo hochladen
Die Größe und Position des Logos in der Kopfzeile wird durch das Store-Design bestimmt. Ihr Logo kann entweder als GIF-, PNG- oder JPG-Dateityp (JPEG) gespeichert und vom Administrator Ihres Shops hochgeladen werden.
Das Logobild befindet sich am folgenden Speicherort auf dem Server. Jede Bilddatei mit dem Namen logo.svg
wird als Standard-Design-Logo verwendet.
Vollständiger Pfad - app/design/frontend/[vendor]/[theme]/web/images/logo.svg
Relativer Pfad - images/logo.svg
Wenn Sie die Größe des Logos oder anderer in Ihrem Design verwendeter Bilder nicht kennen, öffnen Sie die Seite in einem Browser, klicken Sie mit der rechten Maustaste auf das Bild und überprüfen Sie das Element.
Unterstützte Logodateiformate:
-
Navigieren Sie in Admin-Seitenleiste zu Content > Design>Configuration.
-
Suchen Sie die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action auf Edit.
-
Erweitern Sie
-
Um ein neues Logo hochzuladen, klicken Sie auf Upload und wählen Sie die Datei aus Ihrem System aus.
-
Geben Sie Logo Image Width und Logo Image Height in Pixel ein.
-
Geben Sie Logo Image Alt den Text ein, der angezeigt werden soll, wenn jemand den Mauszeiger über das Bild bewegt.
-
Klicken Sie abschließend auf Save Configuration.
Favicon hinzufügen
Favicon ist die Abkürzung für Lieblingssymbol und bezieht sich auf das kleine Symbol auf der Registerkarte jeder Browser-Seite. Je nach Browser wird das Favicon auch in der Adressleiste, direkt vor der URL, angezeigt.
Ein Favicon ist im Allgemeinen 16 x 16 Pixel oder 32 x 32 Pixel groß. Commerce akzeptiert die Dateitypen ICO, PNG, APNG, GIF und JPG (JPEG), auch wenn diese Formate nicht von allen Browsern unterstützt werden. Das am häufigsten unterstützte Dateiformat für ein Favicon ist ICO. Sie können auch andere Bilddateitypen verwenden, das Format wird jedoch möglicherweise nicht von allen Browsern unterstützt. Es gibt viele kostenlose Tools, die Sie online verwenden können, um ein ICO-Bild zu generieren oder ein Bild in dieses Format zu konvertieren.
Commerce unterstützt die folgenden Dateiformate als Favicon:
Schritt 1: Favicon erstellen
-
Erstellen Sie mit dem Bildeditor Ihrer Wahl ein Grafikbild mit 16 x 16 oder 32 x 32 Ihres Logos.
-
(Optional) Verwenden Sie eines der verfügbaren Online-Tools, um die Datei in das .ico-Format zu konvertieren und die Datei auf Ihrem Computer zu speichern.
Schritt 2: Laden Sie das Favicon in Ihren Store hoch
-
Navigieren Sie in Admin-Seitenleiste zu Content > Design>Configuration.
-
Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action auf Edit.
-
Erweitern Sie unter Other Settings
-
Wenn Sie das aktuelle Favicon entfernen möchten, klicken Sie auf das Symbol Löschen (
-
Klicken Sie auf Upload und öffnen Sie die von Ihnen vorbereitete FAVICON-Datei.
-
Klicken Sie abschließend auf Save Configuration.
Schritt 3: Aktualisieren Sie den Cache
-
Wenn Sie aufgefordert werden, den Cache zu aktualisieren, klicken Sie auf den Link Cache Management in der Nachricht oben im Arbeitsbereich.
-
Aktivieren Sie in der Liste das Kontrollkästchen Page Cache , das
Invalidated
markiert ist. -
Legen Sie Actions auf
Refresh
fest und klicken Sie auf Submit. -
Um das neue Favicon anzuzeigen, kehren Sie zu Ihrer Storefront zurück und aktualisieren Sie den Browser.
Ändern der Willkommensnachricht
Die Begrüßungsnachricht in der Kopfzeile wird erweitert und enthält den Namen des Kunden, der angemeldet ist. Achten Sie darauf, vor dem Start Ihres Stores den Standardtext Willkommen für jede Store-Ansicht zu ändern.
-
Navigieren Sie in Admin-Seitenleiste zu Content > Design>Configuration.
-
Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action auf Edit.
-
Erweitern Sie unter Other Settings
-
Geben Sie Welcome Text den Begrüßungstext ein, der in der Kopfzeile Ihres Stores angezeigt werden soll.
-
Klicken Sie abschließend auf Save Configuration.
-
Wenn Sie aufgefordert werden, den Seiten-Cache zu aktualisieren, klicken Sie auf den Link Cache Management oben im Arbeitsbereich und befolgen Sie die Anweisungen zum Aktualisieren des Caches.
Copyright-Hinweis ändern
In Ihrem Geschäft wird in der Fußzeile jeder Seite ein Copyright-Hinweis angezeigt. Als Best Practice sollte der Copyright-Hinweis das aktuelle Jahr enthalten und Ihr Unternehmen als rechtlichen Eigentümer der Inhalte auf der Website angeben.
Der ©
-Code wird verwendet, um das Copyright-Symbol einzufügen, wie in den folgenden Beispielen gezeigt:
-
Beispiel für ein langes Format
Copyright © 2013-present Luma, Inc. All rights reserved.
-
Beispiel für ein Kurzformat
© 2021 Luma, Inc. All rights reserved.
So aktualisieren Sie den Copyright-Hinweis:
-
Navigieren Sie in Admin-Seitenleiste zu Content > Design>Configuration.
-
Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action auf Edit.
-
Erweitern unter Weitere Einstellungen
-
Geben Sie Copyright den Copyright-Hinweis ein, der in der Fußzeile jeder Seite angezeigt werden soll.
Verwenden Sie den
©
Zeichencode, um ein Copyright-Symbol einzufügen. -
Klicken Sie abschließend auf Save Configuration.
Festlegen des Demohinweises für den Store
Wenn Ihr Store online ist, sich aber noch im Aufbau befindet, können Sie oben auf der Seite einen Hinweis zu einer Store-Demo anzeigen, um den Personen mitzuteilen, dass der Store noch nicht für das Geschäft geöffnet ist. Wenn Sie bereit für die Live-Schaltung sind, entfernen Sie einfach die Nachricht. Es ist ähnlich wie das Umdrehen des im Fenster hängenden Schildes von Geschlossen auf Öffnen. Das Format der Demo-Benachrichtigung wird durch das Design Ihres Stores bestimmt.
-
Navigieren Sie in Admin-Seitenleiste zu Content > Design>Configuration.
-
Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action auf Edit.
-
Erweitern Sie unter Other Settings
-
Scrollen Sie nach unten zum unteren Rand und legen Sie die Display Demo Store Notice nach Ihren Wünschen fest.
-
Klicken Sie abschließend auf Save Configuration.
-
Wenn Sie aufgefordert werden, den Cache zu aktualisieren, klicken Sie in der Systemmeldung auf Cache Management und befolgen Sie die Anweisungen zum Aktualisieren des Caches.