Adding Promotional Tools_old

Suggest Edits

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 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:
<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>

<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-sandbox.ca-dev.co/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 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 Simple Widgets and Banners 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 as needed.
  3. Click Save to keep 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 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 Add section.
  6. Scroll to the bottom and under ADVANCED LAYOUT select Custom content and click Add.
  7. Delete the placeholder text under Heading.
  8. Under CONTENT click 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 Simple Widgets and Banners 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 as needed.
  3. Click Save to save your changes.

Adding Promotional Banner to other Shopify pages.
We recommend adding a promotional banner to the following Shopify pages:

  • Collection List
  • Collection
  • Product
  • Cart

The steps below apply to all of your Shopify store pages aside from the home, password and checkout pages:

  1. On the Themes page, find the theme to which you want to add ChargeAfter promotional banner.
  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 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 section Simple Widgets and Banners 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 as needed.

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:
<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="financing-page">
</div>

🚧

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

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

Updated about 1 year ago