Help › Designing the overlay

Designing the overlay

Every overlay can be adapted to your website: from position and texts to a completely custom design. You'll find everything under Websites, on the “Settings”, “Texts” and “Design” tabs.

Display

• Position: bottom right, bottom left, as a bar at the bottom, centered as a modal or inline in the page content.
• Layout: a list, one below the other, or tiles side by side with 2 to 4 columns. On wide screens the overlay switches to tiles by itself when there are many products, so all of them stay visible.
• Number of products: 1 to 24, 3 to 6 recommended.
• Background: unchanged, dimmed or blurred.
• Closing: always via button and Escape, optionally also by clicking outside the overlay.

Texts per language

You maintain the title, subtitle, product button and close label per language. The script picks the language of the page, detected from URL rules, product data or page text, otherwise the website's default language. Add new languages with their language code, for example fr.

Custom design

Under “Design” you'll see a preview with sample products and three areas you can replace individually. Empty means default.

Structure (Twig template)

Twig in a sandbox: if, for, set and common filters. Available variables are products, texts, language, matched_product, request_id, display, site and preview. Each product has title, brand, category, price, sale_price, currency, image_url, url (click link), shop_url, position.

For clicks to be counted and closing to work, three attributes must be kept:

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

Appearance (CSS)

Applies inside the overlay. Scope everything under .cr-overlay so it doesn't affect anything else when mounted in the page DOM. Colors, fonts and spacing can usually be adjusted with a few lines; the default CSS remains as a base if you only want to add to it.

Behavior (JavaScript)

Runs after mounting with the object cr: cr.root (root element), cr.products, cr.requestId, cr.language, cr.texts, cr.mode, cr.track(type, productId) and cr.dismiss().

Shadow DOM or page DOM

The default is the shadow DOM: your page CSS doesn't reach into the overlay, and the overlay doesn't reach into your page. “In page DOM” is the right choice if the overlay should deliberately inherit your page's fonts and colors.

Versions

Every save creates a version. Under “History” you can restore any earlier state, which also creates a new version.

Next: How recommendations work →