APPROVE for SHOPIFY

Shopify Overview

Integrating APPROVE into your Shopify site is easy. We have options created to cater to every level of expertise, and every business size. The following table will help you choose the right Shopify integration solution for your business.

Shopify Solution Technical Level Integration Into Your Site Requirements
Shopify Theme Integration Familiarity with basic Shopify theme customization and an understanding of basic to intermediate javascript / jquery is needed
Custom (We create a solution specifically for you) Contact KWIPPED for a quote

Shopify Theme Integration Details

The steps needed to integrate with the shopify theme are summed up below.

  1. Download the approve-plugin.js file
  2. Install the approve-plugin.js file
  3. Add the contents of approve-plugin.liquid into Shopify
  4. Edit the window.kwipped_approve settings as needed
  5. Place the APPROVE finance plugin initialization snippet in the theme body.
  6. Place the APPROVE finance button code in the Shopify cart and product page(s).
  7. Add a jquery or javascript trigger if needed.
  8. Done.

STEP 1: Download the approve-plugin.js file

Download the file dist/approve-plugin.js from our project on GitHub and save it locally.

To do so: navigate to te dist folder, right click on the file approve-plugin.js

STEP 2: Install the approve-plugin.js file

In the Shopify theme editor, go to the section named Assets.

Click on Add a new asset

STEP 3: Add the contents of approve-plugin.liquid into Shopify

GoTo: Online Store -> Themes In the active theme click on “Actions" and select “Edit Code"

When the code editor loads go to the “Snippets" folder Create a new snippet file and name it “approve-plugin.liquid"

Click on the newly created file to edit it.

Copy the contents of approve-plugin.liquid from the dist folder in GitHub Or copy the code block below, and paste into the snippet you just created named approve-plugin.liquid in your shopify theme editor

{warning} IF you see in the browser console an error referencing #/, you will need to modify the Assets/theme.js

Go to: Assets -> theme.js

Search for: $(window.location.hash)

Replace with: $(window.location.hash.replace('#/', '#'))

STEP 4: Edit the window.kwipped_approve settings as needed

Set the appropriate jquery element tags needed Locate the following section in your Snippets/approve-plugin.liquid file in the Shopify Theme Editor:

      window.kwipped_approve = window.kwipped_approve || {};

      // Set to KWIPPED URL
      window.kwipped_approve.url = "https://www.kwipped.com";

      // Set to your APPROVE id 
      window.kwipped_approve.approve_id = "your+approve+id+goes+here";

      // setup sh_app && config objects
      window.kwipped_approve.sh_app = {};
      window.kwipped_approve.sh_app.config = window.kwipped_approve.sh_app.config || {};

      // the product_info_wrap is to be set to product view wrapping element that contians both the APPROVE finance button as well as the qty and price elements. 
      window.kwipped_approve.sh_app.config.product_info_wrap = ".grid__item";

      // the cart_info_wrap is to be set to vart view wrapping element that contians both the APPROVE finance button as well as the qty and price elements. 
      window.kwipped_approve.sh_app.config.cart_info_wrap = ".main-content";

      // the simple_product_price_ele is to be set to the price element jquery ID or class tag to retrieve the base price on a single simple APPROVE finance button product page. 
      window.kwipped_approve.sh_app.config.simple_product_price_ele = ".productView [data-product-price-without-tax]:first";

      // the variable_product_price_ele is to be set to the price element jquery ID or class tag to retrieve the base price on a single variable APPROVE finance button product page. 
      window.kwipped_approve.sh_app.config.variable_product_price_ele = ".productView [data-product-price-without-tax]:first";

      // qty_ele Set to the quantity element jQuery class or ID tag that contains the qty increase/decrease selectors. 
      window.kwipped_approve.sh_app.config.qty_ele = 'input[data-quantity-input]';

      // qty_down_ele Set to quantity down click element jquery class tag to set the current quantity for the APPROVE finance button. 
      window.kwipped_approve.sh_app.config.qty_down_ele = 'button[data-action="dec"]';

      // qty_up_ele  Set to quantity up click element jquery class tag to set the current quantity for the APPROVE finance button.  
      window.kwipped_approve.sh_app.config.qty_up_ele = 'button[data-action="inc"]';

STEP 5: Place the APPROVE finance plugin initialization snippet in the theme body.

Place the APPROVE finance plugin initialization snippet in the Shopify theme body file Layout/theme.liquid right before the closing </body> tag.

{%- include "approve-plugin", approve_loader: true -%}

STEP 6: Place the APPROVE finance button code in the Shopify cart and product page(s).

Place the APPROVE finance button snippet code in the Shopify cart theme file Sections/cart-template.liquid where you want the APPROVE finance button to appear.

{%- include "approve-plugin", approve_button: "cart", approve_cart: cart, approve_button_class: "btn btn--small-wide" -%}

Place the APPROVE finance button code in the Shopify product page(s) i.e. Sections/produc-template.liquid OR Sections/collections-template.liquid where you want the button to appear.

The product price can appear in your theme in many different places. Using the default (at the time of writing) theme of “Debut" the sections and files below can be edited to show the approve button tied into the price. 

{%- include 'approve-plugin', approve_button_class: "btn ", approve_button: "single", approve_model: product.title, approve_price: product.price, approve_qty: product.quantity, approve_type: "new_product" -%}
IF you would like to add a dynamic option for the approve_type you can do so like this:
{%- assign product_tags = product.tags | join: '~~~' | downcase | split: '~~~' -%}
{%- assign approve_product_type = "new_product" -%}
{%- if product_tags contains 'used' -%}
    {%- assign approve_product_type = "used_product" -%}
{%- endif -%}
{%- include 'approve-plugin', approve_button: "single", approve_model: product.title, approve_price: product.price, approve_qty: product.quantity, approve_type: approve_product_type -%}

{info}

IN the code remember to replace the variables:

product.title,

product.price,

product.quantity, and

"new_type" or approve_product_type

with the correct variables for those data pieces.

Example of places you can put the APPROVE finance button.
  • Sections/collections.liquid
  • Sections/collection-template.liquid
  • Sections/product-recommendations.liquid
  • Sections/product-template.liquid

STEP 7: Add a jquery or javascript trigger if needed.

If your Shopify theme utilizes a script to change the quantity of the item, you will need to update the functions that update the quntity and add the following:

<!-- to change quantity -->
$(".element").attr("approve-qty", qty);
<!-- to change price -->
$(".element").attr("approve-price", new_price);

You should be able to utilize vanilla javascript or jQuery libraries as you would expect to set the needed attribute values. approve-items need to be set to a JSON object

STEP 8: Done.

Shopify Theme Integration Details

Contact KWIPPED for a quote