How do I install Mobicred installment calculator widget on Dawn theme?

Technical Q&A

Topic summary

A user seeks help installing the Mobicred installment calculator widget on their Shopify store using the Dawn theme. Mobicred provides two code snippets: a JavaScript file to add to the header/footer, and an HTML div element to place where the widget should appear.

Key implementation challenges:

  • Uncertainty about exact code placement locations in Dawn theme
  • Need to dynamically pass product price into the widget’s data-amount property
  • Shopify currency formatting requires modifications to correctly pass values

Suggested approach from Mobicred:

  • Locate product-template.liquid file in the “Sections” folder
  • Place widget code below the “price” section (around lines 80-100 for standard templates)
  • Use the product object to access product.price variable
  • Apply necessary currency conversion to pass numeric values correctly

Current status: The discussion remains open with another user confirming they face the same implementation struggles. Mobicred notes they don’t provide direct integration support but users can contact them for assistance.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I need help with installing Mobicred widget for calculating monthly installments. They provided some instructions but I’m not exactly sure where the code must be implemented. I need clear instructions on how to do this. I’m using Dawn theme.

Please see below guide from Mobicred Merchant Portal:

Implementation

In order to implement the Instalment Widget onto your website, add the script below to either your header or footer:

<rel="pre"><script src="https://mobicred.co.za/plugins/instalment.js"></script></rel="pre">

Then once the script has been installed, paste the HTML code below wherever you would like the widget to appear:

<rel="pre"><div id="instalmentCalc" data-amount="1000"></div></rel="pre">

Please note that only one instance of the widget can be implemented per page! The above example represents the most basic implementation of the widget and will use the application’s default values to generate your widget. Should you wish to customise either the text or styling check out the Configuration tab for more information.

Passing in the Finance Amount

In order for the widget to work correctly, you will need to dynamically pass the numeric value you want to offer finance on into the widget’s data-amount property. Depending on your development environment this can be accomplished in many ways. We will not offer support on this aspect of the integration, however if you would like assistance on the integration, please log a ticket with us.

When using Shopify, the most common place to display the Instalment Widget would be on the product detail page.

You can find this under your Theme code in the “Sections” folder. Look for the product-template.liquid file and place the code below the “price” section. (Around lines 80-100 if you are using a standard template.)

When working on this template page, you will have access to the product object.

Using this object you can gain access to the product.price variable. Due to how Shopify formats currency, you will need to make a few small modifications in order to pass the currency value in correctly.

Once you have added in the necessary currency conversion, you can now pass the variable directly into the data-amount property to dynamically add the price the widget:

<rel=“pre”>

</rel=“pre”>

2

Good day, Have you managed to successfully implement the Mobicred widget on your shopify store.

I also have been struggling to add the code.