Design

Gestalten Sie Ihren mobilen Auftritt mithilfe von Widgets.

Page-Widgets

Shopgate bietet Page-Widgets an. In diesem Artikel erfahren Sie, wie Sie mithilfe dieser "Bausteine" Ihre mobile Seite bauen können.

Beachten Sie: Wenn Sie das Premium-Design-Paket wählen, ist ein 12-Stunden-Grafik-Service inbegriffen. Senden Sie uns dafür bitte alle notwendigen Grafiken (Banner, Slider, Bilder usw.) – weitere Infos finden Sie in dem zugehörigen Artikel.

Was ist ein Page-Widget?

Ein Page-Widget ist ein spezieller Baustein, um eine mobile Seite für Ihre Apps oder mobile Website zu erstellen.

Widgets werden in unterschiedlichen Größen und Layouts angeboten und können für einen individuellen Look eingesetzt werden. Wird ein Widget geöffnet, kann es Kategorien darstellen, Produktlisten anzeigen, Suchergebnisse wiedergeben und viele mehr.

Wie wird ein Page-Widget eingesetzt?

Um das Widget-System einzusetzen, melden Sie sich zuerst in Ihrem Shopgate-Adminbereich an:

  1. Gehen Sie zu Design → Pages.
  2. Auf der rechten Seite finden Sie ein Drop-down-Menü "Widget hinzufügen".

 

Sie haben die folgenden Widgets zur Auswahl:
Widgets.png
Bild Bild-Slider  Text Editor
Kategorie-Liste Produkt-Liste Produkt-Slider
Live-Shopping Kategoriefilter HTML

 

1.

 

 

Schritt 1: Wählen Sie eine Größe für das Bild.

WICHTIG: Bitte wählen Sie die richtige Größe, bevor Sie das Bild hochladen. Das aktuelle System erlaubt keine Größenänderungen im Nachgang.
  • Verfügbare Größen: 400 x 200 Pixel bis 1.200x1.200 Pixel
  • Smartphone-Breite: 1.200 Pixel
  • Tablet-Breite: 2.400 Pixel

Schritt 2: Klicken Sie auf Bild hochladen, um ein Bild hinzuzufügen.

  • Positionieren Sie Ihr Bild im Vorschaufenster.
  • Zoom mit  und ; Zurücksetzen mit (dies ist nicht "Drehen")
  • Wenn Sie mit dem Bild zufrieden sind, klicken Sie  rechts oben.

Schritt 3: Fügen Sie einen Link zu Ihrem Bild hinzu.

  • Klicken Sie auf das Link-Feld, um den Link-Assistenten zu öffnen. Wählen Sie ein Ziel für diese Seite.

Schritt 4: Fügen Sie Ihrem Bild einen Titel ("Alt text") hinzu.

  • Dieser Titel ist sichtbar, wenn das Bild nicht verfügbar ist oder die Verbindung zu langsam ist.
  • Dieser Titel wird in einem Suchergebnis erscheinen.

Schritt 5: Speichern Sie das Bild

  • Klicken Sie auf die Schaltfläche Hinzufügen am unteren Rand des Fensters.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

2.

 

 

Ein Bild-Slider wird verwendet, um mehrere Bilder anzuzeigen. Sie können die Bilder ansehen, indem Sie auf die Pfeile nach links/rechts tippen oder einfach nach links oder rechts wischen.

Schritt 1: Wählen Sie eine Größe für den Bild-Slider.

WICHTIG: Bitte wählen Sie die richtige Größe, bevor Sie das Bild hochladen. Das aktuelle System erlaubt keine Größenänderungen im Nachgang.
  • Verfügbare Größen: 1.200 x 300 Pixel bis 1.200 x 800 Pixel
  • Smartphone-Breite: 1200 Pixel
  • Tablet-Breite: 2400 Pixel

Schritt 2: Klicken Sie auf Bild hochladen, um ein Bild hinzuzufügen.

  • Positionieren Sie Ihr Bild im Vorschaufenster.
  • Zoom mit  und ; Zurücksetzen mit (dies ist nicht "Drehen").
  • Wenn Sie mit dem Bild zufrieden sind, klicken Sie  rechts oben.

Schritt 3: Fügen Sie einen Link zu Ihrem Bild hinzu.

  • Klicken Sie auf das Link-Feld, um den Link-Assistenten zu öffnen. Wählen Sie ein Ziel für diese Seite.

Schritt 4: Fügen Sie Ihrem Bild einen Titel ("Alt-Text") hinzu.

  • Dieser Titel ist sichtbar, wenn das Bild nicht verfügbar ist oder die Verbindung zu langsam ist.
  • Dieser Titel wird in einem Suchergebnis erscheinen.

Schritt 5: Fügen Sie dem Slider ein weiteres Bild hinzu.

  • Klicken Sie auf Widgets2.png, um ein Bild hinzuzufügen.
  • Wiederholen Sie die obigen Schritte, um dieses Bild zu konfigurieren.

