Add Promotional Tools

Suggest Edits

Overview

The Promotional Widget is a powerful marketing tool to keep shoppers informed about financing options while browsing product pages or before making a purchase. Adding a widget can improve average order value and increase conversion rates - minimizing cart abandonment.

This section of the guide explains how to add 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 Promotional

At this document is an Adding Block Promos guide for merchants with Themes Online 2.0 and includes Line of Credit Promo only. This document also includes steps to add promotional manually if you don't use schema from Theme Online 2.0

Adding Promotional Widgets for Themes Online 2.0

📘

Note:

You Shopify theme must to basic on Theme Online 2.0 structure. Legacy theme structures may use the Adding Promotional Tools guide in this document

Installation

  1. In the store’s admin site, navigate to the Online Store > Themes > Customize:

  2. On the Customize page in the Home page drop-down list, select the Products or Cart page template:

  3. In the workspace, hover over the price and click the small plus (+) icon (or click on Add block on left sidebar):

  4. Add Promotional block from the app list:

  5. Go to the Financing Page in the right side panel (from the list of Shopify pages) and choose Promotional Type > Save:

    👍

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

  6. You're done!

Adding Promotional Widgets Manually

📘

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, or in the Cart page, next to the total 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 or cart 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:

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

    Widget for cart page:

    <div 
     class="ca-promotional-widget" 
     data-widget-type="product-widget-line-of-credit"
     data-widget-item-sku="cart_sku" 
     data-widget-item-price="{{ cart.total_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="cart_sku" 
     data-widget-item-price="{{ cart.total_price | money_without_currency | remove: ',' }}" 
     data-widget-financing-page-url="your-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.

Updated 17 days ago

What’s Next