Adding Promotional Tools

Overview

ChargeAfter provides the following promotional tools:

  1. Promotional Banners - An advertising message within a box that makes your store visitors aware
    of the availability of promotional financing. It is written in a large font and it includes
    ChargeAfter’s checkout finance logo.
  2. Promotional Widgets - A widget to 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 the promotional tools to your Shopify Store. For more detailed information about the tools, please view the Promotional Widget section.

📘

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 for adding ChargeAfter promotional tools

From your Shopify Admin Site click on Online Store.

  1. Click on 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 on Actions > Edit code. The code editor page opens.
  4. From the code editor directory scroll down to the Snippets folder and click on Add a new
    snippet. The Add a new snippet dialog pops up.
  5. Enter chargeafter-widget and click on 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:
<script type="text/javascript">
var caConfig = {
apiKey: 'public-api-key'
};
!function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
t.getElementById(a)||(e.ChargeAfter={cfg:n},(r=t.createElement(c)).id=a,
r.src="https://cdn.chargeafter.com/promotional-widget/v2/widget.min.js?t="+
1*new Date,r.async=!0,o.parentNode.insertBefore(r,o))}
(window,document,"script","chargeafter-promotional-widget",caConfig);
</script>
  1. In the line apiKey: 'public-api-key' replace ‘public-api-key’ with your merchant Production Public Key.
  2. Save the file.
  3. Scroll up to the Layout folder and open your theme layout file, which by default is theme.liquid.
  4. Insert the following line of code above the closing head tag : {% include 'chargeafter-widget' %}

Adding Promotional Banners

1. Adding the Promotional Banner to your Shopify home page
The steps to add ChargeAfter promotional banner to the home page vary between Sectioned and
Non-sectioned themes.

Instructions for Non-sectioned Themes

  1. On the Themes page, find the theme where you want to add ChargeAfter promotional banner.
  2. Next to the theme name, click on Actions > Edit code. The code editor page opens.
  3. From the code editor directory, open the file index.liquid located under the Templates folder.
  4. Insert the following code wherever you want to display ChargeAfter promotional banner:
<div class="ca-widget" style="height:100%;width:100%">
<div class="ca-promotional-widget" data-widget-type="banner-type">
</div>
</div>
  1. In the code above, replace “banner-type” with the type of banner you wish to display. Please
    refer to the section Adding Promotional Widgets to a Page of ChargeAfter Documentation for a list of banner type names and the corresponding images.
  2. In the code above, change the height and width percentages to adjust the size of the banner to your liking.
  3. Click Save to save your changes.

Instructions for Sectioned Themes

  1. On the Themes page, find the theme where you want to add ChargeAfter promotional banner.
  2. Next to the theme name, click on Customize. This will take you to the Theme Editor.
  3. In the top bar of the Theme Editor, select Home page from the page selection list.
  4. In the Theme Editor sidebar, go to the Sections tab.
  5. Click on Add section.
  6. Scroll to the bottom and under ADVANCED LAYOUT select Custom content and click on Add.
  7. Delete the placeholder text under Heading.
  8. Under CONTENT click on Custom HTML to expand it.
  9. Insert the following code in the HTML text box:
<div class="ca-widget" style="height:100%;width:100%">
<div class="ca-promotional-widget" data-widget-type="banner-type">
</div>
</div>
  1. In the code above, replace “banner-type” with the type of banner you wish to display. Please
    refer to the section Adding Promotional Widgets to a Page of ChargeAfter Documentation for a
    list of banner type names and the corresponding images.
  2. In the code above, change the height and width percentages to adjust the size of the banner to
    your liking.
  3. Click Save to save your changes.

Adding Promotional Banner to other Shopify pages.
The steps below apply to all of your Shopify store pages aside from the home, password and checkout
pages. We recommend adding a promotional banner to the following Shopify pages: Collection List,
Collection, Product and Cart.

  1. On the Themes page, find the theme to which you want to add ChargeAfter promotional
    banner.
  2. Next to the theme name, click on Actions > Edit code. The code editor page opens.
  3. From the code editor directory, open the template file corresponding to the page where you are adding the banner. 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 code wherever you want to display ChargeAfter promotional banner:
<div class="ca-widget" style="height:100%;width:100%">
<div class="ca-promotional-widget" data-widget-type="banner-type">
</div>
</div>
  1. In the code above, replace “banner-type” with the type of banner you wish to display. Please
    refer to the sectionAdding Promotional Widgets to a Page for a list of banner type names and the corresponding images.
  2. In the code above, change the height and width percentages to adjust the size of the banner to your liking.

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 on Actions > Edit code. The code editor page opens.
  3. From the code editor directory, open the template file for your product page content. For non-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.
    It is strongly recommended to add the widget close the product’s price
<div class="ca-promotional-widget" data-widget-type="widget-type"
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: ',' }}">
</div>
  1. In the code above, replace “widget-type” with the type of widget you wish to display. Please
    refer to the Adding Promotional Widgets to a Page section for a list of widgets types available.

Did this page help you?