# Feldtypen in der Theme-Konfiguration

In der Konfiguration des Themes im Theme-Manager stehen dir verschieden artige Feldtypen zur Verfügung. Im Folgenden geben wir dir eine Übersicht und erklären, wie welcher Feldtyp verwendet wird und welche Werte er enthalten kann.

{% hint style="warning" %}
**Wichtig**: Bitte achte darauf, dass alle Konfigurationsfelder valide konfiguriert sind! Leere Felder sind i.d.R. nicht "zulässig" (Ausnahme: Medienauswahl).

Fehlerhaft befüllte Konfigurationsfelder können zu Darstellungsfehlern führen oder das Speichern der Konfiguration verhindern.
{% endhint %}

{% hint style="success" %}
**Tipp**: Im [ThemeWare® Config-Finder](https://config.themeware.design/) findest du zu jedem Konfigurationsfeld einen passenden Beispielswert an dem du dich orientieren kannst.
{% endhint %}

## Übersicht <a href="#number" id="number"></a>

* [Nummernfeld](#number-1)
* [Farbauswahl](#color)
* [Medienauswahl](#media-1)
* [Select (Dropdown)](#select)
* [Textfeld](#text)
* [Schriftart](#fontfamily)
* [Datum & Uhrzeit](#datetime)

***

## Nummernfeld *(number)* <a href="#number" id="number"></a>

Das Nummernfeld kann ausschließlich Zahlen enthalten. Die möglichen Zahlen können vom Feld limitiert sein.

**Beispiel-Werte:** `10`, `0`, `-10`, etc.

{% hint style="info" %}
**Hinweis**: Der Wert "0" war in Shopware 6 lange Zeit technisch nicht möglich, deswegen nutzt ThemeWare® oft den Wert "1" statt "0". Die "1" wird in diesem Fall automatisch durch eine "0" ersetzt.
{% endhint %}

***

## Farbauswahl *(color)* <a href="#color" id="color"></a>

Über die Farbauswahl kannst du ganz bequem eine Farbe auswählen. Alternativ kannst du auch direkt einen [hexadezimalen Farbcode](https://de.wikipedia.org/wiki/Hexadezimale_Farbdefinition) eintragen.

**Beispiel-Werte:** `#000000` oder `rgba(0, 0, 0, 0.9)`

#### Valide Werte

In der Regel wird der Wert einer Farbkonfiguration als **CSS-Eigenschaft** `color` (ggf. `background-color`) genutzt. Diese Eigenschaft kann folgende Werte annehmen:

* Farbnamen (`red`, `blue`, `black`, …)
* Hex-Werte (`#ff0000`)
* RGB / RGBA (`rgb(255, 0, 0)`, `rgba(0, 0, 0, 0.5)`)
* Schlüsselwörter wie `transparent`, `currentColor`, `inherit`, `initial`, `unset`

{% hint style="info" %}
**Hinweis**: Der Wert "transparent" ist ebenfalls möglich und wird bei manchen Elementen zum "Ausblenden" statt "durchsichtig machen" genutzt.
{% endhint %}

#### Invalide Werte

* `none` ist **kein** valider Wert für die CSS-Eigenschaft `color` (Textfarbe)

{% hint style="success" %}
**Tipp**: Nutze im Zweifelsfall immer einen Hex- oder RGBA-Wert den der Shopware-Farbwähler generiert und prüfe deine Eingabe mit der "Validieren"-Option im "Speichern"-Button der Theme-Konfiguration.
{% endhint %}

***

## Medienauswahl *(media)* <a href="#media" id="media"></a>

Hier kannst du über die Medienverwaltung ein Bild hochladen (wenn noch nicht vorhanden) und dann auswählen.

**Beispiel-Werte:** "Medium selektiert" oder "Medium zurückgesetzt"

{% hint style="info" %}
**Hinweis**: Durch einen Shopware Bug konnten Media-Felder eine Zeit lang nicht geleert werden, darum findest du beispielsweise bei Media-Feldern für Hintergrundbilder zusätzlich ein Dropdown um die Darstellung in der Storefront aktivieren/deaktivieren zu können.
{% endhint %}

***

## Select *(text + custom-options)* <a href="#select" id="select"></a>

Bei dem Select (Dropdown-Auswahl) kannst du einen der zur Verfügung stehenden Werte auswählen.

**Beispiel-Werte:** -

***

## Textfeld *(text)* <a href="#text" id="text"></a>

Ein einzeiliges Textfeld, welches theoretisch jeden Inhalt erlaubt. Hier kommt es darauf an, in welchem Zusammenhang der Inhalt verwendet wird. Häufig werden hier Abstände oder Breiten angegeben, die dann zusätzlich "px" oder "%" angehängt benötigen. In seltenen Fällen kann hier HTML hinterlegt werden.

**Beispiel-Werte:** Text, `<html>..</html>`, `10px`, `50%`, etc.

{% hint style="info" %}
**Hinweis**: Orientiere dich immer am Originalinhalt. Angaben wie "px" oder "%" sind nicht immer nötig. Beachte stets den Hilfe-Text für mehr Informationen zu validen Werten.
{% endhint %}

***

## Schriftart *(fontFamily)* <a href="#fontfamily" id="fontfamily"></a>

Ein Konfigurationsfeld "Schriftart" kann eine CSS [font-family](https://www.w3schools.com/cssref/pr_font_font-family.asp) Eigenschaft enthalten. Die hier eingetragene Schrift muss für den Besucher verfügbar sein und entweder zu den websicheren Fonts (z.B. Times, Times New Roman, Georgia, Helvetica, Arial, Verdana) gehören oder als [@font-face](https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp) in die Storefront eingebunden sein.

**Beispiel-Werte:** `'Inter', sans-serif`

{% hint style="info" %}
**Hinweis**: Mehrere Fonts sind in diesem Feld derzeit nicht vorgesehen. Der Inhalt muss immer ein Font inkl. Fallback-Font sein.
{% endhint %}

***

## Datum & Uhrzeit *(datetime)* <a href="#datetime" id="datetime"></a>

Hier kannst du ein Datum und eine Uhrzeit auswählen

**Beispiel-Werte:** `2021-01-01 01:00`

***

#### Weiterführende Informationen <a href="#media" id="media"></a>

* Anleitung: [Farbkonfiguration](/wissensdatenbank/grundwissen/farbkonfiguration.md)
* Anleitung: [Schriftkonfiguration](/wissensdatenbank/grundwissen/schriftkonfiguration.md)


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/konfiguration/feldtypen-in-der-theme-konfiguration.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.
