Promi's UX components are key to enabling personalized discounts. They dynamically trigger price strikethroughs and discount descriptions for specific visitors. These components can be used both for Promi Campaigns and discounts created outside of Promi. See more below for each use case.

Configuring UX for Promi Campaigns

When creating a campaign in Promi, the second tab will be labeled "UX". Clicking on this will present you with fields you can use to configure how the Promi discount will show to visitors.

The "UX Triggers" card will only show if you have selected 'Code' in the discounts tab as the form of discount to create. The first option, "Only show UX to eligible visitors when discount code is applied" will prevent any of the UX from showing prior to your uses applying the discount code via typing it in at checkout or using a deep link to apply the code. The second option, "Always show UX to eligible visitors, regardless of if the discount code is applied" will show any of the UX configured in the below cards for products eligible for the discount code you are creating. This can be helpful for messages like "Get an extra 25% off with code DEMO", where you want to remind visitors that a discount is available, but still require them to input the code at checkout.

The "Product detail and featured product pages" card allows you to trigger price strikethroughs and discount descriptions on the Product Detail Page (PDP). You are able to use variables in the description with the format {{{ variable }}}. Available variables include {{{%-off}}} and {{{discount-name}}}. These will be rendered with the appropriate value when a customer visits the page. You will also see a preview of how these variables will render in the card.

The "Collections pages" card follows a similar format and allows you to specify whether to show price strikethroughs and discount descriptions on collections pages.

Configuring UX for Non-Promi discounts

The "Discounts" table below the "Campaigns" table on the Promi home page shows all non-Promi discounts.

Click into any discount to bring up the UX configuration page. Here, you will have options to add price strikethroughs and discount descriptions for the discount, similar to in the campaign creation workflow. It's important to note that this UX will only be triggered for code discounts when they are applied in the browser. You can do this via deep link as shown in the bottom card on the UX configuration page. The UX will be triggered by default for automatic discounts.

Next Steps

If you are configuring your UX as a part of creating a Promi Campaign, you will navigate to the "Launch" tab next to set your campaign live!