Hilfe › Overlay gestalten

Overlay gestalten

Jedes Overlay lässt sich an Ihre Website anpassen: von Position und Texten bis zum kompletten eigenen Design. Alles unter Websites, Reiter „Einstellungen“, „Texte“ und „Gestaltung“.

Anzeige

• Position: unten rechts, unten links, als Leiste unten, mittig als Modal oder im Inhalt der Seite.
• Anordnung: Liste untereinander oder Kacheln nebeneinander mit 2 bis 4 Spalten. Auf breiten Bildschirmen schaltet das Overlay bei vielen Produkten selbst auf Kacheln, damit alle sichtbar bleiben.
• Anzahl Produkte: 1 bis 24, empfohlen 3 bis 6.
• Hintergrund: unverändert, abgedunkelt oder weichgezeichnet.
• Schließen: per Knopf und Escape immer, wahlweise auch per Klick neben das Overlay.

Texte je Sprache

Titel, Untertitel, Produktknopf und Schließen-Beschriftung pflegen Sie je Sprache. Das Skript wählt die Sprache der Seite, erkannt aus URL-Regeln, Produktdaten oder Seitentext, sonst die Standardsprache der Website. Neue Sprachen fügen Sie mit dem Sprachcode hinzu, etwa fr.

Eigenes Design

Unter „Gestaltung“ sehen Sie eine Vorschau mit Beispielprodukten und drei Bereiche, die Sie einzeln ersetzen können. Leer bedeutet Standard.

Aufbau (Twig-Template)

Twig in einer Sandbox: if, for, set und gängige Filter. Verfügbar sind products, texts, language, matched_product, request_id, display, site und preview. Jedes Produkt hat title, brand, category, price, sale_price, currency, image_url, url (Klick-Link), shop_url, position.

Damit Klicks gezählt werden und Schließen funktioniert, müssen drei Attribute erhalten bleiben:

<div class="cr-overlay">
  <button data-cr-dismiss>{{ texts.dismiss }}</button>
  {% for p in products %}
    <a href="{{ p.url }}" data-cr-product="{{ p.id }}" data-cr-position="{{ p.position }}">
      <img src="{{ p.image_url }}" alt=""> {{ p.title }} {{ p.price }} {{ p.currency }}
    </a>
  {% endfor %}
</div>

Aussehen (CSS)

Gilt im Overlay. Alles unter .cr-overlay kapseln, damit es beim Einhängen im Seiten-DOM nichts anderes trifft. Farben, Schrift und Abstände lassen sich meist mit wenigen Zeilen anpassen, das Standard-CSS bleibt als Basis, wenn Sie nur ergänzen wollen.

Verhalten (JavaScript)

Läuft nach dem Einhängen mit dem Objekt cr: cr.root (Wurzelelement), cr.products, cr.requestId, cr.language, cr.texts, cr.mode, cr.track(type, productId) und cr.dismiss().

Shadow DOM oder Seiten-DOM

Standard ist das Shadow DOM: Ihr Seiten-CSS greift nicht ins Overlay, das Overlay nicht in Ihre Seite. „Im Seiten-DOM“ ist richtig, wenn das Overlay bewusst die Schrift und Farben Ihrer Seite erben soll.

Versionen

Jedes Speichern erzeugt eine Version. Unter „Versionen“ stellen Sie jeden früheren Stand wieder her, das erzeugt ebenfalls eine neue Version.

Weiter: Wie Empfehlungen entstehen →