> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar

> Sidebar-Einstellungen und Quickbuy

## Sidebar Darstellung

Hier kannst du einen Rahmen für die Sidebar für Desktop/mobil festlegen. So kannst du die Sidebar besser hervorheben und von dem Rest der Seite abgrenzen. Standardmäßig sind keine Rahmen (0px) definiert.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GMxIwaF0VgI9iQpa/images/niu-plus-sidebar-darstellung.jpg?fit=max&auto=format&n=GMxIwaF0VgI9iQpa&q=85&s=13e97db31661e559f779a9ade81555bc" alt="Sidebar Darstellung" width="2018" height="452" data-path="images/niu-plus-sidebar-darstellung.jpg" />
  </Frame>
</div>

<ParamField path="Desktop Border Top" type="number">
  Vergebe hier einen Wert in Pixeln (px), um einen Rahmen an der oberen Kante der Sidebar auf dem Desktop zu erzeugen. Beispiele:
</ParamField>

<AccordionGroup>
  <Accordion title="0px (kein Rahmen)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/3890c292-75ad-4f43-9b0c-59461971fdee/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="35px (Rahmen bündig mit Topbar)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/3c228257-bae3-4a0a-b175-be1b552f3f05/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Desktop Border Left" type="number">
  Vergebe hier einen Wert in Pixeln (px), um einen Rahmen an der linken Kante der Sidebar auf dem Desktop zu erzeugen. Beispiele:
</ParamField>

<AccordionGroup>
  <Accordion title="0px (kein Rahmen)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/3b3aadda-618f-4a34-a02a-cf2e6e582c61/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="10px (leichter Rahmen)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/15bda152-b552-4d84-9e5d-c9541cf01ed5/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Mobile Border Top" type="number">
  Vergebe hier einen Wert in Pixeln (px), um einen Rahmen an der oberen Kante der Sidebar auf mobil zu erzeugen. Beispiele:
</ParamField>

<AccordionGroup>
  <Accordion title="0px (kein Rahmen)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/800bfa51-a6b3-4601-8fc8-cd93172d2982/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="10px (leichter Rahmen)">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/d611c447-5c30-43c1-850c-50b4d5002e02/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

***

## Mobiles Menü

Hier findest du Darstellungsoptionen für das mobile Menü (Burgermenü).

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GMxIwaF0VgI9iQpa/images/niu-plus-sidebar-mobiles-menue.jpg?fit=max&auto=format&n=GMxIwaF0VgI9iQpa&q=85&s=6bb1b32002f28d38f48d761766480d95" alt="Mobiles Menü" width="2018" height="714" data-path="images/niu-plus-sidebar-mobiles-menue.jpg" />
  </Frame>
</div>

### Icons im Menüfooter

Unter den Kategoriepunkten wird eine Zeile mit Icons dargestellt. Hier findet man standardmäßig die Icons für Sprach- und Währungsschalter, wenn vorhanden. Du kannst hier zusätzlich weitere Menüicons hinzufügen. Wunsch- und Vergleichsliste werden nur dargestellt, wenn du sie hier und in den Shopeinstellungen aktiv hast.

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/4b3251bf-d9ec-480c-a0fa-3e8d27bce91e/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Account Icon darstellen" type="boolean">
  Lege fest, ob das Account Icon im Footer des mobilen Burger Menüs angezeigt werden soll.
</ParamField>

<ParamField path="Such Icon darstellen" type="boolean">
  Entscheide, ob ein Such Icon im Footer des mobilen Burger Menüs erzeugt werden soll.
</ParamField>

<ParamField path="Wunschliste Icon darstellen" type="boolean">
  Lege fest, ob das Wunschlisten Icon im Footer des mobilen Burger Menüs angezeigt werden soll. Dafür muss die Wunschliste in den JTL-Shopeinstellungen *(Einstellungsnummer 439)* aktiviert sein.
</ParamField>

<ParamField path="Vergleichsliste Icon darstellen" type="boolean">
  Lege fest, ob das Vergleichslisten Icon im Footer des mobilen Burger Menüs angezeigt werden soll. Dafür muss die Vergleichsliste in den JTL-Shopeinstellungen *(Einstellungsnummer 1780)* aktiviert sein.
</ParamField>

<ParamField path="Warenkorb Icon darstellen" type="boolean">
  Entscheide, ob im Footer des mobilen Burger Menüs ein Warenkorb Icon dargestellt werden soll.
</ParamField>

***

## Instant Buy

Mit Instant Buy wird ein kleiner Kaufbutton auf Einzelartikeln angezeigt, der dir die Möglichkeit gibt, Einzelartikel direkt in den Warenkorb zu legen, ohne Page-Reload.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/CU5FwIX_DV1jnQVY/images/niu-plus-sidebar-instant-buy.jpg?fit=max&auto=format&n=CU5FwIX_DV1jnQVY&q=85&s=eef7080e04e636db2e7a8f1c289ba403" alt="Instant Buy" width="2246" height="318" data-path="images/niu-plus-sidebar-instant-buy.jpg" />
  </Frame>
