Our app is now available on iOS and Android

  • Search

    Shopify Integration Steps

    To configure a Shopify site with Zip, it will require admin access to the Shopify account to follow these instructions

    Locate Your Zip Merchant Credentials

    To integrate Zip into your Shopify website, you will need the following Zip Merchant Credentials:

    – Merchant ID

    – API Token

    These credentials should have been sent to you by email, however, if you’re unable to locate them, please contact us at nz@partners.zip.co

     

    Add Zip as a Payment Method

    Click here to install Zip onto Shopify

    – Click “Install payment provider”

     

    – Now navigate to Settings > Payment Providers > Alternative Payments and select the new ‘Zip – Own it now, pay later’ option

    – Input the ‘Merchant ID’ and ‘API Token’ provided by us into the appropriate fields

    – Click ‘Save’

     

    Add the Zip Javascript (js) Library for Widgets

    – In the Shopify admin dashboard, navigate to Online Store > Themes > Actions > Edit code

    – Navigate to Snippets > Add a new snippet

    – Name the new snippet “zip-widget”

    – Click “Create snippet

    – Copy the zip-widget snippet code in the box below, and paste it into the zip-widget.liquid snippet you just created

    Note: The #partPay IDs are intentional

    <!-- Zip Widget Start -->
    <span>
    <style type="text/css">
    #partPayCalculatorWidget{
    text-align: left;
    width: 100% !important;
    background: none !important;
    padding-left: 0px !important;
    margin: 0px !important;
    color: inherit !important;
    font-size: 1em !important;
    }
    #partPayCalculatorWidgetLogo{
    width: 20% !important;
    height: 20% !important;
    }
    #partPayCalculatorWidget br{
    display: none !important;
    }
    #partPayCalculatorWidgetTextFromCopy {
    padding-left: 3px !important;
    }
    #partPayCalculatorWidget::after {
    clear:both;
    }
    #partPayCalculatorWidgetLogo::after {
    clear:both;
    }
    #partPayCalculatorWidgetTextFromCopy::after {
    clear:both;
    }
    </style>
    {%- assign current_variant = product.selected_or_first_available_variant -%}
    <script async src="https://widgets.partpay.co.nz/zip-widget-classic-v3.0.0.js?amount={{ current_variant.price | divided_by: 100.0 }}&locale=nz"></script>
    </span>
    <!-- Zip Widget End -->

    Adding the Zip Widget to the Product Page

    – In the Shopify admin dashboard, navigate to:

    Online Store > Themes > Actions > Edit code > Sections > product-template.liquid

    If you’re unable to find the product-template.liquid file, look for the product.liquid file under the Sections file list or the Templates file list

    – To locate the “Add to cart” button, search (press Ctrl + F) for:

    <button type=”submit” name=”add”

    – Copy the Zip Widget Code in the box below, and PASTE it directly BEFORE the line of code you just located

    <!-- Zip Widget -->
    
            {% include 'zip-widget' %}
    
    <!-- Zip Widget End --> 

    – Click “Save”

     

    Adding the Zip Widget to the Cart Page

    – In the Shopify admin dashboard, navigate to:

    Online Store > Themes > Actions > Edit code > Sections > cart-template.liquid

    If you’re unable to find the cart-template.liquid file, look for the cart.liquid file under the Sections file list or the Templates file list

    – To locate the area, search (press Ctrl + F) for checkout

    – Locate the first highlighted “checkout”, this should be in the following line of code:

    <div class=”cart__shipping”>{{ ‘cart.general.shipping_at_checkout’ | t }}</div>

    – Copy the Zip Widget Code in the box below, and PASTE it after the line of code you just located

    <!-- Zip Widget -->
    
            {% include 'zip-widget' %}
    
    <!-- Zip Widget End --> 

    – Click “Save”

    Add the Zip Payment Icon

    Include the Zip payment icon alongside the other accepted payment logos, wherever they appear on your website

    What does the Zip payment icon look like?

    – In the Shopify admin dashboard, navigate to Online Store > Themes > Actions > Edit code > Sections > footer.liquid

    If the footer.liquid file does not exist, look for the Theme.liquid file under the Layout file list

    – Search (press Ctrl + F) for “payment”

    – Locate the last highlighted “payment”. Closely after this, there should be the following code:

    {% endfor $}

    – Copy the Zip Payment Icon code in the box below, and PASTE it directly after the {% endfor %} you just located

    <a><img src="https://d3k1w8lx8mqizo.cloudfront.net/INTEGRATIONS/2016/zippay/payment-icons/zip-paycon-80x50-greyscale.png" style="height:30px;"></a>

    You can adjust the size of the Zip icon by changing the numerical value of the height style property.

    – Click ‘Save’

     

    If you need further assistance, please contact us at nz@partners.zip.co

    Zip Co NZ Limited, Level 3, 33-45 Hurstmere Road, Takapuna, Auckland.

    09 489 8144 nz@care.zip.co