Storefront-Design: So installieren und konfigurieren Sie es

Veröffentlicht: 2018-01-12

Storefront ist eines der flexibelsten und erweiterbarsten Themes, wenn es darum geht, einen WooCommerce-Shop mit WordPress zu starten.

Aufgrund seiner sauberen Code-Architektur wurde es bei den Benutzern sehr beliebt und derzeit verwenden mehr als 100.000 Online-Shops Storefront als ihr WordPress-Theme.

WooCommerce Storefront Theme installieren

Es gibt zwei Möglichkeiten, das Storefront-Design zu installieren, entweder durch Suchen des Designs in Ihrem WP-Dashboard oder durch manuelles Hochladen des Designs.

Installation über das WordPress-Dashboard

Der schnellste Weg, Storefront zu installieren, ist über das WordPress-Dashboard. Befolgen Sie diese Schritte, um Storefront über das WordPress-Dashboard zu installieren.

  1. Gehen Sie zu Darstellung > Themen > Neu hinzufügen
  2. Geben Sie „ storefront “ in das Suchfeld ein und drücken Sie die Eingabetaste.
  3. Bewegen Sie den Mauszeiger über den Storefront-Screenshot.
  4. Wählen Sie die Schaltfläche „ Installieren “.
  5. Klicken Sie auf Aktivieren

Storefront manuell installieren

  1. Laden Sie die neueste Version von Storefront von wordpress.org herunter
  2. Gehen Sie zu Darstellung > Themen > Neu hinzufügen
  3. Klicken Sie auf Design hochladen und wählen Sie die zuvor heruntergeladene ZIP-Datei aus.
  4. Klicken Sie auf Jetzt installieren
  5. Klicken Sie auf Aktivieren

Homepage einrichten

Storefront verfügt über eine integrierte Homepage-Vorlage, die gut durchdacht ist. Seine übersichtliche Struktur hilft Ihrem Publikum, die Produkte, die Sie verkaufen, leicht zu finden.

Es gibt 6 Abschnitte in der Standardvorlage für die Storefront-Homepage. Sie können den Abschnitt jedoch je nach Bedarf hinzufügen oder löschen.

Standard-Homepage-Abschnitte:

  • Seiteninhalt
  • Produktkategorien
  • Kürzlich hinzugefügte Produkte
  • Ausgewählte Produkte
  • beliebte Produkte
  • On-Sale-Produkte
  • Meistverkaufte Produkte

Startseitenvorlage zuweisen

Gehen Sie folgendermaßen vor, um die Homepage-Vorlage einzurichten:

  1. Gehen Sie zu Dashboard -> Seiten und erstellen Sie eine Seite mit dem Titel „ Home “ oder wie Sie möchten.
  2. Fügen Sie beliebige Willkommensinhalte hinzu, die über den Produkten angezeigt werden.
  3. Auf der rechten Seite finden Sie ein Feld mit dem Titel „ Seitenattribute “.
  4. Wählen Sie „ Homepage “ aus dem Dropdown-Menü „ Vorlage “.
  5. Klicken Sie auf Veröffentlichen oder Aktualisieren , um die Änderung zu speichern.

Anzeigen der Homepage-Vorlage

Nachdem Sie die Seite veröffentlicht haben, müssen Sie diese Homepage nun als Startseite Ihrer Website anzeigen. Wer also auf Ihrer Website landet, sieht zuerst diese Seite. Um dies einzurichten, folgen Sie diesen Schritten:

  1. Gehen Sie zu Dashboard > Einstellungen > Lesen
  2. Wählen Sie unter Ihre Homepage-Anzeigen eine statische Seite aus (unten auswählen)
  3. Wählen Sie die Zuweisungsseite der vorherigen Homepage-Vorlage im Dropdown-Menü Homepage aus.
  4. Klicken Sie auf Änderungen speichern

Ordnen Sie Storefront-Homepage-Abschnitte neu an

Sie können die Reihenfolge der Abschnitte der Storefront-Homepage mithilfe von Hooks oder mithilfe eines Plugins namens Homepage Control ändern. Führen Sie die folgenden Schritte aus, um Ihre Homepage-Abschnitte neu zu ordnen:

  1. Laden Sie die Homepage-Steuerung herunter und installieren Sie sie
  2. Gehen Sie zu Darstellung -> Anpassen -> Homepage-Steuerung
  3. Ziehen Sie die Abschnitte nach Bedarf und ordnen Sie sie neu an.
  4. Klicken Sie auf Speichern und veröffentlichen , um die Änderungen zu speichern.

Navigationsmenü konfigurieren

Im Storefront-Design können Sie das Menü an 3 Stellen anzeigen.

  1. Primäres Menü – Erscheint direkt unter dem Website-Logo.
  2. Sekundäres Menü – Neben dem Logo in der Nähe des Suchfelds.
  3. Handheld-Menü – Menü für Mobilgeräte.

Einrichten der Menüs

Wenn kein bestimmtes Primärmenü festgelegt ist, zeigt WordPress standardmäßig alle Ihre Seiten als Ihr Primärmenü an. Manchmal verwirrt es Benutzer und macht es ihnen schwer herauszufinden, wie diese Seiten in das Menü gelangt sind.

