DokumentationCommerceErste Schritte

Storefront-Branding

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Admin
  • Führungskraft
  • Benutzende

Als Erstes sollten Sie das Logo in der Kopfzeile ändern und eine Favicon für den Browser hochladen. Als Nächstes sollten Sie Ihre Willkommensnachricht hinzufügen und den Copyright-Hinweis in der Fußzeile aktualisieren. Diese Aufgaben sind ein paar einfache Designelemente, die Sie sofort erledigen können. Während Ihr Store in Entwicklung ist, können Sie den Demohinweis zum Store aktivieren und ihn dann entfernen, wenn Sie bereit zum Starten sind.

Branding-Elemente der Storefront {width="600" modal="regular"}

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 Stores hochgeladen werden.

Logo in Kopfzeile {width="600"}

Das Logo-Bild 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 im 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.

NOTE
Zusätzlich zum Logo in der Kopfzeile erscheint Ihr Logo auch auf E-Mail-Vorlagen und auf PDF-Rechnungen und anderen Verkaufsdokumenten. Die Logos für E-Mail-Vorlagen und Rechnungen haben unterschiedliche Größen und müssen separat hochgeladen werden.

Unterstützte Logodateiformate:

Dateiformat
Beschreibung
PNG
(Portable Network Graphics) Diese neuere Alternative zum GIF-Format unterstützt bis zu 16 Millionen Farben (24 Bit). Das verlustfreie Komprimierungsformat liefert ein hochwertiges Bitmap-Bild mit scharfem Text, jedoch eine größere Dateigröße als einige Formate. Das PNG-Format unterstützt transparente Ebenen und ist für die Online-Anzeige und das Streaming konzipiert.
GIF
(Graphics Interchange Format) Ein weithin unterstütztes und älteres Bitmap-Format, das auf 256 Farben (8 Bit) begrenzt ist. Das GIF-Format unterstützt einfache Animationen und transparente Ebenen.
JPG (JPEG)
(Joint Fotografic Expert Group) Ein komprimiertes Bitmap-Format, das von den meisten Digitalkameras verwendet wird. Die verlustreiche Komprimierung führt zu Datenverlust, der manchmal als unscharfe Flecken im Text wahrgenommen werden kann.

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

    Seite "Designkonfiguration" {width="700"}

  2. Suchen Sie die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Erweitern Sie Erweiterungsauswahl im Abschnitt Header .

    Kopfzeileneinstellungen {width="600"}

  4. Um ein neues Logo hochzuladen, klicken Sie auf Upload und wählen Sie die Datei aus Ihrem System aus.

  5. Geben Sie die Werte Logo Image Width und Logo Image Height in Pixel ein.

  6. Geben Sie für Logo Image Alt den Text ein, der angezeigt werden soll, wenn der Mauszeiger über das Bild bewegt wird.

  7. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

Favicon hinzufügen

Favicon ist die Abkürzung für Lieblingssymbol und verweist auf das kleine Symbol auf der Registerkarte jeder Browser-Seite. Je nach Browser wird die Favicon auch in der Adressleiste direkt vor der URL angezeigt.

Ein Favicon ist in der Regel 16 x 16 Pixel oder 32 x 32 Pixel groß. Commerce akzeptiert die Dateitypen ICO, PNG, APNG, GIF und JPG (JPEG), obwohl nicht alle Browser diese Formate unterstützen. Das am weitesten unterstützte Dateiformat für eine Favicon ist ICO. Sie können andere Bilddateitypen verwenden, das Format wird jedoch möglicherweise nicht von allen Browsern unterstützt. Es gibt viele kostenlose Tools, die Sie verwenden können, um ein ICO-Bild zu erstellen oder ein Bild in dieses Format zu konvertieren.

Favicon auf der Browser-Registerkarte {width="600"}

Commerce unterstützt die folgenden Dateiformate als Favicon:

Dateiformat
Beschreibung
ICO
Dieses Bilddateiformat wurde für kleine Computersymbolbilder entwickelt. Das ICO-Format, das hauptsächlich unter Microsoft® Windows OS verwendet wird, kann Bilder mit bis zu 256 x 256 Pixel und 16 Millionen Farben (24 Bit) mit 8 Bit Transparenz enthalten.
PNG
(Portable Network Graphics) Diese neuere Alternative zum GIF-Format unterstützt bis zu 16 Millionen Farben (24 Bit). Das verlustfreie Komprimierungsformat liefert ein hochwertiges Bitmap-Bild mit scharfem Text, jedoch eine größere Dateigröße als einige Formate. Das PNG-Format unterstützt transparente Ebenen und ist für die Online-Anzeige und das Streaming konzipiert.
APNG
(Animierte Portable Network Graphics) Ein Dateiformat ähnlich dem PNG, das einfache Animationen unterstützt.
GIF
(Graphics Interchange Format) Ein weithin unterstütztes und älteres Bitmap-Format, das auf 256 Farben (8 Bit) begrenzt ist. Das GIF-Format unterstützt einfache Animationen und transparente Ebenen.
JPG (JPEG)
(Joint Fotografic Expert Group) Ein komprimiertes Bitmap-Format, das von den meisten Digitalkameras verwendet wird. Die verlustreiche Komprimierung führt zu Datenverlust, der manchmal als unscharfe Flecken im Text wahrgenommen werden kann.

