How can I show the widget on a custom page?

Upload widgets can be added automatically to product, featured products, cart and contact pages. 

The widget can also be added to any page by manually creating a HTML element in your theme and providing a CSS selector in the Display settings section.

This can be done in the Shopify Admin theme editor, navigate to Online Store > Themes,  [More actions] > Edit Code. 

Add the following HTML element on your desired page.

{% comment %}
Upload-Lift widget element container
{% endcomment %}
<div class="upload-lift"></div>

You can choose any name in the class attribute of the element. 

Important: Always make sure that your custom HTML element is placed inside a HTML form, look for the liquid form tags {% form .. %} and {% endform %} and make sure the element is between these tags. 

Next, open the App and configure the Upload-Lift field to be shown when the HTML element is found on your custom page. In the Display settings section, select "Custom" and enter your class name in the selector field, prefix the name with a dot "." (this tells the widget to look for the class attribute) 

After you saved the field, the upload widget should show up on your custom page. 

The page must contain product data

This is the most common reason a custom page shows nothing at all: the container is found, but no upload field is created.

Your upload field's conditions target products. On a product page Shopify provides the product context automatically. On a regular page (/pages/... ) there is no product context, so the product conditions can never evaluate and no field is created.

Product JSON snippet

To ensure the app recognizes the product on your custom page, render the product data as a JSON script tag before the app loads:

<script type="application/json" id="ProductJson-product-x">
{
  "id": {{ product.id }},
  "handle": "{{ product.handle }}",
  "variants": {{ product.variants | json }},
  "vendor": "{{ product.vendor }}",
  "options": {{ product.options | json }},
  "tags": {{ product.tags | json }}
}
</script>

The images , featured_image  and media  attributes can be omitted.

If the products are chosen dynamically by your own JavaScript, build the same script tag at runtime. Fetching /products/{handle}.js  returns exactly the shape shown above, so the response can be inserted without any transformation.

Note: data-upload-lift="PRODUCT_ID"  on the container is only a marker used to match product data already present in the page. It does not by itself supply the product context.

Re-mounting when the product changes

If your page lets the customer switch products without a page reload, call setup again after you have updated the product data:

window.Cloudlift.upload.App.setup(true);

setup()  calls destroy()  first, so it is always safe to call again. Passing true  additionally resets the internal product cache which is required when products are removed from or replaced on the page.

Reading the uploaded values

The app writes hidden inputs into the surrounding <form action="/cart/add"> . If your page submits to /cart/add.js  itself, read those inputs with FormData and pass them through in the properties  object of your payload. This captures whatever property names the field is configured with, so it keeps working if you rename the field later.

Alternatively, listen for the upload:added  event and read event.detail , see: JavaScript Events.

Custom placement also applies to product pages

Setting a field's Upload location to Custom replaces automatic placement everywhere, including product pages. The native "Upload Lift Field" theme block will no longer render that field, and the uploader disappears from your live product pages until your product templates also contain the custom selector.

You have two options:

• Add the container element to your product templates as well, so product pages and your custom page both work.
• Create a second, separate upload field configured with the custom selector, and leave the original field on Automatic placement for product pages.

If you need further assistance, please send us a request and we will be happy to help you out.