Schritt 6: Slider-Verhalten konfigurieren

  • Automatische Wiedergabe-Slide-Show: Schieben Sie Ihre Bilder automatisch.
  • Aufzählungsnavigation anzeigen: Seitenangaben am unteren Rand der Bilder anzeigen. Es werden maximal 10 Punkte angezeigt.
  • Spielen in einer Endlosschleife: Bilder werden immer in einer Schleife angezeigt
  • Auto Play Intervall (ms): Definieren Sie das Zeitintervall zwischen Ihren Bildern, indem Sie eine Zahl in Millisekunden eingeben.

Schritt 7: Speichern Sie den Slider

  • Nachdem Sie jedes Bild in Ihrem Schieberegler hochgeladen und konfiguriert haben, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

3.

 

Ein Texteditor kann verwendet werden, um einen benutzerdefinierten Inhalt zu erstellen.

Schritt 1: Inhalt erstellen

  • Geben Sie Ihre Texte, Bilder, Tabellen und Links im Textmodus ein.

Schritt 2: Verwenden Sie HTML-Modus

  • Wechseln Sie in den HTML-Modus für mehr Gestaltungselemente.

Schritt 3: Speichern Sie den Code

  • Wenn Sie mit der Seite zufrieden sind, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

4.

 

 

Schritt 1: Wählen Sie eine Kategorie

  • Ihre ersten Kategorien werden standardmäßig angezeigt.
  • Um eine Unterkategorie anzuzeigen, wählen Sie diese aus der Liste aus.

Um weitere Kategorien hinzuzufügen, fügen Sie ein weiteres "Kategorieliste"-Widget hinzu.

Schritt 2: Konfigurieren Sie das Listenverhalten

  • Geben Sie eine Überschrift für diese Kategorieliste ein. Sie sehen die Echtzeitvorschau auf der rechten Seite.
  • Bilder anzeigen: Thumbnail-Vorschaubilder auf der linken Seite einer Kategorie anzeigen.
  • Sortierung: Sortieren Sie Ihre Kategorien nach Relevanz, Name aufsteigend oder Name absteigend.
  • Link zu: "Alle Produkte anzeigen": Zeigen Sie einen Text oben auf der Kategorieliste. Wenn dieser Text angeklickt wird, öffnet sich eine Seite mit allen aufgeführten Produkten.
  • Unterkategorie aufklappen: Wählen Sie aus, ob Sie Ihre Unterkategorien aufklappen möchten.

Schritt 3: Vorschau der Liste

  • Nachdem Sie die Konfigurationen fertiggestellt haben, sehen Sie sich die Kategorieliste rechts an.

Schritt 4: Speichern Sie den Slider

  • Wenn Sie mit der Kategorieliste zufrieden sind, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

5.

 

zu_a_ndern.png

Schritt 1: Produkte auswählen

  • Produkt-Highlights 
  • Suchergebnisse
  • Marken
  • Produktnummern
  • Kategorien

Schritt 2: Konfigurieren Sie das Listenverhalten

  • Geben Sie eine Überschrift für diese Produktliste ein. Sie sehen die Echtzeitvorschau auf der rechten Seite.
  • Layout: Anzeige von Produkten im Raster oder in der Liste
  • Sortierung: Anzeige der Produkte in der Reihenfolge Relevanz, Preis aufsteigend oder Preis absteigend.
  • Anzahl der Produkte pro Ladung: Wählen Sie zwischen 1–24 Produkten pro Ladung.
  • Namen anzeigen: Einschalten, um den Produktnamen in der Liste anzuzeigen.
  • Zeigen Sie die Preise (Sale und Ursprungspreise): Einschalten, um den vergünstigten Preis zusammen mit den ursprünglichen Preis (durchgestrichen) in der Liste zu zeigen.
  • Bewertungen anzeigen: Einschalten, um Produktbewertungen (in Form von 5 Sternen) in der Liste zu zeigen.

Schritt 3: Vorschau der Liste

  • Nachdem Sie die Konfigurationen fertiggestellt haben, sehen Sie sich die Kategorieliste rechts an.

Schritt 4: Speichern Sie den Slider

  • Wenn Sie mit der Kategorieliste zufrieden sind, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

6.

 

zu_a_ndern.png

 

Schritt 1: Produkte auswählen

  • Produkt-Highlights (Standard)
  • Suchergebnisse
  • Marken
  • Produktnummern
  • Kategorien

