# Listing

### Übersicht

Das Listing ist das zentrale Element jeder [Kategorieseite](https://docs.atloss.de/en/academy/technical-terms/category-page). Hierin werden alle mit der Kategorie verknüpften Artikel in Form von [Produkt Boxen](https://docs.atloss.de/en/theme-configuration/shopping-experiences/product-box) nebeneinander dargestellt. Jede Produkt Box verlinkt dabei auf die jeweilige [Produkt Detailseite](https://docs.atloss.de/en/academy/technical-terms/product-detail-page). Durch die folgenden Konfigurationsoptionen kannst du das Listing weiter auf deine Bedürfnisse anpassen.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/Eflnl9e7Tr0Ai9dIThmW/erlebniswelten-listing.webp" alt=""><figcaption><p>Listing unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

### Produkte pro Zeile

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/FsSjcUAnkxygTcftLRjr/erlebniswelten-listing-produkte-pro-zeile.webp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In dieser Sektion kannst du die Anzahl aller Produkte pro Zeile für jedes Endgerät spezifisch anpassen.
{% endhint %}

### Produkte pro Zeile (Sidebar-Layout)

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/WA8DoVkwRYyvpPuVy7W2/erlebniswelten-listing-produkte-pro-zeile.webp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Dieser Abschnitt ermöglicht dir die Anzahl der Produkte pro Zeile Endgerät spezifisch für Sidebar-Layouts zu definieren.
{% endhint %}

### Abstände

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/soh02XZuF8X3jte9NPjn/erlebniswelten-listing-abstaende.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Spaltenabstand (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing.

</details>

<details>

<summary>Spaltenabstand für Smartphones (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing für Smartphones.

</details>

<details>

<summary>Unterer Abstand der Produkt Box (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>

<details>

<summary>Unterer Abstand der Produkt Box für Smartphones (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings für Smartphones fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>