Price per month message on the product page

This is only for showing the price per month messaging to the customer when they are viewing a product. If you also want to show the customer the price per month messaging when they're in the cart, follow the steps in price per month on the cart as well.

Navigate to your Shopify Store Admin (<shop-name>.myshopify.com/admin)
Select “Online store” on the left-hand menu
Select “Themes”
Select the “Actions” dropdown on the "Current theme"
Click “Edit code”
In the “Section” folder (in some cases it is found in the "Snippets" folder), navigate to your Product Description page liquid file – the example below is the product description page for the “Dawn” theme but this may be different for your theme
Use ctrl + f or cmd + f to search for “price” until you find some code that renders the price on the page (%- render 'price').
We suggest that you enter some dummy text after the div block so you can test if your changes appear in your store in the correct place. If you would like to do this, follow the sub-steps, if not, continue to the next step

a) Under the div block enter some text that is easily distinguishable in your page, then click “Save” – warning: this will add the text to your live store!
b) In a separate tab, navigate to your store’s website and go to any product description page – you should see the text you added under the price
c) If you do see the text and it is not in the right place, go back to your Shopify liquid template, and make changes as necessary.
d) If you do not see the text, please review your changes and make sure you saved them properly. If you did, please get in touch with us for support

Once you’re happy you have found where to put the HeidiPay Price Per Month code, copy the following code block into the page

a) data-heidipay-apiKey: replace PUT_YOUR_SHOP_NAME with your shop name
c) data-heidipay-currencySymbol: Ensure the currency is correct
d) {% assign minimum_amount = 1000 %}: replace with your own maximum order value (1000 = CHF 10,00)
e) {% assign maximum_amount = 500000 %}: replace with your own maximum order value (500000 = CHF 5000,00)
f) {% assign available_terms = '3,6,12' | split:"," %}: this is a list of the numbers of months a customer could split their payment across (their "term"). Replace with your own list of acceptable terms. Make sure not to add any spaces.
g) {% assign min_instalment_amount = 100 %}: replace with your own minimum monthly repayment amount (100 = CHF 1,00)

<!-- DEFINE CUSTOM TERMS HERE -->
{% assign minimum_amount = 1000 %}
{% assign maximum_amount = 500000 %}
{% assign available_terms = '3,6,12' | split:"," %}
{% assign min_instalment_amount = 100 %}
            
<!-- DON'T CHANGE ANYTHING BELOW THIS LINE -->
{%- if current_variant.price >= minimum_amount and current_variant.price <= maximum_amount -%}  
	{% assign term_ceiling = current_variant.price | divided_by: min_instalment_amount %}
	{% assign acceptable_terms = '' %}
	{% for term in available_terms %}
		{% assign test_term = term | times: 1 %}
		{% if test_term <= term_ceiling %}
			{% assign acceptable_terms = acceptable_terms | append: ","  %}
			{% assign acceptable_terms = acceptable_terms | append: term  %}
		{% endif %}
	{% endfor %}
                  
  <div class="heidi_messaging">
		<div  
      id="heidipay-container"
			class="heidipay-container-2"
      data-heidipay-apiKey="PUT_YOUR_SHOP_NAME"
      data-heidipay-minorAmount="{{ current_variant.price }}"   
      data-heidipay-term="{{ acceptable_terms | split: "," | last }}"
      data-heidipay-lang="{{ localization.language.iso_code | slice: 0, 2 }}"
      data-heidipay="true"
			data-heidipay-currencySymbol="CHF" 
			data-heidipay-type="PRODUCT_DESCRIPTION"
			data-heidipay-cadence="MONTHLY"
			data-heidipay-thousandsSeparator="."
			data-heidipay-decimalSeparator=","
			data-heidipay-symbolOnLeft="false"
			data-heidipay-spaceBetweenAmountAndSymbol="true"
      data-heidipay-decimalDigits="2" >
    </div>  
  </div>
{%- endif -%}

Now navigate to the bottom of the HTML in your liquid document – these documents contain a mixture of code including JavaScript and schema definitions, which appear below the HTML. Hint: Look for the closing </section> tag
Below the section tag, copy in this line:
<script src="https://upstream.heidipay.com/sdk/heidi-upstream-lib.js" ></script>
Preview your shop using the preview button. Your Price Per Month should look like this:
Now save the changes to your liquid file

Multi-currency support

If you have a store which can accept multiple currencies and need to show the messaging only to customers buying in CHF, amend line 8 in the example above to include and cart.currency.iso_code == "CHF":

{%- if product.price >= minimum_amount and product.price <= maximum_amount and cart.currency.iso_code == "CHF" -%}