Integrating with page builders

If you're using a third-party page builder, it's possible to add UploadKit to your add-to-cart form as long as the page builder supports all of these features:

• It must add an add-to-cart form tag (<form></form>) to your product page, in a similar way that a theme would;
• It must be able to add Liquid code inside your add-to-cart form;
• If it adds to the cart without reloading the page, it must support Shopify line item properties.

To add UploadKit to your form, add a "Custom Liquid HTML" section to your add-to-cart form. This must be inside the <form></form> tags, or the uploads won't get added to the cart!

Then paste this in:

<div class="uploadkit" data-uploadkit-product-json="{{ product | json | escape }}" data-uploadkit-collections-json="{{ product.collections | json | escape }}"></div>
<script src="https://assets.getuploadkit.com/assets/uploadkit-app.js"></script>

Note that you still need to set your field up in UploadKit and target the products you want it to appear on, even when this code snippet has been added. This is because you can add this to a template that's reused for all products even though only certain products may require file uploads.

Please be careful to test your upload and ensure that the link to the uploaded file appears in your cart or in the checkout. If you have disabled the 'Show link in checkout' option in UploadKit, you may want to temporarily enable this while testing.

If you are using PageFly, you can add an UploadKit section to your product template instead of pasting the code above, however this needs to be inside a ProductDetail section, along with your add-to-cart button.