Add 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 legacy theme structures. For more detailed information about the tools, please view the Promotional Widget section.

👍

More Options for Adding Promos

At the bottom of this document is an Adding Block Promos guide for merchants with Themes Online 2.0 and includes Line of Credit Promo only.

📘

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:

  1. Click Themes to navigate to 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>
  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

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

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

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

Adding Block Promos for Themes Online 2.0

The manual below is for merchants with Themes Online 2.0 and includes Line of Credit Promo only.
Merchants with legacy theme structures may use the Adding Promotional Tools guide in this document above.

Installation

  1. In the store’s admin site, navigate to the Online Store > Themes > Customize:
18281828
  1. On the Customize page, click the Home page list > Products template:
18411841
  1. In the workspace, hover over the price and click the small plus sign icon:
15121512
  1. Add a Line of Credit Promo Block from the app list:
408408
  1. Go to the Financing Page in the far right column (from the list of Shopify pages) > Save:
18471847
  1. You're done!
15471547

Did this page help you?