> ## 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.

# Darstellung

> Optik und Animation der Punkte-Anzeige im Frontend anpassen

Auf der Seite **Darstellung** legst du fest, wo und wie die erzielbaren Punkte im Shop angezeigt werden. Rechts siehst du bei jeder Änderung eine Live-Vorschau für Produktdetailseite und Artikelkarte.

## Punkte-Anzeige

Wo und für wen die erzielbaren Punkte unter dem Preis erscheinen.

<Frame>
  <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpd1.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=1c4da3a22e2afd32a9b90913d04356f9" alt="Punkte-Anzeige Einstellungen" width="1588" height="494" data-path="images/bpd1.jpg" />
</Frame>

<ParamField path="Punkte-Snippet anzeigen" type="boolean">
  Blendet die erzielbaren Punkte unter dem Preis ein (Produktdetail + Artikelkarte).
</ParamField>

<ParamField path="Nur für eingeloggte Kunden" type="boolean">
  Punkte-Anzeige nur zeigen, wenn ein Kunde angemeldet ist.
</ParamField>

<ParamField path="Nur mit aktivem Opt-in" type="boolean">
  Anzeige nur für angemeldete Kunden mit Programm-Teilnahme (greift nur bei aktiver Opt-in-Pflicht).
</ParamField>

<ParamField path="Variantenartikel mit Preisspanne" type="select">
  Anzeige bei Vaterartikeln mit unterschiedlichen Variantenpreisen: **Bereich anzeigen (von bis)**, **Bis zu (Maximalpreis)** oder **Auf Variantenartikeln ausblenden**.
</ParamField>

<br />

## Optik

Aussehen der Punkte-Anzeige.

<Frame>
  <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpd2.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=2b505b83f6491396b7c31a60742fc1b5" alt="Optik-Einstellungen" width="1578" height="460" data-path="images/bpd2.jpg" />
</Frame>

<ParamField path="Darstellung" type="select">
  Stil der Punkte-Anzeige.
</ParamField>

<div className="grid grid-cols-2 sm:grid-cols-4 gap-4" style={{gridTemplateRows: 'auto auto'}}>
  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
    <Frame>
      <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpminimal.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=f00c77297d184e6043a26498abfa7819" alt="Vorschau Minimal" width="522" height="294" data-path="images/bpminimal.jpg" />
    </Frame>
  </div>

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
    <Frame>
      <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpbadge.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=2ee76ac6d647acdd7a65f9a1afd1b6cf" alt="Vorschau Badge / Pill" width="528" height="318" data-path="images/bpbadge.jpg" />
    </Frame>
  </div>

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
    <Frame>
      <img src="https://mintcdn.com/dzm/Sg-89MNTgwSyd3XI/images/bpsoft.jpg?fit=max&auto=format&n=Sg-89MNTgwSyd3XI&q=85&s=bbbfec171311b3fb2d9beb79193500af" alt="Vorschau Soft Highlight" width="520" height="344" data-path="images/bpsoft.jpg" />
    </Frame>
  </div>

  <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
    <Frame>
      <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpakzent.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=3a9810414f555dca6598f363f6a6421c" alt="Vorschau Akzent-Linie" width="518" height="316" data-path="images/bpakzent.jpg" />
    </Frame>
  </div>

  <div className="text-center text-sm" style={{margin: 0}}>**Minimal**: dezenter Text ohne Hervorhebung.</div>
  <div className="text-center text-sm" style={{margin: 0}}>**Badge / Pill**: fällt als abgerundetes Badge stärker auf.</div>
  <div className="text-center text-sm" style={{margin: 0}}>**Soft Highlight (Box)**: sanft hervorgehobene Box.</div>
  <div className="text-center text-sm" style={{margin: 0}}>**Akzent-Linie**: farbiger Text mit vertikalem Balken.</div>
</div>

<br />

<ParamField path="Icon" type="select">
  Symbol neben der Punktzahl.
</ParamField>

