How to use embedded products in a personalization?

The embedded products is a product set that is displayed between the website content. In Spotler Activate two templates for embedded products are available called Venice and Sydney. In the templates you can define the following settings:

Content

Embedded products 1.png

  • Variant name: The name of the variant.
  • Content options:

    • Product set: the desired productset

      • Min. product amount: the minimal amount of products that has to be in the product set to show the personalization.

      • Max. product amount: the maximum number of products that will be shown in the personalization.

    • Product(s) from event: product id's that serve as input for the composition of a product set and that are passed on in an event.

  • Insert method: The insert or replace method that is applied with respect to the element in the query selector.
  • URL to personalize: The sample url that is used to select the element with the query selector.
  • Query selector: In the query selector, you can enter or select which element the personalization will be applied to. Is the personalisation not shown? Then follow these instructions: Select Query Selector manually.

    Note: In the query selector, it is recommended to enter the unique name or the unique id of the element (instead of selecting it via the url), so that at all times the correct element is selected on the website.

Display

In the display settings you can adjust the styling of the personalization and incorporate the information from Spotler Activate:
Embedded products_Display.png

In the description you process the desired information. By clicking on the Help button you can view the available options.

Tip: By clicking on the eye you can make certain content invisible.

 

Additional options

In the additional options you can do the following:

Embedded products_Additional options.png

  • Lazy load images: by checking this option images will be loaded as soon as they need to be shown, improving the initial page load.
  • CSS: in the CSS box you can add your own CSS.
  • JavaScript: in the JavaScript box you can add your own JavaScript
  • Edit template: by clicking this button you can edit the template.
  • Reset template: by clicking this button, you can reset the template.
  • Export template: click this button to export the template as XML file.