Search
Price Strikethroughs & Discount UX
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 any standard discounts created via Shopify's native discount creation tool. You can have these UX components trigger by default or triggered via a deep link.
To trigger UX for Shopify native discounts, use the 'Discounts' table on the Promi homepage.
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.
If you prefer the 'coupon' style of discount, the latter option may be preferred:
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.
Previewing on your store
You are able to preview the discount using the field at the bottom. Note that the previewed discount has a fixed 10% off value, and does not have any restrictions on the products it applies to. The preview functionality is meant only to show the styling and components that will be enabled on your site. This is also a good way to confirm that you have correctly set up all of the Promi components.
Configuring UX for Non-Promi discounts
The "Discounts" table below the "Campaigns" table on the Promi home page shows all non-Promi discounts. Note that Promi allows unlimited UX configurations for discounts created outside of Promi, these discounts do not count toward your quota for AI and rule-based campaigns.
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.
Deep Links for triggering Discount UX
Promi components can trigger using any deep link that applies the discount to a visitor's cookie. However, Promi also allows you to create a deep link using a field at the bottom of the UX form. These links can be used in emails, SMS, ads, etc. to trigger the UX experience and apply the code for the visitor.
