Partially Widget for Shopify

A small bit of JavaScript code placed on product pages to let customers know they can purchase with a Partially payment plan. The widget lets the customer interactively see the payment plan options available to them.

Generate the widget?

The widget code is generated by the integration tool of your offer. The generated code can be customized further — see the options below.

Add the widget code to my Shopify store

Similar to adding the Partially checkout button to your product pages, add the widget code to the liquid file containing your product info.

Customize the widget with the following options

• amount (string) — the amount to use for the payment plan, typically product price
• offer (string) — the offer ID from your Partial.ly merchant portal, decides the terms used in the widget
• currency (string) — currency to use, default USD
• language (string) — language for the widget popup; defaults to en. Options: de, en, es, fr, it, pt
• source (string) — if your Partial.ly account integrates with your shopping cart, set the source here. For Shopify, you'll need to trigger a shopify_variant_changed event on the document with the variant set to event detail (see example below)
• includeCheckout (boolean) — true to include a Partial.ly checkout button in the widget
• checkoutButtonText (string) — text for the checkout button, if included
• style (string) — widget style: stacked or thin. Default is stacked
• title (string) — title text, for stacked style widgets
• actionText (string) — text for the widget link that opens the popup
• popupDetails (string) — custom header text in the widget popup
• body (string) — custom body text for the widget; supports placeholders (see below). Leave empty for default dynamic body
• targetSelector (string) — CSS selector for the element to render the widget inside
• render (boolean) — whether to automatically render the widget; default true
• actionSelector (string) — if render is false, a CSS selector for the element that triggers opening the widget popup
• quantity (integer) — quantity of the product; default 1
• quantitySelector (string) — CSS selector of a quantity input element to monitor for changes and auto-update widget price
• checkoutButtonConfig (object) — see Partial.ly Checkout Button config

Shopify Variant Changed Event Example

<script>
var selectCallback = function(variant, selector) {  
    // trigger custom event for Partial.ly
    var event = new CustomEvent('shopify_variant_changed', {detail: variant});
    document.dispatchEvent(event);  
};

// initialize multi selector for product
jQuery(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
});
</script>

Custom Placeholders

A few custom placeholders are available for the widget body to insert dynamic information. Within raw tags, surround the placeholder variable with {{ and }}.

• down_payment_amount — the calculated down payment amount
• down_payment_min_amount — the calculated minimum down payment amount, for offers with a flexible down payment
• payment_amount — the calculated scheduled payment amount

Example:

{%raw%}
body:'Pay only {{payment_amount}} a month',
{%endraw%}