Adding Marketing Elements

Promotional Widgets are widgets who can be displayed next to the product price and informs shoppers that they can select checkout finance as a payment method.

This section of the guide explains how to add the promotional tools to your Shopify Store.

🚧

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

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 Progressive Leasing promotional widget:

1. On the Themes page, find the theme to which you want to add Progressive Leasing 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 Progressive Leasing promotional widget:

<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="https://www.progleasing.com/">
</div>

🚧

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

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

Optionally, to override the default CSS properties of the Promotional Widget, an additional line may be added to the HTML code from above. The following example will align the text to the left:

<style>
  .ca-promotional-widget-text-links-container > div {
    justify-content: left !important;
  }
</style>