How to add Promi to your site
Promi leverages frontend components to collect data to power our models. At a minimum, we'll need the product page components set up on your site to collect data. Data collection can take up to a week before our models are ready to issue discounts.
We recommend having us set up these components for you. Book a free setup meeting here or email us here to get started.
You can also follow the below instructions to install Promi on your own. We recommend first duplicating your current theme and making Promi changes to the new draft theme. Once you finish and test the features, you can publish this draft theme.
If you are using a custom theme that doesn't use Shopify's default pricing components (e.g. if you generate prices via JSON, javascript, etc.) you can still use Promi! Contact us and we will make a custom installation.
Installation: Product Pages
The Promi price component can be added on product detail and featured product pages. The example below is for product pages, but follow the same process to install the component on featured product pages.
1. Navigate to the 'Customize option of your theme
Click on 'Online Store' from the main dashboard of your site and select 'Themes' from the list below. From this page, click 'Customize'.
2. Navigate to the product page where you'd like Promi to show the discount UX
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.
3. Add the 'Promi Price' block to your product page
Click the 'Add block option under the 'Product information' section.
Click the 'Add block option under the 'Product information' section.
4. 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.
Installation: Collections Pages
To reflect Promi prices on collections pages, you will need to update your theme's code.
Our offer still stands! Contact us and we can handle this for you.
1. 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
2. Add code to your 'theme.liquid' file
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></script>
It should look like the below:
If we made a custom installation of Promi on your site, we comment the sections of code with 'Promi integration'. You should be able to delete the full blocks of code following these comments to remove Promi from your site.
3. If you have a 'card-product.liquid' file, replace the below pricing code
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. The code should look like the below:
3. 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>
Styling: Update Promi components to match your site's look
Promi components will by default follow the styling of your theme. Follow the below section to further update your Promi components for changes in color, font, size, etc. Reach out if you'd like us to do this for you.
Please note that you are able to make updates within the Promi app to determine which components show (price strikethroughs, discount descriptions, and sales badges) for each discount. You can also type in the discount description that will be shown on product and collections pages. You will only need to update the Promi CSS for more granular changes.
1. Create a 'Promi-style.css' file in your 'Assets' folder
To get started, you will need to select 'customize' on your theme in the online store section of your dashboard. From here, you will need to again select 'edit code' option that shows when you click the three dot menu at the top left of your theme editor (see 'Installation: Collections Pages' for pictures).
The 'Assets' folder should be shown on the left panel. If you click on the folder, it should expand and you will have an option to add a new file. Add the 'Promi-style.css' file here.
2. Add CSS to the class names of Promi components
Add the below class names to your 'Promi-style.css' file and drop in whatever CSS you'd like to change the styling of the components
/* Styling for the product page Promi parent component */
.pm-price-single {
/* YOUR CSS */
}
/* Styling for the product page Promi sales badge */
.pm-price-single .badge {
/* YOUR CSS */
}
/* Styling for the product page Promi price */
.pm-price-single .price-item {
/* YOUR CSS */
}
/* Styling for the product page Promi discount subtitle */
.pm-price-single h3 {
/* YOUR CSS */
}
/* Styling for the collections page Promi parent component */
.pm-price {
/* YOUR CSS */
}
/* Styling for the collections page Promi price */
.pm-price .price {
/* YOUR CSS */
}
/* Styling for the collections page Promi discount subtitle */
.pm-price-single h3 {
/* YOUR CSS */
}
3. Add code to insert the Promi styling to your site in your 'theme.liquid' file
Insert the below code in your 'theme.liquid' file within the <head> section. We recommend inserting it after any other .css files
Preview Promi: Test functionality to ensure everything is working appropriately
To review and confirm that all components are working as expected, you should start by saving changes in your draft theme. Then follow the below checklist:
-
Navigate to the Promi app and turn on Promi UI components
-
Find or create an active discount
-
Click 'preview' on your draft theme (this can be found under the three dot menu in your theme library next to the 'customize' and 'publish' options)
-
Add the discount at checkout or via deep link (e.g. append '/discount/DISCOUNT NAME' to the end of your home url)
If Promi components are working correctly, you should see the updated prices in your draft theme!
Uninstalling Promi
We hate to see you go, but we understand that it does happen. We will uninstall Promi for you if you contact us. To uninstall Promi on your own, you'll want to follow the checklist below:
-
Make sure you still have a 'price' block on your product pages. You may have removed this if you replaced it with the Promi price component. If it is not there, add it back (see above section 'Product Pages' under installation for more details) and take off the Promi price component.
-
Remove the sections of code that you added to the 'theme.liquid' file and the 'product-card.liquid' files. Note that even if you uninstall Promi and keep these lines of code, your website will still function fine. We still think it is best practice to remove them.
-
Delete the Promi app by going to the 'Apps' section in your store dashboard and select 'Apps and sales channel settings'. From this page you will be able to uninstall Promi.