How can I show the widget on a different location on the product page?
IMPORTANT: if your theme supports the new shopify 2.0 block layout, you can also control the location using an app block as described here: Upload Field Block in Theme Editor
By default, the Upload-Lift widget is automatically added to your product pages just above the "Add to Cart" button.
The widget can be displayed on any custom location 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.
Search for "product" to show your themes product related code.
Common locations are:
- sections/product-template.liquid (most themes)
- templates/product.liquid
Find the product form element that is used to add your products to cart:
- {% form 'product', product %} .. {% endform %} (most themes)
- <form action="/cart/add" ..> ... </form> (older themes use this)
Place the following code inside your form at the specific location you want to show the upload field.
{% 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: In order for the upload link to be added to the cart make sure that the html element is placed inside the liquid form tags {% form .. %} and {% endform %}.
Next, open the App and configure the Upload-Lift field to be shown inside of the custom html element on your product 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)
Product targeting can still be used to control on which specific products the widget will be shown.
After you saved the field, the upload widget should show up in the custom location on your product page.
If you need further assistance, please send us a request and we will be happy to help you out.