1. Home
  2. Einstellungen
  3. Konfiguration der Product Infobox

Konfiguration der Product Infobox

Konfiguration der Product Infobox

1. Basis :

Zunächst müssen Sie festlegen, ob Sie Ihre Product Infobox „Über dem Buybutton“ oder „Unter dem Buybutton“ positionieren wollen.
Über die Zeile „Hintergrundfarbe“ können Sie sich mittels Klick auf die Schaltfläche für eine Farbe aus der Vorauswahl entscheiden oder einen anderen beliebigen HTML Farbcode einfügen.
Als nächste Basiseinstellung können Sie sich für einen Border (Umrandung) oder dagegen entscheiden. Falls Sie mit einem Border arbeiten, können Sie die Breite in Pixel (px) angeben und den dazugehörigen Style. („doppelt durchgezogen“ ist erst ab einer Pixeldichte von 3px möglich). Ebenfalls einstellbar ist die Farbe via Vorauswahl oder individuellen HTML Farbcode des Borders und der Radius (Abrundung).

2. Überschrift :

Nun haben Sie die Möglichkeit in Ihrer Product Infobox eine Überschrift zu platzieren. Wählen Sie dazu in der Zeile Überschrift anzeigen „Ja“ aus. Auch hier können Sie die Farbe Ihrer Überschrift selbst bestimmen, indem Sie eine Farbe aus der Vorauswahl nehmen oder selbst über einen beliebigen HTML Farbcode Ihre individuelle Farbe bestimmen. Jetzt müssen Ihre eigene Überschrift in die dafür vorgesehene Zeile schreiben. Sie können die Textgröße anpassen und ihre eigene Schriftart auswählen. Eine Auswahl der möglichen Schriftarten finden Sie auf https://fonts.google.com/ . (Einbettung Ihrer ausgewählten Schriftart finden Sie auf dieser Seite ganz unten.)

3. Text und Icons :

Nun können Sie bis zu 6 Textbausteine in Ihre Product Infobox einbringen. Dazu klicken Sie in der Zeile „Vorteil“ einfach auf „Ja“ bis Sie all Ihre Textbausteine eingebracht haben oder das Limit von 6 erreicht ist. Eine „Vorteilsfeld“ konfiguriert man wie folg:
1. Auswählen ob benötigt („Ja“) oder nicht („Nein“).
2. Den entsprechenden Text in die „Vorteil Text“-Zeile.
3. Die Farbe des Textes definieren. Entweder über eine Vorauswahl bestimmen per Klick auf den Pfeil in der Zeile oder einen individuellen HTML Farbcode nutzen.
4. Textgröße in Pixel (px) anpassen.
5. Icon auswählen (Auswahl auf http://fontawesome.io/icons), Icongröße in Pixel (px) bestimmen, ausrichten (links, mittig, rechts) und die Farbe des Icons bestimmen über die Vorauswahl oder einen individuellen HTML Farbcode.
6. Falls Sie Ihre Information verlinken wollen, dann klicken Sie bei „Verlinkung“ auf „Ja“ und geben Sie im Feld direkt drunter den entsprechenden URL ein.
(Die Schriftfarbe vom Link kann bestimmt werden in der Vorauswahl oder über einen individuellen HTML Farbcode. Desweiteren können Sie unter „Schriftfarbe Link Hover“ die Farbe bestimmen, welche angezeigt werden soll, wenn der Cursor auf dem Textfeld steht)

4. Zusatzfeld:

Im Zusatzfeld ist Ihnen die Möglichkeit gegeben „unter den Bulletpoints“ oder „über den Bulletpoints“ einen individuellen Textabschnitt „Text“ einzubringen. Auch hier ist die Schriftgröße, die Schriftart (Einbettung Ihrer ausgewählten Schriftart finden Sie auf dieser Seite ganz unten) und Schriftfarbe frei definierbar. Zusätzlich können Sie einen Border (Umrandung) anzeigen lassen und den Abstand zur Bulletpoint, Abstand des Textes zur Umrandung (border), Breite der Umrandung in Pixel (px), Style, Radius (Rundungen) und Farbe des Borders bestimmen.

Die Konfiguration dieser Schriftarten funktioniert in 5 Schritten:


Vorab: Jedes Element kann seine eigene Schriftart besitzen.


1. Zuerst wählen Sie im Backend Ihres Shopware Shops unter dem Reiter „Einstellungen“ den „Theme Manager“ aus.
2. Als nächstes wählen Sie Ihr aktives Theme aus und klicken im Fenster unten rechts auf die Schalfläche „Theme konfigurieren“.
3. Es erscheint ein neues Fenster. Klicken Sie auf die Schaltfläche „Konfiguration“ im Reiter.
4. Nun sind Sie in der Konfiguration und können unter der erweiterten Einstellung Ihre CSS-Datei einbinden und speichern.
5. Abschließend fügen Sie Ihre Schriftart in dem Plugin der Product Infobox ein.

Ein Beispiel für den Import der Schriftart „Acme“:

1. Suchen Sie die Schriftart „Acme“ auf der Seite von Google Web Fonts und klicken Sie auf „+“ zum hinzufügen.
2. Der nächste Schritt ist die Einbettung in den Theme Manager. Folgender Code wird Ihnen auf Google Web Fonts angezeigt:
<link href=“https://fonts.googleapis.com/css?family=Acme“ rel=“stylesheet“>
3. Dieser wird unter weitere CSS-Dateien in den erweiterte Einstellungen des Theme Manager abgespeichert.
4. Kopieren Sie zum Benutzen der Schriftart nun deren Namen in der Google Web Fonts-Anzeige.
font-family: ‚Acme‘, sans-serif;
5. Schreibweise im Plugin Manager: ‚Acme‘, sans-serif

 

Weitere Informationen und Hilfen finden Sie unter http://dokumentation.whatsdigital.de/ oder bei Fragen per E-Mail an support@whatsdigital.de

Updated on November 6, 2017

Was this article helpful?

Related Articles