</div>

<Warning>
  Der NIU Checkout muss dafür aktiviert sein. Du findest die Einstellung dazu in den [Checkout-Settings](/NIU-Plus/niu-checkout#niu-checkout-verwenden).
</Warning>

<ParamField path="Instant Buy bei Einzelartikeln verwenden" type="boolean">
  Aktiviere diesen Schalter, um den Instant-Buy-Button bei Einzelartikeln anzuzeigen.
</ParamField>

***

## Quickbuy

Quickbuy ist eine Funktion der Sidebar, die eine Produktvorschau bietet, sobald der Quickbuy-Button eines Artikels aus den Slidern oder der Kategorieansicht angeklickt wird. Der User kann direkt Varianten auswählen und das Produkt in den Warenkorb legen, sich einen Überblick über die verfügbaren Variationen verschaffen oder die Kurzbeschreibung lesen, ohne die Produktdetailseite besuchen zu müssen. Ein Klick auf das Produkt selbst führt weiterhin zur Artikeldetailseite.

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/8a0d08ec-18e0-4eb2-802a-d5daed99a806/Bildschirmaufnahme2024-06-26um12.23.07-ezgif.com-video-to-gif-converter.gif)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GMxIwaF0VgI9iQpa/images/niu-plus-sidebar-quickbuy.jpg?fit=max&auto=format&n=GMxIwaF0VgI9iQpa&q=85&s=ea837b8295f6bba490c3382d08e42f75" alt="Quickbuy" width="2024" height="1549" data-path="images/niu-plus-sidebar-quickbuy.jpg" />
  </Frame>
</div>

<ParamField path="Quickbuy global deaktivieren" type="boolean">
  Wenn diese Option aktiviert ist, wird Quickbuy auf allen Gerätetypen nicht verwendet.
</ParamField>

<ParamField path="Quickbuy mobil deaktivieren" type="boolean">
  Wenn diese Option aktiviert ist, wird Quickbuy auf mobilen Endgeräten (Mobile & Tablet) nicht verwendet.
</ParamField>

<ParamField path="Quickbuy für Einzelartikel deaktivieren" type="boolean">
  Wenn diese Option aktiviert ist, wird bei Einzelartikeln (= Artikel ohne Variation und Konfiguration) der Quickbuy-Button nicht angezeigt und die Funktion für diese Artikelart somit deaktiviert.
</ParamField>

<ParamField path="Quickbuy für Variationsartikel deaktivieren" type="boolean">
  Wenn diese Option aktiviert ist, wird bei Variationsartikeln der Quickbuy-Button nicht angezeigt und die Funktion für diese Artikelart somit deaktiviert.
</ParamField>

<ParamField path="Quickbuy für ausverkaufte Artikel deaktivieren" type="boolean">
  Wenn diese Option aktiviert ist, wird bei ausverkauften Artikeln der Quickbuy-Button nicht angezeigt und die Funktion für ausverkaufte Artikel somit deaktiviert.
</ParamField>

<ParamField path="Bei Kauf über Quickbuy weiterleiten zu" type="select">
  Wenn deine Kunden etwas über die Quickbuy Sidebar in den Warenkorb legen, werden sie zu dem von dir gewählten Ziel weitergeleitet.
</ParamField>

### Quickbuy Button Darstellungsoptionen Desktop

Hier kannst du aus verschiedenen Darstellungsoptionen für den Quickbuy Button auf Desktop wählen. Auswahl zwischen:

<AccordionGroup>
  <Accordion title="Einblenden bei Hover">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/dae3190b-a509-4c49-9073-e694cd57769d/ezgif.com-video-to-gif-converter%20\(1\).gif)</Frame>
    </div>
  </Accordion>

  <Accordion title="Permanent sichtbar, vergrößern bei Hover">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/df7b3f62-02b6-464b-bd2b-f52c74f7fc9f/Bildschirmaufnahme2024-06-26um12.54.25-ezgif.com-video-to-gif-converter.gif)</Frame>
    </div>
  </Accordion>

  <Accordion title="Permanent als Icon sichtbar">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/gWykZJ7rbZT1wqiG/images/niu-plus-sidebar-quickbuy-icon.png?fit=max&auto=format&n=gWykZJ7rbZT1wqiG&q=85&s=577599ac021684e1516b7e0c83ca449d" alt="" width="2582" height="893" data-path="images/niu-plus-sidebar-quickbuy-icon.png" />
      </Frame>
    </div>
  </Accordion>

  <Accordion title="Permanent als Button sichtbar">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/gWykZJ7rbZT1wqiG/images/niu-plus-sidebar-quickbuy-button.png?fit=max&auto=format&n=gWykZJ7rbZT1wqiG&q=85&s=015f64cc741748f170228be9fdc31cc0" alt="" width="2597" height="863" data-path="images/niu-plus-sidebar-quickbuy-button.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

