# Theme Einstellungen

Haben Sie das Theme erfolgreich installiert und mindestens einem Verkaufskanal zugewiesen, können Sie mit der eigentlichen Arbeit beginnen! Um das Theme einrichten zu können, gehen Sie in deren Einstellungen. Sie kommen über: *Inhalte > Theme* bzw. *Verkaufskanäle > Theme > Theme bearbeiten* dort hin.

## Hilfreiche Tipps bevor es losgeht

### Tableiste

<figure><img src="/files/70EwwK2bRL9qZV2mS9Y9" alt=""><figcaption></figcaption></figure>

Zur besseren Übersicht sind die umfangreichen Theme Einstellungen in 12 Taps untergliedert. Sie finden diese über den Einstellungen. Sollten Sie eine kleine Bildschirmauflösung nutzen, kann es sein, dass diese nicht alle auf einen Blick zu sehen sind. Die nicht sichtbaren Taps können Sie sich mit Hilfe der Pfeile anzeigen lassen.

### Variablen finden und nutzen

Zu jeder Einstellungsmöglichkeit in den Theme finden Sie ein Hilfesymbol am rechten Ende der Einstellung. Sie ist durch ein blaues Fragezeichen gekennzeichnet. Gehen Sie mit der Mouse über das Symbol um die Hilfe angezeigt zu bekommen. Hier befindet sich unter anderem die Variablenbezeichnung für die Einstellung. &#x20;

<figure><img src="/files/pNdlyOWtOxMOHLBbccgl" alt=""><figcaption><p>Anzeige der Hilfe bei Mousehover</p></figcaption></figure>

Sie können die Variablenbezeigung anstatt eines Farbwerts eintragen. Der Vorteil: Sollten Sie den Farbwert abwandeln, müssen Sie diesen nur an einer Stelle vornehmen. Alle anderen Farbfelder passen sich an, wo die Variable hinterlegt haben

{% hint style="info" %}
Vor der Variable muss das Dollar Symbol stehen. (z. B.: *<mark style="background-color:blue;">$</mark>sw-color-brand-primary*)
{% endhint %}

### Icon auswählen

Für einige Features können Sie ein passendes Icon wählen. In der nachfolgenden Tabelle finden Sie alle Icons, welche mit dem Theme mitgeliefert werden.

<figure><img src="/files/ne2aLT3xyIuD06QCrieq" alt=""><figcaption><p>Icon auswählen, Name kopieren und in das Feld einfügen</p></figcaption></figure>

Nutzen Sie den nachfolgenden Link, suchen sich ein Icon aus und kopieren den Namen (unter dem Symbol). Diesen fügen Sie anschließend in das entsprechende Icon-Feld ein.

{% embed url="<https://demo-6.coolbax.com/cbax/readicon/index>" %}
Link zur Übersicht der möglichen Icons
{% endembed %}

### Button Style auswählen

In manchen Einstellungen haben Sie die Möglichkeit das Aussehen eines Buttons festzulegen. Hierfür stehen Ihnen 15 vorgefertigte Buttons aus dem Shopware System zur Verfügung:

<div><figure><img src="/files/iFhXR0EoLup4iTCHiG3V" alt=""><figcaption><p>Primärer Button</p></figcaption></figure> <figure><img src="/files/srq3LzJVziAbjF1ORl0g" alt=""><figcaption><p>Primärer Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/K1fhxfjWYBaPP26QZmh4" alt=""><figcaption><p>Sekundärer Button</p></figcaption></figure> <figure><img src="/files/3p76uIAg6TU5FQPprbsn" alt=""><figcaption><p>Sekundärer Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/IcgccVDWAOdSPcCJiceP" alt=""><figcaption><p>Erfolg Button</p></figcaption></figure> <figure><img src="/files/ijXBQjJrSTqBV5Gnd7i7" alt=""><figcaption><p>Erfolg Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/OhYylKqbyriGyb5ixcg6" alt=""><figcaption><p>Hinweis Button</p></figcaption></figure> <figure><img src="/files/HbJAbQitJAwN9T3HUH8a" alt=""><figcaption><p>Hinweis Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/xWaFjfriv3xk9LYIx1Ez" alt=""><figcaption><p>Fehler Button</p></figcaption></figure> <figure><img src="/files/5DGGJZhzoiJ4PhNytYW1" alt=""><figcaption><p>Fehler Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/o4amJzldifQ3KP3k2WKb" alt=""><figcaption><p>Information Button</p></figcaption></figure> <figure><img src="/files/V1kgVu7ThXRfEZmbDN01" alt=""><figcaption><p>Information Button (Outline)</p></figcaption></figure></div>

