Changing where your upload field appears

Before you get going, an important note: if you manually install the UploadKit embed code in the wrong place, outside the add-to-cart form, uploaded files won't be added to the cart.

UploadKit will add your 'Choose file' button to your product page automatically just above the 'Add to Cart' button. If that isn't where you want it, you can alter where the button and image previews appear.

To place them in a specified position, edit your product template code by opening Online Store > Themes, and clicking More actions > Edit Code for your published theme.

Your product template code is usually inside sections/product-template.liquid, but this can vary depending on your theme. Select the correct template from the left hand side, then paste this code in where you'd like the field to appear:

<div class="uploadkit"></div>

Click Save, and you're done.

One super-important thing: this embed code must be placed inside your product form, i.e. between the {% form 'product', product %} and {% endform %} liquid tags. This may be inside a snippet (e.g. snippets/product-form.liquid), so make sure you track this down before adding the embed code between the tags.

Warning: if you manually install UploadKit outside your add-to-cart form, it won't work!

App block support for Online Store 2.0

UploadKit supports Shopify Online Store 2.0 blocks: you can control where the fields appear.

To activate this, please open your Shopify dashboard then Online Store > Themes > Customize.

Navigate to the product page using the dropdown at the top, and click "Add block" on the left. 

Choose "UploadKit fields (beta)", then drag it to where you want it, then click Save.

Use the handle on the right to drag the field to where you want it.

... and don't forget to click 'Save'!

As every theme is different, please check that everything is working correctly and the files are being added to the cart after making changes.

If you run into any problems, give us a shout and our support team will be very happy to help.

Still need help? Contact Us Contact Us