### Quickbuy Button Darstellungsoptionen mobil

Hier kannst du aus verschiedenen Darstellungsoptionen für den Quickbuy Button auf mobil wählen. Auswahl zwischen:

<AccordionGroup>
  <Accordion title="Permanent sichtbar als Icon">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/83dfc34d-97c5-4de2-9f71-57bf95bc6367/image.png)</Frame>
    </div>
  </Accordion>

  <Accordion title="Permanent sichtbar als Button">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/78386db6-ec99-4526-8e5f-2df0a5f35736/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Alternatives Icon für Quickbuy Button" type="icon">
  Hier kannst du ein alternatives Icon für den Quickbuy Button wählen. Öffne einfach das Dropdown-Menü über den Pfeil und wählen ein passendes Icon aus der Bibliothek.
</ParamField>

<ParamField path="Quickbuy Footer ausblenden für Vaterartikel" type="boolean">
  Wenn diese Option aktiviert ist, wird bei Vaterartikeln der Footer in der Sidebar ausgeblendet, der die Preisangabe und den Warenkorb Button enthält.
</ParamField>

<ParamField path="Kurzbeschreibung bei Einzelartikeln in Quickbuy einblenden" type="boolean">
  Wenn diese Option aktiviert ist, wird bei Einzelartikeln die Kurzbeschreibung in Quickbuy eingeblendet. Das kann deinen Kunden dabei helfen, sich schnell über Artikel zu informieren ohne die aktuelle Seite zu verlassen.
</ParamField>

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/a0c148ca-7eee-411a-b5c2-2ac8a441a5a9/image.png)</Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Variationsauswahl anzeigen" type="boolean">
  Wenn diese Option aktiviert ist, werden die einzelnen Auswahlelemente der Variaten (Dropdowns, Swatches etc.) in Quickbuy angezeigt. So können Kunden direkt ihre Auswahl treffen und die richtige Variante in den Warenkorb legen.
</ParamField>

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/gWykZJ7rbZT1wqiG/images/niu-plus-sidebar-variationsauswahl.png?fit=max&auto=format&n=gWykZJ7rbZT1wqiG&q=85&s=1fcf346defd57db0d00df8f9058c18ba" alt="" width="3972" height="2406" data-path="images/niu-plus-sidebar-variationsauswahl.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

<ParamField path="Variationsübersicht anzeigen" type="boolean">
  Wenn diese Option aktiviert ist, wird eine Liste mit allen Variationskombinationen in Quickbuy zur Direktauswahl angezeigt.
</ParamField>

<AccordionGroup>
  <Accordion title="Vorschau">
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
      <Frame>
        <img src="https://mintcdn.com/dzm/gWykZJ7rbZT1wqiG/images/niu-plus-sidebar-variationsuebersicht.png?fit=max&auto=format&n=gWykZJ7rbZT1wqiG&q=85&s=412d6d4fdc7bc23f4f7f8c9e96e51291" alt="" width="3983" height="2453" data-path="images/niu-plus-sidebar-variationsuebersicht.png" />
      </Frame>
    </div>
  </Accordion>
</AccordionGroup>

***

## Quickview

Quickview ist die Sidebar für Artikeldetails. Quickview zeigt dir umfassende Produktinfos, ohne den Artikel direkt aufrufen zu müssen. Quickview findet Verwendung im Konfigurator und in der Warenkorbübersicht, wenn du mehr Infos zum Produkt und alle Details ansehen möchtest.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GMxIwaF0VgI9iQpa/images/niu-plus-sidebar-quickview.jpg?fit=max&auto=format&n=GMxIwaF0VgI9iQpa&q=85&s=6c56d0194f9634ece8af3bc85d5da55d" alt="Quickview" width="2016" height="378" data-path="images/niu-plus-sidebar-quickview.jpg" />
  </Frame>
</div>

<ParamField path="Kurz- Langbeschreibung anzeigen" type="select">
  Wähle hier, welche Ansicht du für deine Artikeldetails darstellen möchtest.
</ParamField>

***

## Warenkorb Sidebar

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/EaQjwIOo3vUgpmVw/images/niu-plus-sidebar-warenkorb.png?fit=max&auto=format&n=EaQjwIOo3vUgpmVw&q=85&s=9e8ff1911dca0e87d9afb31ccca8bd6e" alt="Warenkorb Sidebar" width="2066" height="460" data-path="images/niu-plus-sidebar-warenkorb.png" />
  </Frame>
