DOCS

Getting Started
Setup
Creating Campaigns
AI discounts
Custom Targeting
Discount UX
Performance Monitoring

Promi Home

Search

Setup

To finish setting up Promi, we recommend getting in touch with our tech team. We will happily complete the integration for free, and we promise we don't bite. To request setup, use the link below.
White Glove Integration
Request free white-glove installation here.
Do-It-Yourself Integration
If you really love doing things on your own, you can use the below docs to get started with the Promi components. Stay tuned for our automated integration feature, which we expect to launch very soon!
  1. PDP components
Click on 'Online Store' from the main dashboard of your site and select 'Themes'  from the list below. From this page, click 'Customize'.
In most cases you will select the product page from the menu at the top. If you have multiple product page templates you will need to make changes to each of them individually.
Add the 'Promi Price' block to your product page by clicking the 'Add block option under the 'Product information' section.
Delete the existing 'Price' block on your product page. Deleting the 'Price' block ensures the price does not show twice on your product page. Don't worry, the Promi UX is off by default, meaning the 'Promi Price' and 'Promi Price Subtitle' blocks will appear to the customer just as the existing 'Price' block would until you turn on the UX in the Promi app. We've made sure to architect the Promi blocks to optimize for site speed, so rest assured that when the UX is turned off there will be no impact to how quickly your price renders.
  1. Collections Page Components
To reflect Promi prices on collections pages, you will need to update your theme's code. Navigate to the 'customize' option of your theme and select 'Edit code'. The 'Edit code' option will be in the top left, next to your theme title, under the three dots menu. Add the following code snippet to your theme.liquid file at the end of the '<head>' tag
<script>
      window.Shopify = window.Shopify || {theme: {id: {{ theme.id }}, role: '{{ theme.role }}' } };
      window._template = {
          directory: "{{ template.directory }}",
          name: "{{ template.name }}",
          suffix: "{{ template.suffix }}"
      };
</script>
<script src="https://storage.googleapis.com/promi-public/production/price.js" defer><
Find the following code in your 'card-product.liquid' file (this file may be in the 'Snippets' folder):
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
Replace the above line with the below code:
<div class="pm-price" data-product-id="{{ card_product.id }}" data-variant-id="{{ card_product.selected_or_first_available_variant.id }}" >
    {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
</div>
You'll notice we're effectively wrapping the existing price line with Promi's code.
If you don't have a 'card-product.liquid' file, find and replace your pricing components. We recommend searching your documents for occurrences of 'compare_at_price'. These will typically be under the snippet folder (since Shopify inserts and renders these pieces of code in your larger collections pages) and usually within files that start with 'product-' (though not always). Your goal will be to find and wrap the logic used to render prices on your collections cards. Once you find the appropriate pricing logic, you will wrap it like the below:
<div class="pm-price" data-product-id="{{ card_product.id }}" data-variant-id="{{ card_product.selected_or_first_available_variant.id }}" >
    //REPLACE WITH YOUR PRICING LOGIC CODE
</div>
The above Promi components can be used to replace prices wherever they are across your site. For example, we have also used this code to update prices in the cart drawer. As mentioned before, let us know if you'd like us to install it for you.
  1. Styling Promi Components
To change Promi styles, we recommend creating a new .css file and applying styles to the .pm-price class for collections elements and the .pm-price-single class for the pdp elements

‹ Getting Started

Creating Campaigns ›