# Pluto - Fashion Template

## Installation <a href="#installation" id="installation"></a>

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.

{% embed url="<http://store.shopware.com/detail/index/sArticle/163992>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

## Theme Manager <a href="#theme_manager" id="theme_manager"></a>

Nach der erfolgreichen Installation des Plugins öffnen Sie bitte den Themen Manager.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FHp3CGWa6b4uGPDFHocGF%2FSW-ThemePluto-01.jpg?alt=media&#x26;token=dfebd857-33de-4fe2-ae50-5909b37d7602" alt="" width="375"><figcaption></figcaption></figure>

Wählen Sie das Theme Pluto aus und klicken Sie unten rechts auf "Theme konfigurieren".

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FjMw0tCsG7fX79NbGB8ho%2FSW-ThemePluto-02.jpg?alt=media&#x26;token=54f8f7fa-5dad-4d83-928d-5c0ca580e299" alt="" width="375"><figcaption></figcaption></figure>

Klicken Sie nun in diesem Fenster unten auf "Konfigurations-Vorlagen". Im darauf folgenden Fenster wählen Sie sich eine Pluto Farbvorlagen aus und klicken auf laden und anschließend auf speichern.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FzTpuwIQkMYnk4AlKcY3B%2FSW-ThemePluto-03.jpg?alt=media&#x26;token=26bf455c-be5e-42ee-b584-d926bf8ba3b1" alt="" width="375"><figcaption></figcaption></figure>

Jetzt klicken Sie noch auf "Theme zuweisen" löschen den Cache und kompilieren das Theme neu - Fertig.

{% hint style="warning" %}
**TIPP:** Wir empfehlen Ihnen IMMER ein neues Theme zu erstellen (Nutzen Sie hierzu in der Übersicht den Button "Theme erstellen") und leiten das Theme Pluto davon ab. Individuelle Einstellungen oder Abänderungen im Template sind somit vor Updates geschützt und gehen nicht verloren.
{% endhint %}

## Einstellungen im Theme Manager <a href="#einstellungen_manager" id="einstellungen_manager"></a>

Im Theme Manager können Sie, wie gewohnt, Ihre Einstellung zum Aussehen Ihres Shops gestalten. Zu den Standard Tabs von Shopware ist ein weiterer mit dem Namen "Theme Pluto" hinzugekommen. Hier können Sie nicht nur Farben und Schriften verändern, sondern auch Globale Einstellungen treffen, HTML-Tag Code für diverse Programme hinterlegen, Plugins aktivieren & deaktivieren sowie diverse Icons hinzufügen. Alle Einstellungen sind übersichtlich in weiteren Taps gegliedert. Durch diese Untergliederung wird deutlich wo die Veränderung stattfindet.

### Allgemeine Einstellungen <a href="#einstellungen_allgemeine" id="einstellungen_allgemeine"></a>

Im Theme unter den Tap: "Theme Pluto > Allgemein" können Sie grundlegende Einstellungen oder auch Benachrichtigungen bzw. Informationen einstellen und hinterlegen. Hier können Sie die Schriftart ändern, einen globaler Benachrichtigung ankündigen, mit den Sidebar Widget interessanten Fakten zu Ihrem Shop anzeigen lassen, über die Footer Info Widget Funktion ihre Telefonnummer einblenden, Ihre Seite mit Hilfe von den Webmaster-Tools überwachen lassen und die wichtigen Datenschutz Hinweise an den entsprechenden Stellen einblenden.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FdxWI8SThbteOL9jLrMko%2FSW-ThemePluto-04.jpg?alt=media&#x26;token=112f16bf-247d-4b1e-a794-246df731eaea" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FAN4a52ibeOFQ8MhbeXwV%2FSW-ThemePluto-05.jpg?alt=media&#x26;token=7ccb324e-ba64-42db-b235-8d8ff1216ce1" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FbTTNnQAdaezfepNLjnlI%2FSW-ThemePluto-06.jpg?alt=media&#x26;token=d1718435-bc68-4a9e-8c55-1b707fb664d3" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FJ4V0VeIAQT3SEHo7GWoV%2FSW-ThemePluto-07.jpg?alt=media&#x26;token=23902f96-be3d-4cbe-ab54-f18539d920f0" alt=""><figcaption></figcaption></figure></div>

#### **Schriftart**

Sie haben hier die Möglichkeit zwei verschiedene Schriftarten zu nutzen. Die primäre Schriftart wird für Überschriften genutzt. Mit der sekundäre Schriftart ändern Sie alle anderen Texte, wie z. B. Beschreibungstexte und Menüpunkte.

| Primäre Schriftart   | Legen Sie hier die Schriftart fest, welche unter anderem für Headlines genommen wird |
| -------------------- | ------------------------------------------------------------------------------------ |
| Sekundäre Schriftart | Legen Sie hier die Schriftart fest, welche für Beschreibungen genommen werden soll   |

Wählen Sie zwischen den folgenden 16 Schriftarten Ihre primäre sowie sekundäre Schriftart aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNcBgMuKpldFJgiQMKNFJ%2FSW-ThemeMars-09.jpg?alt=media&#x26;token=b3bdb200-10a8-4d99-99c5-be9d5d9dae49" alt=""><figcaption></figcaption></figure>

#### **Globaler Benachrichtigungstext**

Am oberen oder unteren Bildschirmrand wird ein globaler Text für Ankündigungen (z.B. Betriebsurlaub oder Verkaufsaktionen) angezeigt.

| Plugin aktiv                 | Wenn aktiv, dann wird die Meldung angezeigt                                                                                                 |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Auch auf Smartphone anzeigen | Wenn aktiv, dann wird der Benachrichtigungstext auch auf dem Smartphone angezeigt                                                           |
| Anzeigen auf                 | Auf welchen Seiten soll der Benachrichtigungstext angezeigt werden (Mehrfachauswahl möglich)                                                |
| Startdatum                   | Legen Sie bei Bedarf ein Startdatum für die Anzeige fest                                                                                    |
| Enddatum                     | Legen Sie bei Bedarf ein Enddatum für die Anzeige fest                                                                                      |
| Position                     | Wählen Sie die Position der Benachrichtigung (oben oder unten)                                                                              |
| Schriftfarbe                 | Legen Sie die Schriftfarbe fest                                                                                                             |
| Hintergrundfarbe             | Legen Sie die Hintergrundfarbe fest                                                                                                         |
| Benachrichtigungstext        | Schreiben Sie Ihre Nachricht in das Feld                                                                                                    |
| Link                         | Geben Sie einen Link zu z. B. einer Infoseite an                                                                                            |
| Link Text                    | Text des Buttons, auf welchem der Kundeklicken muss, um den Link aufzurufen. Der Link funktioniert nur, wenn das Feld "Link ausgefüllt ist" |

#### **Sidebar Widget**

Am linken oder rechten Bildschirmrand wird eine Box für z. B. Informationen oder Werbeaktionen angeheftet. Die Box bleibt beim Scrollen immer an der gleichen Stelle.

| Widget aktiv      | Wenn aktiv, dann wird das Widget am seitlichen Rand des Bildschirms angezeigt  |
| ----------------- | ------------------------------------------------------------------------------ |
| Anzeigen auf      | Auf welchen Seiten soll das Widget angezeigt werden (Mehrfachauswahlt möglich) |
| Startdatum        | Legen Sie bei Bedarf ein Startdatum für die Anzeige fest                       |
| Enddatum          | Legen Sie bei Bedarf ein Enddatum für die Anzeige fest                         |
| Position          | Wählen Sie die Position der Benachrichtigung (links oder rechts)               |
| Abstand nach oben | Wie groß soll der Abstand zum oberen Bildschirmrand sein (Angabe in Prozent)   |
| Box Headline      | Was soll im permanent sichtbaren Bereich stehen                                |
| Hintergrundfarbe  | Bestimmen Sie die Hintergrundfarbe                                             |
| Deckkraft         | Bestimmen Sie die Deckkraft der Hintergrundfarbe                               |
| Schriftfarbe      | Bestimmen Sie die Schriftfarbe                                                 |
| Boxinhalt         | Was soll im eingeblendten Bereich stehen                                       |
| Icon              | Wählen Sie ein Icon                                                            |

Wählen Sie zwischen den folgenden Icons das für Sie passende aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNcBgMuKpldFJgiQMKNFJ%2FSW-ThemeMars-09.jpg?alt=media&#x26;token=b3bdb200-10a8-4d99-99c5-be9d5d9dae49" alt=""><figcaption></figcaption></figure>

#### **Footer Info Widget**

Im unteren Bildschirmrand kann eine Box mit z. B. Ihrer Service Hotline angeheftet werden. Die Box bleibt beim Scrollen immer an der gleichen Stelle.

| Widget aktiv                  | Wenn aktiv, dann wird das Widget am unteren Rand des Bildschirms angezeigt                |
| ----------------------------- | ----------------------------------------------------------------------------------------- |
| Auch auf Smartphone anzeigen  | Wenn aktiv, dann wird das Widget auch auf dem Smartphone angezeigt                        |
| Anzeigen auf                  | Auf welchen Seiten soll das Widget angezeigt werden (Mehrfachauswahl möglich)             |
| Abstand zum Rand (in Prozent) | Wie groß soll der Abstand zum rechten bzw. linken Bildschirmrand sein (Angabe in Prozent) |
| Headline                      | Bestimmen Sie eine Headline                                                               |
| Text                          | Bestimmen Sie einen Text                                                                  |
| Hintergrundfarbe              | Bestimmen Sie eine Hintergrundfarbe                                                       |
| Deckkraft                     | Bestimmen Sie die Deckkraft der Hintergrundfarbe                                          |
| Schriftfarbe                  | Bestimmen Sie die Schriftfarbe                                                            |
| Icon                          | Wählen Sie ein Icon                                                                       |
| Link für Icon                 | Wird hier ein Link eingetragen, ist das Icon verlinkt                                     |

Wählen Sie zwischen den folgenden Icons das für Sie passende aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FBR2wsl8Z0cKgl8BPxL7R%2FSW-ThemeMars-10.jpg?alt=media&#x26;token=55e2e7f9-3dfe-447f-85f3-20434fc2a994" alt=""><figcaption></figcaption></figure>

#### **Webmaster-Tools HTML-Tag Code**

Behalten Sie mit diversen Tool von Google, Alexa, Bing oder Pinterest Ihre Webseite im Blick.

| Verification Key Google    | Google Webmaster-Tools HTML-Tag Code    |
| -------------------------- | --------------------------------------- |
| Verification Key Bing      | Bing Webmaster-Tools HTML-Tag Code      |
| Verification Key Alexa     | Alexa Webmaster-Tools HTML-Tag Code     |
| Verification Key Pinterest | Pinterest Webmaster-Tools HTML-Tag Code |

#### **DSGVO Datenschutz Erweiterungen**

An allen Stellen die personenbezogene Daten verarbeiten, sollten Sie einen Hinweis auf die Datenschutzbestimmungen platzieren - DSGVO. Übersetzungen und Anpassungen des Textes können über den Textbaustein "PrivacyEnhancement" vorgenommen werden.

| Formulare                  | Wie soll der Hinweis in den Formularen angezeigt werden                  |
| -------------------------- | ------------------------------------------------------------------------ |
| Registrierung              | Wie soll der Hinweis bei der Registrierung angezeigt werden              |
| Newsletter                 | Wie soll der Hinweis beim Newsletter angezeigt werden                    |
| Newsletter Footer          | Wie soll der Hinweis beim Newsletter Footer angezeigt werden             |
| Blog Kommentare            | Wie soll der Hinweis beim Blog Kommentar angezeigt werden                |
| Artikel Bewertungen        | Wie soll der Hinweis bei den Artikel Bewertungen angezeigt werden        |
| Artikel Benachrichtigungen | Wie soll der Hinweis bei den Artikel Benachrichtigungen angezeigt werden |
| Artikel Empfehlungen       | Wie soll der Hinweis bei den Artikel Empfehlungen angezeigt werden       |
| Link im modalen Fenster    | Wenn aktiv, dann wird der Link in einem modalen Fenster angezeigt        |

### Farbeinstellungen <a href="#einstellungen_farben" id="einstellungen_farben"></a>

Bereits in den Standard Einstellungen des Theme können Sie einige Veränderungen am Template vornehmen. Mit dem Tap:" Theme Pluto > Farben" erweitern sich Ihre Möglichkeiten um ein vielfaches, zudem haben Sie hier die Möglichkeit ein Hintergrundbild einzufügen. Sie haben die Möglichkeit Einstellungen in der Top Bar, im Header, in der Main Navigation, für die Filter und Sortierung, den Tabs, den Primary Button, den Checkout und den Footer vornehmen.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FPSzxy0lRemq52fYUb124%2FSW-ThemePluto-08.jpg?alt=media&#x26;token=88013959-a0fb-488a-bc39-5d35185bbb08" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FxJBd59XmO4ZJWtx7SH9B%2FSW-ThemePluto-09.jpg?alt=media&#x26;token=b6ac4337-30e7-4b0d-bc45-5a173414aef7" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FdAxSnsiT0RiPK3ht9U7i%2FSW-ThemePluto-10.jpg?alt=media&#x26;token=873cea43-3b0b-4ae9-b21c-01a805e8397c" alt=""><figcaption></figcaption></figure></div>

#### **Hintergrund**

Bestimmen Sie hier die Farbe und/oder das Hintergrundbild, welches verwendet werden soll.

| Hintergrundfarbe    | Wählen Sie die Hintergrundfarbe                                                                                                         |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Hintergrundbild     | Wählen Sie das Hintergrundbild aus dem Medienmanager aus                                                                                |
| Abstand zum Content | Wie groß soll der Abstand von Hintergrundbild und Content sein. Angaben in Pixel (nur verwenden wenn Sie ein Hintergrundbild verwenden) |
| Position            | Legen Sie die Position des Hintergrundbildes fest                                                                                       |
| Wiederholung        | Legen Sie fest, ob ein Hintergrundbild über die gesamte Breite und/oder Höhe wiederholt werden soll                                     |
| Fixieren            | Soll das Hintergrundbild fixiert werden oder mit scrollen                                                                               |

### Header Einstellungen <a href="#einstellungen_header" id="einstellungen_header"></a>

Gestalten Sie unter den Tap: "Theme Pluto > Header" Ihren Header mit individuellen Einstellungen und erweitern Sie ihn mit den enthaltenen Plugins. Folgende Funktionen und Plugins sind hier untergebracht: die Top Bar, die Logo Größe, das Sticky Menü, die Breadcrumb Erweitert und der Scroll To Top Button.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FENIGgqOGlsL04FVdp6SB%2FSW-ThemePluto-11.jpg?alt=media&#x26;token=2dd77a87-529e-42ad-b8c6-e41f3983ce0e" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNWX0X2FjAqH6hzT2zYQP%2FSW-ThemePluto-12.jpg?alt=media&#x26;token=e6a03169-409d-4f54-b633-7e7e7d542bb6" alt=""><figcaption></figcaption></figure></div>

#### **Top Bar**

Zeigen Sie, über Ihrem Header oder Footer, Ihre drei wichtigsten Vorteile prominent an. Über die Textbausteine: "description1", "description2" und "description3" können Sie die Vorteile jederzeit anpassen.

| Top Bar aktiv | Wenn aktiv, dann wird die Top Bar angezeigt                                          |
| ------------- | ------------------------------------------------------------------------------------ |
| Position      | Soll die Top Bar über dem Header oder über dem Newsletter im Footer angezeigt werden |
| Höhe          | Bestimmen Sie die Höhe der Top Bar. Angaben in Pixel.                                |
| Schriftgröße  | Bestimmen Sie die Schriftgröße. Angaben in Pixel                                     |
| Icon          | Wählen Sie die Icons vor den Texten aus                                              |

Wählen Sie zwischen den folgenden Icons das für Sie passende aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNcBgMuKpldFJgiQMKNFJ%2FSW-ThemeMars-09.jpg?alt=media&#x26;token=b3bdb200-10a8-4d99-99c5-be9d5d9dae49" alt=""><figcaption></figcaption></figure>

#### **Logo Größe**

Stellen Sie für jedes Endgerät individuell die Größe Ihres hinterlegten Logos ein.

| Höhe auf dem Smartphone | Bestimmen Sie die Höhe des Logos auf dem Smartphone |
| ----------------------- | --------------------------------------------------- |
| Höhe auf dem Tablet     | Bestimmen Sie die Höhe des Logos auf dem Tablet     |
| Höhe auf dem Desktop    | Bestimmen Sie die Höhe des Logos auf dem Desktop    |

#### **Sticky Menü**

Minimierter Header der beim Scrollen am oberen Bildschirmrand fixiert wird und sich erst wieder ausgeblendet, wenn der Header im sichtbaren Bereich erscheint.

| Plugin aktive                | Wenn aktiv, dann wird das Sticky Menü angezeigt                                                          |
| ---------------------------- | -------------------------------------------------------------------------------------------------------- |
| Sticky Menü anzeigen als     | Wählen Sie aus vier unterscheidlichen Darstellungsarten eine aus                                         |
| Auch auf Tablet anzeigen     | Soll das Sticky Menü auch auf einem Tablet angezeigt werden                                              |
| Auch auf Smartphone anzeigen | Soll das Sticky Menü auch auf einem Smartphone angezeigt werdenn                                         |
| Verzögerung beim Einblenden  | Wie schnell soll das Sticky Menü eingeblendet werden? Angaben in Millisekunden                           |
| Logo                         | Hier können Sie ein abwechendes Logo hochladen. Bleibt das Feld leer, wird das Smartphone Logo verwendet |

#### **Breadcrumb Erweitert**

Mittels eines Mouseover, auf eine Kategorie im Breadcrumb und einer kurzen Verweildauer, werden die jeweiligen Unterkategorien in einem Layer eingeblendet.

| Plugin aktive               | Wenn aktiv, dann wird das Sticky Menü angezeigt                                |
| --------------------------- | ------------------------------------------------------------------------------ |
| Verzögerung beim Einblenden | Wie schnell soll das Sticky Menü eingeblendet werden? Angaben in Millisekunden |

#### **Scroll To Top Button**

Mittels Knopfdruck, können Ihre Kunden in Sekundenschnelle wieder an den Anfang der Seite gelangen. Der Button wird im unteren rechten Bildschirmrand eingeblendet.

| Plugin aktive               | Wenn aktiv, dann wird das Sticky Menü angezeigt                                        |
| --------------------------- | -------------------------------------------------------------------------------------- |
| Position                    | Wählen Sie die Position des Buttons                                                    |
| Abstand zum seitlichen Rand | Wie groß soll der Abstand zum seitlichen Bildschirmrand sein? Angaben in Pixel         |
| Abstand nach unten          | Wie groß soll der Abstand zum unteren Bildschirmrand sein? Angaben in Pixel            |
| Button style                | Bestimmen Sie das Aussehen des Buttons                                                 |
| Scroll Geschwindigkeit      | Mit welcher Geschwindigkeit soll nach oben gescrollt werden. Angaben in Millisekunden. |

### Kategorien Einstellungen <a href="#einstellungen_kategorien" id="einstellungen_kategorien"></a>

Im Tap: "Theme Pluto > Kategorien" können diverse allgemeine Einstellungen, wie z. B. Position der Kategorietexte und Banner festgelegt werden. Zwei Promotion Boxen über und unter der Sidebar individuell mit Texten oder Bannern zu füllen. Bestimmen Sie die Darstellung der Filter auf der linken Seite und entscheiden Sie, wie die Artikelbilder animiert werden sollen.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F3L4PyHiVr0zTWy4ut2MI%2FSW-ThemePluto-13.jpg?alt=media&#x26;token=0ba335f8-7897-41c2-94a4-c2ed0d3a2107" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FObC28vTfeyWKcwtwbjqi%2FSW-ThemePluto-14.jpg?alt=media&#x26;token=230ce960-9ee7-40f7-b4ca-8e56b811cdd9" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FQCC933lQW387VkmqQKpP%2FSW-ThemePluto-15.jpg?alt=media&#x26;token=b77e2c17-5542-4bda-a442-655171ebf441" alt=""><figcaption></figcaption></figure></div>

#### **Allgemeine Einstellungen**

Hier können Sie weitere grundlegende Einstellungen für die Ansicht in den Kategorien einstellen.

| Kategorie Banner   | Die Banner werden im Listing über dem Content (unter dem Breadcrumb) angezeigt     |
| ------------------ | ---------------------------------------------------------------------------------- |
| Kategorie Text     | Kategorie Texte unterhalb des Listing anzeigen                                     |
| Sidebar Navigation | Nur die gewählte Hauptkategorie + Unterkategorien im linken Kategoriebaum anzeigen |
| Lieferstatus       | Lieferstatus im Listing und in der Suche anzeigen                                  |
| Versandkostenfrei  | Versandkostenfrei im Listing und in der Suche anzeigen                             |
| Versandkostenfrei  | Versandkostenfrei auch in den Slidern anzeigen                                     |

#### **Promotion Boxen in Sidebar**

Sie haben die Möglichkeit über und unter der Sidebar Boxen mit z. B. Informationen oder Banner erscheinen zu lassen. Diese Informationen können auf allen Kategorie Seiten, Formularen und/oder Shopseiten angezeigt werden.

| Box aktiv    | Wenn aktiv, dann wird der Inhalt der Box oberhalb bzw. unterhalb der Sidebar angezeigt |
| ------------ | -------------------------------------------------------------------------------------- |
| Anzeigen auf | Auf welchen Seiten soll das Widget angezeigt werden (Mehrfachauswahl möglich)          |
| Startdatum   | Legen Sie bei Bedarf ein Startdatum für die Anzeige fest                               |
| Enddatum     | Legen Sie bei Bedarf ein Enddatum für die Anzeige fest                                 |
| Box Inhalt   | Hinterlegen Sie hier Informationen und/oder Bilder.                                    |

#### **Filter in Sidebar**

Lassen Sie Ihre Filter prominent in der Sidebar erscheinen.

| Plugin aktive                | Wenn aktiv, dann werden die Filter in der Sidebar angezeigt                            |
| ---------------------------- | -------------------------------------------------------------------------------------- |
| Filter in der Suche anzeigen | Wenn aktiv, dann werden die Filter auch in der Suche in der Sidebar angezeigt          |
| Filter Position              | An welcher Position sollen die Filter angezeigt werden.                                |
| Filter immer offen           | Wenn aktiv, werden alle Filter offen angezeigt                                         |
| Die ersten x Filter öffnen   | Nur die ersten x Filter öffnen. Die anderen Filter bleiben geschlossen.                |
| Filter direkt absenden       | Sofort nach Aktivierung einer Filteroption werden die entsprechenden Artikel angezeigt |

#### **Artikelbild wechseln / zoomen**

Bei Mouseover können Sie die Artikelbilder per Animation hervorheben lassen. Sie haben hierfür zwei Möglichkeiten( 1. Variante: Bildzoom = Vergrößerung des Bildes / 2. Variante: Bildwechsel = Einblendung des zweiten Artikelbildes)

| Plugin aktive         | Wenn aktiv, dann werden die Bilder im Listing und/oder den Einkaufswelten bei Mouseover automatisch gewechselt oder gezoomt |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| Effekt                | Welche Animation soll genutzt werden                                                                                        |
| Aktiv für             | Auf welchen Seiten soll der Effekt genutzt werden                                                                           |
| Dauer des Übergangs   | Wie lange soll der Übergang dauern                                                                                          |
| Geschwindigkeitskurve | Bestimmen Sie die Geschwindigkeitskurve des Übergangs                                                                       |
| Zoomfaktor            | Um wie viel Prozent soll das Artikelbild vergrößert werden > min 100 / max 150 (nur für Bildzoom)                           |

### Detail Einstellungen <a href="#einstellungen_detail" id="einstellungen_detail"></a>

Die Einstellungen der Detailseite finden Sie unter: "Theme Pluto > Detail". Hier können Sie den hilfreichen Hinweistext für Ihre Kunden ausgebe "Bitte wählen Sie eine Variante aus". Des Weiteren können Sie direkt neben der Beschreibung aktuelle Bewertungen darstellen lassen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fhg6wwtb3zvSLDlrFVUta%2FSW-ThemePluto-16.jpg?alt=media&#x26;token=2bbd5053-6591-4a90-b45e-ca7c529ea221" alt="" width="375"><figcaption></figcaption></figure>

#### **Infobox - Bitte wählen Sie eine Variante aus**

Lassen Sie eine Meldung bei Variantenartikel anzeigen, bei dem Kunden erst eine Variante wählen müssen. Über den Textbaustein "DetailBuyVariantInfo" können Sie den Hinweistext verändern.

| Infobox aktive | Wenn aktiv, dann wird die Meldung angezeigt                                  |
| -------------- | ---------------------------------------------------------------------------- |
| Box Styling    | Wie soll die Box dargestellt werden (Auswahl der Shopware Standardmeldungen) |
| Icon           | Welches Icon soll vor dem Text angezeigt werden                              |

Wählen Sie zwischen den folgenden Icons das für Sie passende aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FNcBgMuKpldFJgiQMKNFJ%2FSW-ThemeMars-09.jpg?alt=media&#x26;token=b3bdb200-10a8-4d99-99c5-be9d5d9dae49" alt=""><figcaption></figcaption></figure>

#### **Bewertungen in der Beschreibung**

Präsentieren Sie Ihre Kundenbewertungen, auf der rechten Seite, neben der Artikelbeschreibung.

| Bewertung aktive        | Wenn aktiv, dann werden Bewertungen auch neben der Beschreibung angezeigt |
| ----------------------- | ------------------------------------------------------------------------- |
| Anzahl der Bewertungen  | Wie viele Bewertungen sollen neben der Beschreibung angezeigt werden      |
| Hintergrundfarbe        | Bestimmen Sie die Hintergrundfarbe der Bewertungen                        |
| Button style            | Wie soll der Button dargestellt werden                                    |
| Kein Styling hinzufügen | Definiert, dass kein weiteres Layout-Styling hinzugefügt wird.            |

### Footer Einstellungen <a href="#einstellungen_footer" id="einstellungen_footer"></a>

Im Tap: "Theme Pluto > Footer " haben Sie erstmals die Möglichkeit Ihren Footer auf vier Zeilen mit unterschiedlichen Spalte Layouts zu vergrößern. Mittels Textbausteine können Sie diese komfortabel befüllen. Sie haben die Möglichkeit Ihre Social Media Kanäle mit ihrem Shop zu verbinden und die angebotenen Zahlungs- und Versandarten prominent zu platzieren.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FaM8sx1PLT9cZuJgBfS9D%2FSW-ThemePluto-17.jpg?alt=media&#x26;token=6edbfa7f-fce8-4580-81dc-76047f8416d3" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FdoDsIM70FSPE0X1zyzia%2FSW-ThemePluto-18.jpg?alt=media&#x26;token=c9902c27-6f44-4b63-bf53-4ea62d2a6336" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FWk080cMT6cyiKINU1NaN%2FSW-ThemePluto-19.jpg?alt=media&#x26;token=d548c462-c247-4f6d-a711-ffb5180cd689" alt=""><figcaption></figcaption></figure></div>

#### **Footer Template**

Erweitern Sie Ihren Footer auf bis zu vier Zeilen. Für jede Zeile, die Sie nutzen möchten, wählen Sie ein Template aus. Jedes Template darf nur einmal gewählt werden. Über die Textbausteine können Sie die Spalten mit Inhalt füllen.

{% hint style="warning" %}
**Hinweis:** Bitte beachten Sie, dass jedes Spaltenlayout nur einmal verwendet werden kann, ansonsten wird der Content doppelt angezeigt.
{% endhint %}

#### **Icon Social Media**

Sie haben die Möglichkeit im Footer Social Media Icons zu hinterlegen und diese mit Ihrem Account zu verlinken. Sobald ein Link im entsprechenden Feld hinterlegt ist, wird das gewählte Icon angezeigt.

| Social Media      | Wählen Sie ein Social Media Icon aus                   |
| ----------------- | ------------------------------------------------------ |
| Social Media Link | Hinterlegen Sie den link zu Ihrem Social Media Account |

Wählen Sie zwischen den folgenden Icons das für Sie passende aus:

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FEZGPZd4NliR1DIO5jjCx%2FSW-ThemeMerkur-20.jpg?alt=media&#x26;token=02026fd3-29ea-406d-ae5b-95ff1db669ff" alt=""><figcaption></figcaption></figure>

#### **Einstellungen Zahlungsarten und Versandarten**

Legen Sie die allgemeine Einstellungen für die Zahlungs- und Versandarten Icon fest. Hier entscheiden Sie ebenfalls, ob die Icons überhaupt angezeigt werden.

| Icons anzeigen | Wenn aktiv, werden die Zahlungs-und Versandarten Icons angezeigt                                        |
| -------------- | ------------------------------------------------------------------------------------------------------- |
| Icon Farbe     | Bestimmen Sie die Farbvorlage der Icons                                                                 |
| Icon Position  | Wie sollen die Icons der Zahlungs- und Versandarten angezeigt werden (Nebeneinander oder Untereinander) |

#### **Zahlungsarten und Versandarten anzeigen**

Aktivieren Sie die Zahlungs- und Versandarten, welche Sie im Shop anbieten. Sie werden alphabetisch im Footer angezeigt

### Checkout Einstellungen <a href="#einstellungen_checkout" id="einstellungen_checkout"></a>

Für den Checkout können sie ein werbewirksames Banner im eingeschalteten Offcanvas Warenkorb hinterlegen. Diese Funktion finden Sie im Tap: "Theme Pluto > Checkout"

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FIqNtKx01wPFZGHk6VGE8%2FSW-ThemePluto-20.jpg?alt=media&#x26;token=11ec3401-c138-4ad4-981e-9a1f7672075e" alt="" width="375"><figcaption></figcaption></figure>

#### **Offcanvas Warenkorb**

Hier können Sie ein verkaufsförderndes Banner für den Offcanvas Warenkorb hinterlegen. Das Banner sollte eine Breite von 380px haben.

| Banner anzeigen | Wenn aktiv, dann wird das Banner im Offcanvas Warenkorb angezeigt              |
| --------------- | ------------------------------------------------------------------------------ |
| Startdatum      | Legen Sie bei Bedarf ein Startdatum für die Anzeige fest                       |
| Enddatum        | Legen Sie bei Bedarf ein Enddatum für die Anzeige fest                         |
| Banner          | Wählen Sie das Banner aus dem Medienmanager aus                                |
| Link            | Hinterlegen Sie einen Link, zudem die Kunden über das Bannner gelangen können. |

#### **Variantenanzeige**

Hier können Sie festlegen, ob die Varianten übersichtlich getrennt unter dem Artikelname angezeigt werden.

| Varianten trennen aktiv | Wenn aktiv, dann werden die Varianten getrennt angezeigt                          |
| ----------------------- | --------------------------------------------------------------------------------- |
| Anzeigen auf            | Auf welchen Seiten sollen die Varianten getrennt werden (Mehrfachauswahl möglich) |

Um die Darstellung der Varianten auch in den E-Mail´s und den Dokumenten zu erzeugen, müssen Sie die entsprechenden Einstellungen im Theme setzen und die nachfolgenden Codes einfügen. Fügen Sie die nachfolgenden Anweisungen am Ende der foreach-Schleife bei den Positionsangaben ein.

Für die HTML E-Mail´s verwenden Sie bitte folgenden Code:

```
{if $details.articleConfigurator}
      {foreach $details.articleConfigurator as $config}
            <div>{$config.configuratorGroup}: {$config.configuratorOption}</div>
      {/foreach}
{/if}
```

Für den Plaintext in den E-Mail´s verwenden Sie bitte folgenden Code:

```
{if $details.articleConfigurator}
      {foreach $details.articleConfigurator as $config}
            {$config.configuratorGroup}: {$config.configuratorOption}
      {/foreach}
{/if}
```

Für die Dokumente verwenden Sie bitte folgenden Code:

```
{if $position.articleConfigurator}
      {foreach $position.articleConfigurator as $config}
            <div>{$config.configuratorGroup}: {$config.configuratorOption}/</div>
      {/foreach}
{/if}
```

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fb2W2ApEZy7hRs5TJzeAF%2FSW-ThemePluto-21.jpg?alt=media&#x26;token=206cca3a-68dc-40c8-a10f-82e766d14583" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fm4hLbbzVtiyjW2XOrfQb%2FSW-ThemePluto-22.jpg?alt=media&#x26;token=2b1b2b18-5a9c-4295-b589-06b4ec895c8f" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FAj632epvWu7iTwj02By4%2FSW-ThemePluto-23.jpg?alt=media&#x26;token=3ca22bdd-8a9c-4fce-89fe-68081f362f79" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**Hinweis:** Sie müssen den Code in der Ausgabe des Artikels setzen
{% endhint %}

## Neues Element in der Einkaufswelt <a href="#element_einkaufswelt" id="element_einkaufswelt"></a>

Mit der Installation des Theme Pluto werden die Einkaufswelt um das Einkaufswelten Element "Banner-Zoom" erweitert. Des Weiteren erhalten Sie neue Formatierungsmöglichkeiten der Standard Text-Elemente mittels CSS-Klassen.

### Banner-Zoom <a href="#banner_zoom" id="banner_zoom"></a>

Das neue Bannerelement für die Einkaufswelt nennt sich "Banner-Zoom" und befindet sich im Tap "Elemente" unter "Weitere Elementen". Es vergrößert das Bild bei MouseHover. Sie können für jedes einzelne Banner individuell bestimmen um wie viel es sich vergrößern soll und wie lange der Übergang dauert.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F9xO5NotBQT4US38pYfu8%2FSW-ThemePluto-24.jpg?alt=media&#x26;token=59ae2c5e-2f0c-4d5d-b6df-df4cfeeaa9ff" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F4xtlowkegziC2Y0O5hCa%2FSW-ThemePluto-25.jpg?alt=media&#x26;token=0a5ca507-7af5-4fbd-a7c8-c6492dd88b62" alt=""><figcaption></figcaption></figure></div>

### CSS Klassen für Textfelder <a href="#css_klassen" id="css_klassen"></a>

Für das speziell formatierte Textelement (auf der Startseite des Pluto Shops) wurden eigene CSS-Klassen erstellt und verwendet. Möchten Sie diese Darstellung ebenfalls nutzen, müssen Sie ein "Text Element" verwenden und eine der beiden CSS-Klassen in "Globale Element-Einstellungen > CSS Klassen" hinterlegen:

* emotion-teaser-primary
* emotion-teaser-secondary

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fjw13tnd5SbQ9NzHwaaM6%2FSW-ThemePluto-26.jpg?alt=media&#x26;token=0edf2868-069d-4b1d-91df-9ba76bad8502" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FHIrBCoQienkKCe3dByij%2FSW-ThemePluto-27.jpg?alt=media&#x26;token=f15d871e-d9a1-48e1-b5ba-519184516d84" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F1ffNhFN2QoWV1ZSfnDkN%2FSW-ThemePluto-28.jpg?alt=media&#x26;token=13fec016-9e8e-45e1-9cfe-ba6ff3f268fa" alt=""><figcaption></figcaption></figure></div>

## Zusätzliche Einstellungen im Kategorie Modul <a href="#kategorien_modul" id="kategorien_modul"></a>

Zwei zusätzliche Einstellungen sind im Kategorie Modul von Shopware hinzugekommen. Sie können jetzt einzeln und individuell einstellen, ob die Kategorie in der linke Navigation und/oder die Topseller angezeigt werden soll oder nicht.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FMn9motyVsXeoD7Z5lLLo%2FSW-ThemePluto-29.jpg?alt=media&#x26;token=60a6b4ad-13f9-46f0-96f4-8217aec4925a" alt="" width="375"><figcaption></figcaption></figure>

## Aufbau der Startseite <a href="#aufbau_startseite" id="aufbau_startseite"></a>

Natürlich können Sie Ihre Startseite so gestalten wie Sie möchten. Wir zeigen Ihnen hier nur ein Bespiel wie die Startseite im Pluto Demoshop aufgebaut ist. Sie besteht aus zwei Einkaufswelten. In der Ersten befinden sich das Banner, das Textelement und die ausgewählten Artikel. Die Buttons auf dem Banner wurden mit Hilfe der Bild-Mapping Funktion angelegt.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F5LXHuVcCbURMstK6Ipr9%2FSW-ThemePluto-30.jpg?alt=media&#x26;token=f7cdc67b-aec4-4031-b42a-6e5f9cd1f69f" alt="" width="563"><figcaption></figcaption></figure>

Die zweite Einkaufswelt beinhaltet zwei Text-Elemente mit den neuen CSS-Klassen, den Banner-Zoom sowie einen Hersteller-Slider. Wichtig hierbei ist, dass Sie den Modus auf "Fluid / Responsive" stellen, die Spalten auf "2"setzen und einen Zeilen-Abstand von "0" nehmen. Die Zeilenhöhe sollte "161" betragen

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FFYav7Atv3TJcicfMj2SU%2FSW-ThemePluto-31.jpg?alt=media&#x26;token=3b071827-ec6a-4585-acce-62d0b07e5be2" alt="" width="563"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coolbax.gitbook.io/coolbax-docs/shopware-5-plugins/theme/pluto-fashion-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.