Ein neues Menü erstellen und Seiten hinzufügen

  1. Gehen Sie zum Admin-Bereich und dann zu Darstellung > Menüs
  2. Ganz oben finden Sie das Feld Menüname. Schreiben Sie hier Ihren Menünamen.
  3. Klicken Sie auf der linken Seite auf Seiten (vorausgesetzt, Sie möchten Seiten zum Menü hinzufügen)
  4. Klicken Sie auf Alle anzeigen, um eine Liste aller veröffentlichten Seiten zu erhalten.
  5. Kreuzen Sie die Seiten an, die im Menü erscheinen sollen.
  6. Nachdem Sie die Seite ausgewählt haben, klicken Sie auf die Schaltfläche Zum Menü hinzufügen.
  7. Ziehen Sie die Menüelemente per Drag & Drop, um sie nach Ihren Wünschen neu anzuordnen.
  8. Klicken Sie auf Menü speichern

Menü zuweisen

Nachdem Sie das Menü erstellt haben, weisen Sie das Menü dem Ort zu, an dem es angezeigt werden soll. Navigieren Sie zu Darstellung > Menüs > Menüeinstellungen und aktivieren Sie den Standort im Kontrollkästchen Standort anzeigen .

Hinzufügen von Produktkategorien zu Ihrem Menü

  1. Gehen Sie zum Admin-Bereich und dann zu Darstellung > Menüs
  2. Klicken Sie oben links auf Bildschirmoptionen und aktivieren Sie Produktkategorien
  3. Jetzt wird im linken Bereich eine Registerkarte Produktkategorien angezeigt.
  4. Klicken Sie zum Erweitern auf die Registerkarte Produktkategorien und wählen Sie die Kategorien aus
  5. Klicken Sie nach der Auswahl auf die Schaltfläche Zum Menü hinzufügen.
  6. Ziehen Sie die Menüelemente per Drag & Drop, um sie nach Ihren Wünschen neu anzuordnen.
  7. Klicken Sie auf Menü speichern

Widget-Einstellungen

Mit Storefront können Sie sechs Widget-Regionen in 3 verschiedenen Bereichen anzeigen.

  1. Seitenleiste – Links oder rechts vom Hauptinhalt der Website,
  2. Unter Kopfzeile – Direkt unter der Kopfzeile der Website und über dem Inhalt.
  3. Fußzeile Spalte 1 – Fußzeilenbereich
  4. Fußzeile Spalte 2 – Fußzeilenbereich
  5. Fußzeile Spalte 3 – Fußzeilenbereich
  6. Fußzeile Spalte 4 – Fußzeilenbereich

WooCommerce einrichten

WooCommerce installieren

  1. Gehen Sie zu Dashboard > Plugins > Neu hinzufügen > Plugins suchen
  2. Suchen Sie nach „WooCommerce“.
  3. Klicken Sie auf Jetzt installieren .
  4. Klicken Sie auf Aktivieren .

WooCommerce konfigurieren

Nach der Aktivierung von WooCommerce werden Sie aufgefordert, WooCommerce mit einem Assistenten zu installieren. Es kümmert sich um alle Anfangseinstellungen. Es ist in 6 Teile gegliedert.

  • Seiteneinrichtung – Konfiguriert automatisch die wesentlichen Seiten (Shop, Warenkorb, Kasse, Mein Konto).
  • Geschäftsstandort – Konfigurieren Sie den Geschäftsstandort, die Währung und die Mehrwertsteuer
  • Versand – Gewichtseinheit und Maßeinheit konfigurieren
  • Zahlungen – Zahlungsgateway einrichten.
  • Theme – Installieren Sie ein WooCommerce-kompatibles Theme.
  • Bereit – (optional) WooCommerce erlauben, Nutzungsinformationen zu sammeln.

Sie können all diese Einstellungen jederzeit über das WooCommerce-Dashboard vornehmen.

Fügen Sie ein Produkt zu WooCommerce hinzu

  1. Gehen Sie zum WordPress-Dashboard
  2. Klicken Sie auf Produkte > Neu hinzufügen
  3. Schreiben Sie Ihren Produktnamen oder Titel in das Feld Produktname .
  4. Schreiben Sie Ihre Produktbeschreibung in den untenstehenden Editor.
  5. Jetzt müssen Sie ein vorgestelltes Bild Ihres Produkts und ein zusätzliches Bild in eine Produktgalerie hochladen.
  6. Auf der rechten Seite finden Sie eine Box mit dem Titel Produktbild & Produktgalerie
  7. Laden Sie das vorgestellte Bild in das Produktbild und zusätzliche Bilder in die Produktgalerie hoch
  8. Klicken Sie auf Veröffentlichen .

Einrichten von Produktpreis und -attribut

So richten Sie den Produktpreis ein Gehen Sie zu Dashboard > Produkte und wählen Sie ein beliebiges Produkt aus. Scrollen Sie dann nach unten zum Abschnitt Produktdaten. Hier ist eine kurze Beschreibung aller Einstellungen im Bereich Produktdaten:

