Search

Shopify

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 integrationsuk@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?type=calculator&min=25&max=600&amount={{ current_variant.price | divided_by: 100.0 }}&locale=uk"></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 Start -->

{% 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’

 


Add the Zip Landing Page

Create a landing page (static web page) to educate customer about Zip, while also providing access for customers to pre-apply for their Zip account.

What does the Zip landing page look like?

– In the Shopify admin page, navigate to Online Store > Pages > Add Page.

– In the ‘Title‘ field, enter:

Zip – Own it now, pay in 4

– Click on the “<> (Show HTML)” button to access the HTML view.

– Copy the Zip Landing Page code below, and paste it into the HTML view field:

<zip-information instore="true" online="true" faqs="true"></zip-information>
<script src="https://zip.co/nz/assets/landing.js?v=1.0"></script>

– You can set either instore=”true” online=”true” to false if you do not wish to see specific panels

– Click ‘Save’.


Add Menu Link to Zip Landing Page

Add a link to the Zip Landing Page in the header/footer menus so customers can access the page.

– In the Shopify admin page, navigate to Online Store > Navigation.

– Select the menu you wish to update.

– Click ‘Add menu item‘.

– In the ‘Name’ field, enter:

About Zip

– Click the ‘Link’ box and select ‘Pages‘, then select the Zip landing page that you just created.

– Click ‘Add‘.

– Click ‘Save menu‘.

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

Zip Co Payments UK Ltd & Zip Co Finance UK Ltd, 82 St. John Street, London, EC1M 4JN, UK

uk@care.zip.co