<div><figure><img src="/files/QF5znvJOuTWVe9fLJccZ" alt=""><figcaption><p>Light Button</p></figcaption></figure> <figure><img src="/files/qozyvZ08vzv1JFZIPL7x" alt=""><figcaption><p>Dark Button</p></figcaption></figure></div>

{% hint style="info" %}
Die Farben der einzelnen Button können von Ihren Einstellungen abweichen. Sie legen die Farben unter: [Typografie & Farben > Theme Farben](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#theme-farben) und [Typografie & Farben > Status-Ausgaben](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#status-ausgaben) fest
{% endhint %}

<figure><img src="/files/jyaM0lOvC8NHtyCEnfou" alt=""><figcaption><p>Link Button</p></figcaption></figure>

Eine Ausnahme bei der Auswahl des Button Style ist *Link Button.* Hier wird keine Button Darstellung genutzt, sondern das Wort als Link dargestellt

### Google Maps Link einbinden

coming soon

## Zu den einzelnen Theme Einstellungen

{% content-ref url="/pages/uk9cK6U9zQxV0j9RBggS" %}
[Allgemeine](/coolbax-docs/theme/theme-einstellungen/allgemeine.md)
{% endcontent-ref %}

{% content-ref url="/pages/5dNGKmbnsRW37nY8XMei" %}
[Typografie & Farben](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md)
{% endcontent-ref %}

{% content-ref url="/pages/d1bUACMKTkVisz6Jr3Gq" %}
[Logos](/coolbax-docs/theme/theme-einstellungen/logos.md)
{% endcontent-ref %}

{% content-ref url="/pages/8WQFxCoP1bwsCOrDy6LJ" %}
[Hintergrund Bilder](/coolbax-docs/theme/theme-einstellungen/hintergrund-bilder.md)
{% endcontent-ref %}

{% content-ref url="/pages/AaGhI2D16d0Z1LAnbmXz" %}
[Header](/coolbax-docs/theme/theme-einstellungen/header.md)
{% endcontent-ref %}

{% content-ref url="/pages/Bv9oG6cGye0Wl1vrmwsb" %}
[Footer](/coolbax-docs/theme/theme-einstellungen/footer.md)
{% endcontent-ref %}

{% content-ref url="/pages/G0pZixVbRkkf9tzWOvl6" %}
[Produkt Kategorie](/coolbax-docs/theme/theme-einstellungen/produkt-kategorie.md)
{% endcontent-ref %}

{% content-ref url="/pages/UHygGo49Bcg5TXHPxo2z" %}
[Produkt Detail](/coolbax-docs/theme/theme-einstellungen/produkt-detail.md)
{% endcontent-ref %}

{% content-ref url="/pages/gNUPvKVSfUPLTkKtzmAe" %}
[Checkout](/coolbax-docs/theme/theme-einstellungen/checkout.md)
{% endcontent-ref %}

{% content-ref url="/pages/kARP5aOpqiddE6cvB5GF" %}
[Weiteres](/coolbax-docs/theme/theme-einstellungen/weiteres.md)
{% endcontent-ref %}


---

# 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/theme/theme-einstellungen.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.