Search
Setup
Setting up Promi and scheduling your first campaign should only take 10 minutes for most merchants, no coding required. Follow the below guide for detailed instructions. If your site involves extensive custom code, you can request free white-glove setup here.
After installing the app, follow the below steps:
Enable the Promi embedded code + configure collections page components
Navigate to your theme editor and click the 'app embeds' icon on the menu on the left. You will need to toggle on the Promi embedded code. From here you should confirm that you see sales badges, price strikethroughs, and price subtitles on your collections pages when the preview functionality is toggled on. Adjust the settings to style the components as you prefer.
If you do not see the components on your collections pages, you'll need to add a 'selector' so Promi knows where to put these components. In the 'Selector Overrides' section of the base embed, you will need to do one of the following:
If you are using a Horizon theme, click into the price component of your collections cards (this is often under the 'Product Card' -> 'Group' category on the left). Click to add a block via the '+' icon between existing blocks, select 'Apps' in the popup, and click the Promi 'Price' and 'Subtitle' blocks to add them. You will likely want to hide your existing price block to avoid showing prices twice.
Go to the Promi app, start a live support chat using the icon in the bottom right corner, ask for a human and tell us that you are trying to install Promi and need the right selectors. Our agents will find the selectors for you and guide you through the process.
Go to your live website, right click on a collections card image, and select 'inspect'. This should open the HTML of your page in a side panel. From there, find the <img> tag associated with your collections block's product image. Go to the parent element of the <img> tag and copy the list of classes on that element. Add a "." in front of each class and remove spaces between the classes, then drop in this string into the "Collection image parent selector" text field in your theme editor. To find the "Collection product link selector", right click on the product title on a collections card and select 'inspect', find the <a> tag in your HTML, and copy the classes on that element. You will again need to add "." before the class names and take out spaces, then add this string to the "Collection product link selector" text field in your theme editor. Repeat a similar process for the "Collection price selector" to find the classes of your price elements. If you have successfully added the selectors in your theme editor, you should see the sale badge, price strikethroughs, and subtitles pop up on your collections cards.
Add the Promi blocks to your PDP
Navigate to the PDP page in your theme editor. In many cases, you will already see the price strikethrough, subtitle, and sale badge on your PDP from enabling the embedded code in step 1. If you do not, you will need to add Promi blocks to your PDP. Click the plus icon under the existing 'price' block, click on the 'apps' tab, and click the Promi 'Price' and 'PDP Subtitle' block to add the blocks to your page.
When a subtitle is not configured for a product and you are viewing the subtitle in the theme editor, you will see the text "Placeholder Text For Theme Editor Only". This will only show up in the Theme Editor, once you save the theme and view it, the subtitle will be blank. On the right you are able to adjust the style of the Subtitle block.
As soon as you publish the theme with the Promi components, these blocks will begin collecting data for Promi in the background to train our AI model. Because there are no live Promi campaigns, there will be no customer-facing changes.
You've now finished setting up Promi! You can now schedule AI campaigns, though you will only be able to schedule them a week from the date that you finished installing the required Promi components on your website. This is to give the AI model time to collect enough data on your store.
Testing
You should see the Promi UX components in your theme editor during installation. If you do not, we recommend contacting us for further help. You are also able to preview these UX components during the campaign creation process to ensure they are working properly. When you click 'create campaign' from the Promi homepage, on the "UX" tab, you will see a 'preview' option at the bottom.
If you are having any issues, we offer free setup. You can get in contact with us here.
That's it! You've fully set up Promi and are ready to launch personalized, AI-powered discount campaigns.
Next Steps
We recommend launching our recommended campaign template as a next step.
Headless Integrations
Promi can be used for headless e-commerce as well. We recommend getting in contact with our team here, but see below for an overview of this type of integration.
To collect data and update prices, Promi relies on a javascript file added in the <head> of your site:
Promi then requires you to 'tag' the components that it will interact with on your site. You can do this by adding the following classes to the appropriate elements:
Collections page prices:
Class: 'pm-price'
Attribute: data-product-id="{{ product.id }}"
Attribute: data-variant-id="{{ variant.id }}"
PDP prices:
Class: 'pm-price-single'
Attribute: data-product-id="{{ product.id }}"
Attribute: data-variant-id="{{ variant.id }}"