</div>

<ParamField path="Extended Functions" type="boolean">
  Möchtest du die erweiterten Funktionen in der Warenkorb-Sidebar nutzen? Damit ändert sich das Layout der einzelnen Items, sodass deine Besucher direkt in der Sidebar die Menge editieren und den Artikel mit einem Klick entfernen können.
</ParamField>

<ParamField path="Mengenregler verwenden" type="boolean">
  Aktiviere diese Option, damit deine Besucher die Menge eines Artikels direkt in der Warenkorb Sidebar editieren können, ohne die Seite zu wechseln.
</ParamField>

<ParamField path="Verfügbarkeit und Lieferzeit anzeigen" type="boolean">
  Zeigt den Lagerstatus und die Lieferzeit direkt beim Artikel in der Warenkorb Sidebar an.
</ParamField>

<ParamField path="Variationsinformationen anzeigen" type="boolean">
  Entscheide, ob gewählte Variationen (z. B. "Größe: L", "Farbe: Rot") beim Artikel angezeigt werden sollen.
</ParamField>

<ParamField path="Konfigurationsdetails anzeigen" type="boolean">
  Lege fest, ob Details aus dem Konfigurator (falls verwendet) in der Warenkorb Sidebar sichtbar sein sollen.
</ParamField>

<ParamField path="Versandfrei Progressbar verwenden" type="boolean">
  Aktiviert eine Progressbar in der Warenkorb Sidebar, die anzeigt wie viel noch zum kostenfreien Versand fehlt. Die Einstellungen aus der Warenkorbseite werden für die Darstellung übernommen.
</ParamField>

<ParamField path="Versandfreihinweis ebenfalls ausblenden?" type="boolean">
  Bei deaktivierter Progressbar wird der Versandkostenfreihinweis noch angezeigt. Hier kannst du ihn ausblenden.
</ParamField>

<ParamField path="Couponfeld in Sidebar Warenkorb anzeigen" type="boolean">
  Zeigt ein Couponfeld in der Warenkorb Sidebar an. Nur in Verbindung mit NIU Checkout.
</ParamField>

***

## X-Selling Sidebar

Die X-Selling Sidebar ist auf Desktop und Tablet verfügbar und zeigt neben dem Warenkorb noch eine schmale Sidebar mit Bestsellern oder passenden Produkten zum Warenkorb. Der Kunde kann Artikel bequem direkt in den Warenkorb legen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/GMxIwaF0VgI9iQpa/images/niu-plus-sidebar-x-selling.jpg?fit=max&auto=format&n=GMxIwaF0VgI9iQpa&q=85&s=7c11d72855b97e5eac9f570cea476e55" alt="X-Selling Sidebar" width="2028" height="792" data-path="images/niu-plus-sidebar-x-selling.jpg" />
  </Frame>
</div>

<ParamField path="X-Selling Sidebar nutzen" type="boolean">
  Aktiviere diese Option, um die X-Selling Sidebar zu aktivieren.
</ParamField>

<ParamField path="Spezifische Produkte in X-Selling Sidebar promoten" type="select">
  Hier kannst du aus all deinen Artikeln wählen, welche du hervorheben möchtest. Wenn du in die Zeile klickst, kannst du auch unter Eingabe des Produktnamens nach spezifischen Artikeln suchen.
</ParamField>

<ParamField path="Promotion Artikel nur laden, wenn es keine passenden Artikel gibt" type="boolean">
  Entscheide, ob passende Artikel immer für den letzten Artikel im Warenkorb geladen werden, aber nur dann, wenn der Shop bereits CrossSellingArtikel der Gruppe 'Kunden kauften auch' generiert hat. Mit dieser Einstellung kannst du die Promotion Artikel nur dann anzeigen lassen, wenn keine anderen passenden Artikel gefunden wurden
</ParamField>

<ParamField path="Passende Artikel mischen" type="boolean">
  Wenn du diese Einstellung aktivierst, wird die Liste an CrossSellingArtikeln für Promotion und passende Artikel mit jedem Aufruf neu gemischt. **Achtung:** Gilt nicht für Bestseller.
</ParamField>

<ParamField path="Artikeldetails Button anzeigen, um QuickView zu öffnen" type="boolean">
  Aktiviere diese Option, um in der X-Selling Sidebar einen Button anzuzeigen, der die QuickView des jeweiligen Artikels öffnet. So können Kunden mehr Details zum Produkt einsehen, ohne die Sidebar zu verlassen.
</ParamField>

<ParamField path="Verfügbarkeit und Lieferzeit anzeigen" type="boolean">
  Aktiviere diese Option, um den Lagerstatus und die Lieferzeit direkt in der X-Selling Sidebar anzuzeigen.
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.