Produktart

  • Einfaches Produkt : Ein einfaches Einzelprodukt.
  • Gruppiertes Produkt : Ein Produkt, das Teil einer Sammlung ist.
  • Externes/Partnerprodukt : Produkt, das in Ihrem Shop gelistet ist, aber das eigentliche Produkt woanders verkauft wird.
  • Variables Produkt : Ein Produkt mit Variationen (Größe, Farben)
  • Virtuelles Produkt : Ein Produkt, das keinen Versand erfordert.
  • Herunterladbares Produkt : Ein Produkt, bei dem Sie eine herunterladbare Datei bereitstellen müssen.

Allgemein

  • Regulärer Preis : Regulärer Produktpreis.
  • Verkaufspreis : Reduzierter Produktpreis.

Inventar

  • SKU : Stock Keep Unit (SKU) verfolgt Produkte
  • Bestand verwalten : Bestandsverwaltung aktivieren
  • Lagerstatus : Ob das Produkt auf Lager oder nicht auf Lager ist.
  • Einzeln verkauft : Kann in einer einzigen Bestellung verkauft werden.

Versand

  • Gewicht: Gewicht des Produkts.
  • Abmessungen: Länge, Breite und Höhe des Produkts.
  • Versandklasse: Gruppieren Sie Produkte ähnlichen Typs zu einer bestimmten Versandart.

Verknüpfte Produkte

  • Upsells : Zeigen Sie verwandte Produkte unterhalb einer Produktdetailseite an.
  • Cross-Selling : Zeigen Sie verwandte Produkte auf der Warenkorbseite an.
  • Attribute : Wählen Sie das globale Attribut Ihres Produkts aus.

Fortschrittlich

  • Kaufbeleg : Notiz, die dem Kunden nach Abschluss des Kaufs zugesendet wird.
  • Menübestellung : Benutzerdefinierte Bestellposition für dieses Produkt.
  • Bewertungen aktivieren : Produktbewertungen aktivieren oder deaktivieren.

Anpassen der Storefront

So fügen Sie ein Logo hinzu

Befolgen Sie diese Schritte, um ein Logo zu Ihrer Website hinzuzufügen und anzuzeigen:
1. Gehen Sie zu WordPress Admin und dann zu Aussehen > Anpassen
2. Gehen Sie dann zu Website-Identität > Logo
3. Klicken Sie auf Logo auswählen, um Ihr Logobild hochzuladen. (Empfohlene Bildgröße: 470 x 110 Pixel)
4. Klicken Sie auf Veröffentlichen.

Wo kann man das Site-Favicon hochladen?

Befolgen Sie diese Schritte, um ein Favicon zu Ihrer Website hinzuzufügen und anzuzeigen:
1. Gehen Sie zu WordPress Admin und dann zu Aussehen > Anpassen
2. Gehen Sie dann zu Website-Identität > Website-Symbol
3. Klicken Sie auf Bild auswählen, um Ihr Logobild hochzuladen. (Empfohlene Bildgröße: 512 x 512 Pixel)
4. Klicken Sie auf Veröffentlichen.

So ändern Sie das Post-Archiv oder das Blog-Layout

  1. Gehen Sie zu Darstellung > Anpassen > Blog-Anpassung > Post-Archive
  2. Wählen Sie das Layout aus dem Post-Archiv-Layout aus
  3. Klicken Sie auf Veröffentlichen

So ändern Sie das Beitragsarchiv oder die Blogspalte

  1. Gehen Sie zu Darstellung > Anpassen > Blog-Anpassung > Post-Archive
  2. Wählen Sie die Spaltennummer (Volle Breite, 2 Spalten, 3 Spalten und 4 Spalten) aus Post Archive Column aus
  3. Klicken Sie auf Veröffentlichen

So ändern Sie das Layout eines einzelnen Posts oder Artikels

  1. Gehen Sie zu Darstellung > Anpassen > Blog-Anpassung > Einzelner Beitrag
  2. Wählen Sie das Layout aus dem Einzelpost-Layout aus
  3. Klicken Sie auf Veröffentlichen

So ändern Sie die Schriftart

  1. Gehen Sie zu Darstellung > Anpassen > Allgemeine Stile > Typografie
  2. Wählen Sie die Schriftart aus den Schriftartpaaren aus
  3. Klicken Sie auf Veröffentlichen

WooCommerce-Anpassung

So ändern Sie das Layout der Shop-Seite

  1. Gehen Sie zu Aussehen > Anpassen > WooCommerce > Shop-Seite – Produktlisten
  2. Wählen Sie das Layout aus dem Produktarchiv-Layout aus
  3. Klicken Sie auf Veröffentlichen

So ändern Sie das Layout der Produktdetailseite

  1. Gehen Sie zu Aussehen > Anpassen > WooCommerce > Shop-Seite – Produktlisten
  2. Wählen Sie das Layout aus dem Produktarchiv-Layout aus
  3. Klicken Sie auf Veröffentlichen