Bestehende Websites - Anpassen Ihrer Einbettungen

Siehe hier für unseren Leitfaden zum Einfügen auf einer bestehenden Website.

Shoprocket bietet die vollständige Kontrolle über das Erscheinungsbild Ihrer Code-Embed-Elemente über den Code-Generator in Ihrem Dashboard.

Wählen Sie, welchen Embed-Typ Sie möchten (einzelnes Produkt-Widget, Vollseitenprodukt, mehrere Produkte oder Warenkorb) und aktivieren/deaktivieren Sie die Elemente, die Sie einfügen möchten, sowie passen Sie die Größen, Stile und Verhaltensweisen an.

Nachdem Sie Änderungen an Ihrem Embed-Code vorgenommen haben, müssen Sie ihn kopieren und an der Stelle auf Ihrer Website einfügen, an der er angezeigt werden soll. (Wenn Sie in Zukunft Änderungen vornehmen, müssen Sie den Code erneut kopieren und einfügen)

Sie können auch im Menü auf der linken Seite auf „Als Standardeinstellungen speichern“ klicken, um Ihre Embed-Einstellungen zu speichern, sodass alle zukünftigen Embed-Codes, die Sie generieren, mit denselben Einstellungen beginnen.

Optionen

Die folgenden Optionen sind im Abschnitt „Optionen“ im linken Menü verfügbar:

1. Anzuzeigende Produkte - Wählen Sie, ob alle Produkte oder nur Produkte aus bestimmten Kategorien angezeigt werden sollen
2. Produktgröße - Legen Sie die Anzeigengröße der eingebetteten Artikel fest (klein, mittel oder groß)
3. Bildanpassung - Definieren Sie, ob die Produktbilder auf die verfügbare Größe zugeschnitten oder verkleinert werden sollen (zuschneiden hält alle Bilder in derselben Größe und einheitlicher)
4. Schaltflächenstil - Wählen Sie zwischen „Standard“ (rechteckige Schaltflächen mit Text), „Minimal“ (kreisförmige Schaltflächen mit Symbolen) oder „Bei Hover“ (kreisförmige Schaltflächen mit Symbolen, die nur beim Überfahren des Produkts angezeigt werden)
5. Standard-Sortierreihenfolge - Definieren Sie die Sortierreihenfolge, nach der Produkte standardmäßig aufgelistet werden (Standard, Neueste zuerst, Name: A-Z, Name: Z-A, Preis: Niedrig-Hoch, Preis: Hoch-Niedrig)
6. Produkte pro Seite - Geben Sie an, wie viele Produkte in der Ansicht geladen werden sollen
7. Ausverkaufte Produkte ausblenden - Wählen Sie, ob Produkte, die ausverkauft sind, vollständig ausgeblendet oder mit einer „Ausverkauft“-Meldung angezeigt werden sollen

Inklusive

Sie können auch festlegen, welche Elemente enthalten sein sollen, z. B. die „Produkt anzeigen“-Schaltfläche und die „Bänder“

Die folgenden Inklusive sind im Abschnitt „Inklusive“ im linken Menü verfügbar:

1. Suchfeld - Zeigt das „Such“-Feld über Ihrem Produkte-Embed an (nur verfügbar bei mehreren Produkte-Embeds)
2. Sortierfeld - Zeigt das Dropdown-Menü zur Sortierreihenfolge an (nur verfügbar bei mehreren Produkte-Embeds)
3. Limiter pro Seite - Zeigt das Dropdown-Menü „Artikel pro Seite“ an (nur verfügbar bei mehreren Produkte-Embeds)
4. Währungsfeld - Zeigt das Währungsdropdown an, damit Kunden die Preise in ihrer bevorzugten Währung anzeigen können (Währungen müssen zuerst in Ihren Shop-Einstellungen aktiviert werden)
5. Sprachfeld - Zeigt das Sprachdropdown an, damit Kunden die Sprache wechseln können (Store-Texte müssen zuerst in Ihren Einstellungen eingerichtet werden)
6. Kategorienfeld - Zeigt das Dropdown-Menü für Kategorien an, das es Kunden ermöglicht, Produkte nach Kategorien zu filtern (nur verfügbar bei mehreren Produkte-Embeds)
7. Produktname - Zeigt den Produktnamen an
8. Produktpreis - Zeigt den Produktpreis an
9. Produktbild - Zeigt das Hauptbild des Produkts an
10. Produktzusammenfassung - Zeigt den Produktzusammenfassungstext an
11. Produkt anzeigen-Schaltfläche - Zeigt die Schaltfläche an, um die vollständigen Produktdetails in einem Modal zu öffnen
12. In den Warenkorb-Schaltfläche - Zeigt die Schaltfläche an, um den Artikel in den Warenkorb zu legen (Optionen erscheinen oben beim Hover, Produkte, die fortgeschrittenere Optionen/Variationen erfordern, öffnen das Produkt-Modal beim Klicken)
13. Min./Max.-Bestellmenge - Zeigt die verfügbaren Mindest- und Höchstbestellmengen an, wenn diese in Ihrem Produkt festgelegt sind
14. Versandkostenfreies Band - Zeigt das „Versandkostenfrei“-Band an, wenn es für Ihr Produkt zutrifft
15. Neues Produktband - Zeigt das „Neu“-Band für Produkte an, die in den letzten 20 Tagen hinzugefügt wurden
16. Digitale Downloadband - Zeigt das „Digitaler Download“-Band für Produkte an, die beim Kauf eine herunterladbare Datei enthalten

