Allowing users to upload files is a great way to maximize the customizability of your products. UploadKit provides this exact service, and works natively with the Replo Product Component.

To add UploadKit fields to a Replo page

1. First, make sure you have File Uploads by UploadKit installed on your Shopify Store, and make sure you have at least one upload field configured. You will also need a Replo Product Component in your Replo Element.

2. On the left side of the editor, click the "Components" toggle. Then, search for "Liquid".

3. Drag the Liquid component anywhere inside of the Product Component.

4. Click on the 'config' tab and click 'Launch Code Editor', then paste in the following code and hit 'save':

   <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>
   
   <script>
       window.addEventListener('load', () => {
          window.UploadKit.init()
       });
   </script>

5. After saving, go ahead and publish the page to make sure it works. You will not be able to see the upload fields in the editor, but they should appear on the live page just as they have been configured inside of the UploadKit app.

Troubleshooting

• Please note that the UploadKit form fields can be styled using the UploadKit app.

• It is normal for the UploadKit form fields to not appear inside of the Replo Editor, but if they do not appear on the published page be sure to check the following:
  

  • File Uploads by UploadKit is installed on your Shopify Store

  • The Liquid Component is inside of a Product Component

  • The Liquid Component has the exact code block that was included above in step 4.

  • UploadKit has been configured with at least 1 field that is compatible with the selected product in the Product Component.

  • If all else feels, reach out to the Replo Support Team.