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 that you have found where to put the HeyLight Price Per Month code, copy the following code block into the page

data-heylight-type : enter "PRODUCT_DESCRIPTION_HEYLIGHT_BNPL_CH" for BNPL 0% and "PRODUCT_DESCRIPTION_HEYLIGHT_FINANCING_CH" for Financing
data-heylight-apiKey: ask for the public API key to your account manager or find it in the settings section of your merchant dashboard. It is only needed for HeyLight Financing (not for HeyLight BNPL 0%). For testing on Sandbox version, please use the following key: b453131bbbb29811b55e962ab4ec9347068401e9
data-heylight-currencySymbol: Ensure the currency is correct
{% assign minimum_amount = 1000 %}: replace with your own minimum order value (1000 = CHF 10,00)
{% assign maximum_amount = 500000 %}: replace with your own maximum order value (500000 = CHF 5000,00)
{% assign available_terms = '3,6,12' | split:"," %}: this is a list of the number 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.
{% assign min_instalment_amount = 100 %}: replace with your own minimum monthly repayment amount (100 = CHF 1,00)
data-heylight-logo-variant ="red" (o "black"|"white") to select the logo HeyLight colour to appear on your product page

For HeyLight BNPL 0%:


              <!-- 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 product.price >= minimum_amount and product.price <= maximum_amount -%}  
              	{% assign term_ceiling = product.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-heylight-minorAmount="{{ product.price }}"   
                    data-heylight-term="{{ acceptable_terms | split: "," | last }}"
                    data-heylight-lang="{{ localization.language.iso_code | slice: 0, 2 }}"
                    data-heylight="true"
                    data-heylight-currencySymbol="CHF" 
                    data-heylight-type="PRODUCT_DESCRIPTION_HEYLIGHT_BNPL_CH"
                    data-heylight-apiKey="<YOUR_API_KEY>"
                    data-heylight-cadence="MONTHLY"
                    data-heylight-thousandsSeparator="."
                    data-heylight-decimalSeparator=","
                    data-heylight-symbolOnLeft="false"
                    data-heylight-spaceBetweenAmountAndSymbol="true"
                    data-heylight-logo-variant="red"
                    data-heylight-decimalDigits="2" >
                  </div>  
                </div>
              {%- endif -%}

For HeyLight Financing:

{%- comment -%} 
  DEFINE CUSTOM TERMS HERE
      - NOTE: Always order the available terms in ascending order and match them to the same index in term_ceilings / term_floors
        For example:
        12 months -> CHF 100 - 500
        24 months -> CHF 500.01 - 1500
        36 months -> CHF 1500.01 - 10000
{%- endcomment -%}

{% assign available_terms = '12,24,36' | split:"," %}
            
<!-- Change your term maximums here for 12,24,36 etc -->
{% assign term_ceilings = '50000,150000,1000000' | split: ',' %}
            
<!-- Change your term minimums here for 12,24,36 etc -->
{% assign term_floors = '10000,50001,150001' | split: ',' %}


{%- comment -%}
  DON'T CHANGE ANYTHING BELOW THIS LINE
{%- endcomment -%}
{% assign last_index = term_ceilings.size | minus: 1 %}
{% assign acceptable_term = available_terms[last_index] | plus: 0 %}
{% assign highest_ceiling = term_ceilings[last_index] | plus: 0%}
{% assign minimum_amount = term_floors[0] | plus: 0 %}

{%- if product.price >= minimum_amount and product.price <= highest_ceiling -%}  
    {% for index in (0..last_index) %}
        {% assign term = available_terms[index] | plus: 0 %}
        {% assign ceiling = term_ceilings[index] | plus: 0 %}
        {% assign floor = term_floors[index] | plus: 0 %}

        {% if product.price <= ceiling and product.price >= floor %}
            {% assign highest_ceiling = ceiling %}
            {% assign acceptable_term = term %}
        {% endif %}
    {% endfor %}

    {% assign allowed_terms = '' %}
    {% for term in available_terms %}
        {% assign term_as_number = term | plus: 0 %}
        {% if term_as_number <= acceptable_term %}
            {% if allowed_terms == '' %}
                {% assign allowed_terms = term %}
            {% else %}
                {% assign term_with_comma_prefix = ',' | append: term %}
                {% assign allowed_terms = allowed_terms | append: term_with_comma_prefix %}
            {% endif %}
        {% endif %}
    {% endfor %}

  <div class="heidi_messaging">
    <div  
      id="heidipay-container"
      data-heylight-allowedterms="{{ allowed_terms }}"
      data-heylight="true"
      data-heylight-minorAmount="{{ product.price }}"
      data-heylight-term="{{ acceptable_term }}"
      data-heylight-currencySymbol="CHF" 
      data-heylight-lang="{{ localization.language.iso_code | slice: 0, 2 }}"
      data-heylight-type="PRODUCT_DESCRIPTION_HEYLIGHT_FINANCING_CH"
      data-heylight-apikey="<YOUR_API_KEY>"
      data-heylight-cadence="MONTHLY"
      data-heylight-thousandsSeparator="."
      data-heylight-decimalSeparator=","
      data-heylight-symbolOnLeft="false"
      data-heylight-spaceBetweenAmountAndSymbol="true"
      data-heylight-decimalDigits="2"
      data-heylight-logo-variant="red" >
    </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:
1. For Production: <script src="https://upstream.heidipay.com/sdk/heidi-upstream-lib.js" ></script>
2. For Sandbox: <script src="https://sbx.upstream.heidipay.io/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 that 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" -%}