Produkt-Popup anzeigen

Für Produkte, die die Option „Produkt anzeigen“ aktiviert haben, können Sie anpassen, welche der folgenden Elemente im Modal angezeigt werden sollen:

1. Produktname - Zeigt den Produktnamen an
2. Produktpreis - Zeigt den Produktpreis an
3. Mengenwahl - Zeigt das Auswahlfeld für die Menge an (wenn deaktiviert, kann nur 1 Artikel gleichzeitig in den Warenkorb gelegt werden)
4. Produktbild - Zeigt die Bildgalerie des Produkts an
5. Bildminiaturen - Zeigt die Miniaturen der Bildgalerie an
6. Produktbewertungen - Zeigt die Produktbewertungen an
7. Produktzusammenfassung - Zeigt den Produktzusammenfassungstext an
8. Produktbeschreibung - Zeigt die Produktbeschreibung an
9. Produkt SKU - Zeigt die Artikelnummer (SKU) des Produkts an
10. Produktkategorien - Zeigt die verlinkten Kategorien der Produkte an
11. Soziale Sharing-Symbole - Zeigt Schaltflächen an, die eine 1-Klick-Sharing des Produkts auf sozialen Medien ermöglichen
12. Verwandte Produkte - Zeigt die verwandten Produkte an
13. Min./Max.-Bestellmenge - Zeigt die verfügbaren Mindest- und Höchstbestellmengen an, wenn diese in Ihrem Produkt festgelegt sind

Sie können auch aus den folgenden Optionen wählen:

1. Bildanpassung - Definieren Sie, ob die Produktbilder auf die verfügbare Größe zugeschnitten oder verkleinert werden sollen (zuschneiden hält alle Bilder in derselben Größe und einheitlicher)
2. Bildbreite - Legen Sie die Breite der Bilder fest
3. Bildhöhe - Legen Sie die Höhe der Bilder fest
4. Miniaturlayout - Positionieren Sie die Miniaturen der Bildgalerie horizontal unter der Bildgalerie oder vertikal zu links
5. Variationsstil - Wählen Sie zwischen standard „Dropdown“-Menüs oder „einfachen“ Textmenüs
   (in der Neuentwicklung)

Stile

Sie können die folgenden Farben über den Generator anpassen:

• Produktname
• Produktpreis
• Produktzusammenfassung
• Hintergrund der Kauf-Schaltfläche
• Text/Icon der Kauf-Schaltfläche
• Hintergrund der Produkt anzeigen-Schaltfläche
• Text/Icon der anzeigen-Schaltfläche
• Hintergrund der Warenkorb anzeigen-Schaltfläche
• Text der Warenkorb anzeigen-Schaltfläche
• Farbe des Warenkorb-Widgets
• Hintergrund des Warenkorbs
• Textfarbe des Warenkorbs
• Hintergrund des Produktartikels

Für diejenigen mit Programmierkenntnissen können Sie natürlich Ihre eigenen CSS-Regeln verwenden, um die Embeds nach Belieben zu gestalten. Wir verwenden keine iFrames, sodass der gesamte Inhalt, der in Ihre Seite gerendert wurde, Teil des DOM ist und mit Ihren eigenen CSS gestaltet werden kann.

Stellen Sie einfach sicher, dass Ihre CSS-Regeln spezifischer sind als unsere.

Beispielsweise haben wir diese Regel:

.sr-filters-wrap {
   background: #fff;
}

Um das zu überschreiben, erstellen Sie Ihre eigene CSS-Regel mit einem vorgeschalteten Elternelement, wie:

body .sr-filters-wrap { 
   background: #000; 
}

Weil Sie die „body“-Elemente vor unserer Regel hinzugefügt haben, wird diese spezifischer und hat Vorrang. 

Sie können auch Änderungen direkt im Code-Embed-Generator vornehmen, wenn Sie damit vertrauter sind.