Schritt 1: Erstellen einer Funktion

  1. Erstellen Sie mit dem Bildeditor Ihrer Wahl ein 16 x 16- oder 32 x 32-Bildbild Ihres Logos.

  2. (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: Hochladen der Funktion in Ihren Speicher

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Erweitern Sie unter Other Settings ​den Abschnitt Erweiterungsauswahl um den Abschnitt HTML Head.

    HTML-Head-Einstellungen {width="600"}

  4. Wenn Sie die aktuelle Favicon entfernen möchten, klicken Sie in der linken unteren Ecke des Bildes auf das Symbol Löschen ( Papierkorbsymbol ).

  5. Klicken Sie auf Upload und öffnen Sie die von Ihnen vorbereitete Favicon-Datei.

    Hochgeladenes Favicon {width="400"}

  6. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

Schritt 3: Cache aktualisieren

  1. Wenn Sie aufgefordert werden, den Cache zu aktualisieren, klicken Sie in der Meldung oben im Arbeitsbereich auf den Link Cache Management .

  2. Wählen Sie in der Liste das Kontrollkästchen Page Cache aus, das mit Invalidated markiert ist.

  3. Setzen Sie Actions auf Refresh und klicken Sie auf Submit.

  4. Um die neue Favicon anzuzeigen, kehren Sie zu Ihrer Storefront zurück und aktualisieren Sie den Browser.

Willkommensnachricht ändern

Die Willkommensnachricht in der Kopfzeile wird um den Namen des Kunden erweitert, der angemeldet ist. Stellen Sie vor dem Start Ihres Stores sicher, dass Sie den standardmäßigen Text Willkommen für jede Store-Ansicht ändern.

Willkommensnachricht {width="600"}

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Erweitern Sie unter Other Settings ​den Abschnitt Erweiterungsauswahl um den Abschnitt Header.

  4. Geben Sie für "Welcome Text"den Begrüßungstext ein, der in der Kopfzeile Ihres Stores angezeigt werden soll.

    Kopfzeileneinstellungen {width="600"}

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

  6. Wenn Sie aufgefordert werden, den Seiten-Cache zu aktualisieren, klicken Sie oben im Arbeitsbereich auf den Link Cache Management und befolgen Sie die Anweisungen zum Aktualisieren des Caches.

Urheberrechtshinweis ändern

Ihr Store zeigt in der Fußzeile jeder Seite einen Copyright-Hinweis an. Als Best Practice sollte der Urheberrechtshinweis das aktuelle Jahr enthalten und Ihr Unternehmen als rechtmäßigen Eigentümer des Inhalts der Website identifizieren.

Beispiel für Copyright-Hinweis {width="600"}

Der Code des Zeichens © wird zum Einfügen des Copyright-Symbols verwendet, wie in den folgenden Beispielen gezeigt:

  • Beispiel für ein langes Format

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Beispiel für ein kurzes Format

    © 2021 Luma, Inc. All rights reserved.

Aktualisieren des Copyright-Vermerks:

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Erweitern Sie unter Andere Einstellungen den Abschnitt Erweiterungsauswahl für den Abschnitt Footer.

    Fußzeilendesign-Einstellungen {width="600"}

  4. Geben Sie für "Copyright"den Copyright-Hinweis ein, der in der Fußzeile jeder Seite angezeigt werden soll.

    Verwenden Sie den Code des Zeichens © , um ein Copyright-Symbol einzufügen.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

Festlegen des Demohinweises zum Store

Wenn Ihr Store online ist, sich aber noch im Aufbau befindet, können Sie oben auf der Seite einen Demohinweis zum Geschäft anzeigen, um den Benutzern mitzuteilen, dass der Store noch nicht für Unternehmen geöffnet ist. Wenn Sie bereit sind, live zu gehen, entfernen Sie einfach die Nachricht. Sie ähnelt dem Spiegeln des im Fenster hängenden Zeichens von Geschlossen in Öffnen. Das Format des Demohinweises wird durch das Design Ihres Stores bestimmt.

Demohinweis zur Storefront {width="600"}

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Design>Configuration.

  2. Suchen Sie im Raster die Store-Ansicht, die Sie konfigurieren möchten, und klicken Sie in der Spalte Action ​auf Edit.

  3. Erweitern Sie unter Other Settings ​den Abschnitt Erweiterungsauswahl um den Abschnitt HTML Head.

    HTML head {width="600"}

  4. Scrollen Sie nach unten nach unten und legen Sie die Display Demo Store Notice auf Ihre Voreinstellung fest.

  5. Klicken Sie nach Abschluss des Vorgangs auf Save Configuration.

  6. 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.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66