Adding Promotional Tools

Overview

ChargeAfter provides promotional widgets:
Promotional Widgets are widgets who can be displayed next to the product price. It serves two purposes:

• First, it informs shoppers that they can select checkout finance as a payment method.
• Second, it can be configured to show the lowest possible monthly payment, given the promotional financing that is available.

This section of the guide explains how to add promotional tools to your Shopify Store. For more detailed information about the tools, please view the Promotional Widget section.

📘

Note

Adding promotional tools involves making changes to your store’s Theme code. The steps outlined in the next subsections need to be repeated for each theme where you want the promotional tools to be included.

Configuring your theme

From your Shopify Admin Site click Online Store, follow the below steps:

1. Click Themes to go to the Themes page.
2. On the Themes page, find the theme where you want to add ChargeAfter promotional tools.
3. Next to the theme name, click Actions > Edit code. The code editor page opens.
4. From the code editor directory scroll down to the Snippets folder and click Add a new snippet. The Add a new snippet dialog pops up.
5. Enter chargeafter-widget and click Create snippet. A new file with the name chargeafter-widget.liquid will be added to the Snippets folder.
6. Open the file chargeafter-widget.liquid you just created.
7. In the code section copy and paste the following code from Integration Guide (HTMLD + JS)
8. In the line apiKey: _public-api-key_ replace _public-api-key_ with your merchant Production Public Key.
9. Save the file.
10. Scroll up to the Layout folder and open your theme layout file, which by default is theme.liquid.
11. Insert the following line of code above the closing head tag : {% include 'chargeafter-widget' %}

Adding Promotional Widgets

The promotional widget is intended to be displayed in the Product page, next to the product’s price.

Follow these steps to add the ChargeAfter promotional widget:

1. On the Themes page, find the theme to which you want to add ChargeAfter promotional tools.

2. Next to the theme name, click Actions > Edit code. The code editor page opens.

3. From the Code Editor directory, open the Template file for your product page content. For sectioned themes, this file will be located under the Sections folder. For Non-sectioned themes, it will be located under the Templates folder.

4. Insert the following HMTL code wherever you want to display ChargeAfter promotional widget:
   Widget for product page:

   Type: product-widget-line-of-creditType: default-template

   <div
   	class="ca-promotional-widget"
   	data-widget-type="product-widget-line-of-credit"
   	data-widget-item-sku="{{ product.selected_or_first_available_variant.sku}}"
   	data-widget-item-price="{{product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}"
   	data-widget-financing-page-url="your-financing-page">
   </div>
   

   <div 
        class="ca-promotional-widget" 
        data-widget-type="default-template"
        data-widget-item-sku="{{ product.selected_or_first_available_variant.sku }}" 
        data-widget-item-price="{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}" 
        data-widget-financing-page-url="financing-page">
   </div>
   

5. In the code above, replace “financing-page” with the financing page URL you wish to display. Please refer to the Promotional Widget section for a list of widget properties available.

👍

It is strongly recommended to add the widget in close proximity to the product’s price.