I have an issue with my Shopify widget. Help!

If you have trouble using our Zip Widget app for Shopify, you can just fall back to the widget code as a workaround.

📘 Please refer to our Shopify Developers Guide here for detailed documentation.

Common widget issues:

• Widget disappearing
• The widget appears on two lines

Widget Code

What does our default widget look like?

Widget Code 1:

<!-- Zip Widget Start -->
  <span>
      {%- 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 -->

You can also make style changes to our widget code so that you can fit your Shopify theme.
Please see the code below:

Widget Code 2:

<!-- Zip Widget Start -->
  <span>
      <style type="text/css">
          #partPayCalculatorWidget{
              background: none !important;
              padding: 0px !important;
              margin: 0px !important;
              }
          </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 -->

Before You Start ❗

These instructions are for a Shopify store using one of the default Shopify or lightly customized themes. If the store's theme is heavily customized, you may have to add the below snippets to different templates and files.

Step 1. Create a 'zip-widget.liquid' snippet file using Widget Code 1 or Widget Code 2

Step 2: Insert this snippet (e.g. {% include 'zip-widget' %}) into the appropriate place within your product page code

Please note 📘 Use {% render 'zip-widget' %} if include is not showing up.

📘 We recommend adding the Zip widget to a development theme or a copy of the currently live theme. This way you can control when you share the integration with your customers.

Formatting tips! 💡

• Widget Dialog is not showing, but the page dims OR the dialog is at the very bottom/top of the page

 #partPayCalculatorWidgetDialog {
top: 20% !important; 
}

#partPayCalculatorWidgetTextFromCopy {
float: left;
margin-right: 5px;
}

#partPayCalculatorWidgetTextFromCopy + br {
display: none;
}

• I want a one-line cart page widget (with justification=right)

#partPayCalculatorWidgetLogo {
padding: 0 !important; 
}

#partpayCalculatorWidgetUnderCopy { 
display: inline-block !important;
}

#partPayCalculatorWidgetTextFromCopy + br {
display: none;
}

Payment Footer Logo

<li><img src="https://static.zipmoney.com.au/assets/default/footer-tile/footer-tile-new.png" style="height:26px; display:inline-block; vertical-align:middle;"></li>

• The logo is too high/low

The widget is showing the wrong country messaging

Please head over to your widget settings, and select New Zealand as the country. You will see the United States of America or another country selected.
 

 
Select NZ and 'save settings'.
 

 
If the widget is still showing another country's messaging. Then you will need to remove the widget integration from your live theme and re-integrate it.
 

If you need more help, we can implement this for you through a Shopify collaborator account. Please get in touch with our Integrations Team here.