Schritt 2: Konfigurieren Sie das Listenverhalten

  • Geben Sie eine "Überschrift" für diese Produktliste ein. Sie sehen die Echtzeitvorschau auf der rechten Seite.
  • Layout: Anzeige der Produkte im Standard oder Karussell.
  • Sortierung: Anzeige der Produkte in der Reihenfolge "Relevanz", "Preis aufsteigend" oder "Preis absteigend"
  • Anzahl der Produkte pro Ladung: Wählen Sie zwischen 1–24 Produkten pro Ladung.
  • Namen anzeigen: Einschalten, um Produktnamen in der Liste anzuzeigen.
  • Zeigen Sie die Preise (Sale und Ursprungspreise): Einschalten, um den verbilligten Preis zusammen mit den ursprünglichen Preisen (durchgestrichen) in der Liste zu zeigen.
  • Bewertungen anzeigen: Einschalten, um Produktbewertungen (in Form von 5 Sternen) in der Liste zu zeigen.
  • Automatisches Wiedergabe-Intervall (ms): Wenn Karussell ausgewählt ist, stellen Sie ein Zeitintervall zwischen Ihren Slides in Millisekunden ein. Standardmäßig werden die Slides in einem Intervall von 7000 ms (7 Sekunden) wiedergegeben.

Schritt 3: Vorschau der Liste

  • Nachdem Sie die Konfigurationen fertiggestellt haben, sehen Sie sich die Kategorieliste rechts an.

Schritt 4: Speichern Sie den Slider

  • Wenn Sie mit der Kategorieliste zufrieden sind, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

7.

 

Widget3.png

 

Schritt 1: Widget hinzufügen

  • Klicken Sie auf Hinzufügen, um dieses Widget hinzuzufügen (Screenshot oben).

Schritt 2: Gehen Sie auf die Live-Shopping-Seite

    • Klicken Sie hier, um es in einem neuen Tab zu öffnen.
    • Alternativ öffnen Sie Ihren Shopgate-Adminbereich in einem neuen Tab und navigieren Sie zu Marketing  Live-Shopping.

Schritt 3: Konfigurieren Sie eine Live-Shopping-Promotion

Hinweis: Die Uhrzeit ist im 24-Stunden-Format.
  1. Konfigurieren Sie ein neues Angebot oder gehen Sie durch Ihre aktuellen Angebote, indem Sie den Anweisungen hier folgen.
  2. Stellen Sie sicher, dass alle Aktionen hinzugefügt und aktuell sind. Sie werden nun auf der ausgewählten Seite Ihrer mobilen Website und/oder Apps automatisch angezeigt.

 

8.

 

 

Schritt 1: Wählen Sie eine Kategorie mit Unterkategorien aus.

Schritt 2: Konfigurieren Sie den Filter

  • Geben Sie eine Überschrift für Ihren Filter ein.
  • Wählen Sie 1, 2, 3 oder 4 als die maximalen Ebenen der Unterkategorie.
  • Wenn eine Kategorie weniger Unterkategorie-Ebenen hat, werden nur die verfügbaren Ebenen angezeigt.
  • Geben Sie eine Bezeichnung für jede der Unterkategorien ein. Diese Beschriftungen werden im Filter angezeigt.

Schritt 3: Speichern Sie den Filter

  • Wenn Sie mit Ihrem Kategoriefilter zufrieden sind, klicken Sie auf Speichern.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

9.

 

 

Schritt 1: Eingabe Ihres HTML-Codes

Geben Sie einen HTML-Code im Texteditor im HTML-Modus ein. 

Schritt 2: Testen Sie das Codeverhalten

Testen Sie Ihren Code in einer Codebearbeitungssoftware. Stellen Sie sicher, dass der Code korrekt ist und nicht Ihren mobilen Shop kaputt macht.

Schritt 3: Speichern Sie den Code

  • Wenn Sie mit Ihrem HTML-Code zufrieden sind, klicken Sie unten auf Hinzufügen.
  • Wenn Sie wieder auf der Pages-Seite sind, klicken Sie auf Veröffentlichen.

 

Frequently Asked Questions

Wohin kann ich Bilder verlinken?

Grafiken, die über das Shopgate-Seitenlayout-Widget hochgeladen wurden, können mit einer hier aufgeführten Seite oder Dienstleistung verknüpft werden:

In der App oder mobilen Website
Produkte-Seite Kategorie-Seite Startseite Warenkorb
Merkliste Bestellungen Mein Konto Custom-Page
Versandarten Zahlungsarten  Seite mit Gutschein  Gutschein in den Warenkorb legen
Suchbegriff AGB Widerrufsrecht Impressum
Extern
Anruf E-Mail Externer Link  

 

Was ist der Unterschied zwischen einer Produktliste und einem Produkt-Slider?

Wenn sie mit denselben Produkten konfiguriert wurden, zeigen eine Produktliste und ein Produkt-Slider die gleichen Produkte an. Allerdings ist ein Produkt-Slider kleiner in der Höhe, während eine Produktliste mehr Platz benötigen und dafür auch mehr Informationen zeigen kann.

Ein Produkt-Slider wird empfohlen, um auf der Homepage Platz zu sparen. Ansonsten werden überall standardmäßig Produktlisten verwendet, um Artikel anzuzeigen.

War dieser Beitrag hilfreich?
Sie finden nicht, was Sie suchen?
Wir helfen Ihnen gerne — erstellen Sie ein Support-Ticket.
Kontaktieren Sie den Support