<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/Sg-89MNTgwSyd3XI/images/bpstern.jpg?fit=max&auto=format&n=Sg-89MNTgwSyd3XI&q=85&s=915814b772f6c4ff84f61d2ee86125e6" alt="Vorschau Icon Stern" width="522" height="318" data-path="images/bpstern.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Stern**</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpmuenze.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=1255abd741f6f8d86904b41b31157efa" alt="Vorschau Icon Münze" width="534" height="314" data-path="images/bpmuenze.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Münze**</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpgeschenk.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=eb02c6e29d79dda209c9d5ea16f1c079" alt="Vorschau Icon Geschenk" width="522" height="312" data-path="images/bpgeschenk.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Geschenk**</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpfunkeln.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=fef14796f9a96899392023714e4104b7" alt="Vorschau Icon Funkeln" width="516" height="320" data-path="images/bpfunkeln.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Funkeln**</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpplus.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=a7dd4fc070dd111f242ebd9000a09e54" alt="Vorschau Icon Plus" width="520" height="318" data-path="images/bpplus.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Plus**</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent" style={{margin: 0}}>
      <Frame>
        <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpicon.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=6d9dc8126a9f989bbe21efe4e715e988" alt="Vorschau Kein Icon" width="524" height="320" data-path="images/bpicon.jpg" />
      </Frame>
    </div>

    <div className="text-center text-sm" style={{margin: 0}}>**Kein Icon**</div>
  </div>
</div>

<ParamField path="Akzentfarbe" type="color">
  Farbe von Icon und Akzenten. Standard ist ein dezentes Gold, du kannst aber eine eigene Farbe passend zu deinem Shop-Design setzen.
</ParamField>

<br />

## Animation

Bewegung der Anzeige. Alle Animationen respektieren die System-Einstellung zum Reduzieren von Bewegung.

<Frame>
  <img src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpd3.jpg?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=d2640ccbc6e67be25d1d818139abcdde" alt="Animation-Einstellungen" width="1574" height="424" data-path="images/bpd3.jpg" />
</Frame>

<ParamField path="Zahl hochzählen (Count-up)" type="boolean">
  Die Punktzahl zählt beim Sichtbarwerden von 0 hoch, nur auf der Produktdetailseite (nicht in Artikellisten). Gilt für alle Stile.
</ParamField>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4" style={{marginBottom: '24px'}}>
  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <video autoPlay loop muted playsInline className="w-full" style={{display: 'block', margin: 0}} src="https://mintcdn.com/dzm/4prk8b1bYKoyK7Zl/images/bpcount.mov?fit=max&auto=format&n=4prk8b1bYKoyK7Zl&q=85&s=f6bcfe09ac06bc7de4c901ccd3932890" data-path="images/bpcount.mov" />
  </div>
</div>

<ParamField path="Effekt-Animation" type="boolean">
  Wiederkehrender Effekt in entspanntem Abstand (zusätzlich zum Count-up).
</ParamField>

<ParamField path="Effekt-Typ" type="select">
  Art des wiederkehrenden Effekts.
</ParamField>

<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <video autoPlay muted playsInline className="w-full" style={{display: 'block', margin: 0}} src="https://mintcdn.com/dzm/Sg-89MNTgwSyd3XI/images/bppop.mov?fit=max&auto=format&n=Sg-89MNTgwSyd3XI&q=85&s=f4e647132b9b361ce9caaec8b89e2681" onLoadedMetadata={(e) => { e.currentTarget.currentTime = 0.5 }} onTimeUpdate={(e) => { if (e.currentTarget.currentTime >= 2) { e.currentTarget.currentTime = 0.5 } }} data-path="images/bppop.mov" />

    <div className="text-center text-sm" style={{margin: 0}}>**Pop**: Icon pulsiert.</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <video autoPlay muted playsInline className="w-full" style={{display: 'block', margin: 0}} src="https://mintcdn.com/dzm/Sg-89MNTgwSyd3XI/images/bpshine.mov?fit=max&auto=format&n=Sg-89MNTgwSyd3XI&q=85&s=1b230cd82adf0e5e311db444b16d6512" onTimeUpdate={(e) => { if (e.currentTarget.currentTime >= 2) { e.currentTarget.currentTime = 0 } }} data-path="images/bpshine.mov" />

    <div className="text-center text-sm" style={{margin: 0}}>**Shine-Sweep**: Lichtstreif.</div>
  </div>

  <div className="flex flex-col items-center" style={{gap: '8px'}}>
    <video autoPlay loop muted playsInline className="w-full" style={{display: 'block', margin: 0}} src="https://mintcdn.com/dzm/Sg-89MNTgwSyd3XI/images/bpsparkle.mov?fit=max&auto=format&n=Sg-89MNTgwSyd3XI&q=85&s=58c712676b12d0b35af3baccbcfce90e" data-path="images/bpsparkle.mov" />

    <div className="text-center text-sm" style={{margin: 0}}>**Sparkle**: Funken.</div>
  </div>
</div>

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