# Installation Help

Before Uploadery starts working on your store, you will need to install the app block onto your current theme.

Watch the video below or follow along with the step-by-step instructions in this guide to install Uploadery.

Here is the install code snippet mentioned in the video:

```
<div id="uploadery-container"></div>

```

***

1\. Starting from your Shopify dashboard, click on **Online Store**, and then click on **Themes**.

2\. Click the **Actions** button, then select **Edit code.**

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5f99dd1c52faff0016af4afb/file-TofTp1Y4e0.png)

3\. Use the search bar located in the top left of the code editor to search for your **product.liquid** file.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5dd719d82c7d3a7e9ae44696/file-crMOqPLlBG.png)

4\. Click into your **product.liquid** file.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5dd82d112c7d3a7e9ae450e5/file-WMEN04ARd7.png)5. Do a search using the keyboard shortcuts (ctrl F or ⌘ F) for the following line of code.

```
{% form 'product'

```

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5f2acc672c7d3a31c76a832c/file-0ARmn60h8w.png)

6\. If you found a match, [click here to skip to step 10](#step-10).

If no results show up, search for the **product-template.liquid** file and click on it.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5dd71c672c7d3a7e9ae446b9/file-fq1EUGkTdb.png)

7\. Do a search again for `{% form 'product'` using the keyboard shortcuts (ctrl F or ⌘ F).

8\. If you found a match, [click here to skip to step 10](#step-10).

If no results show up, search for the **product-form.liquid** file and click on it.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5dd810fa2c7d3a7e9ae44f42/file-G31z9B8d9u.png)

9\. Do a search again for `{% form 'product'` using the keyboard shortcuts (ctrl F or ⌘ F).

10\. Once you find that line of code, please locate the following `{% endform %}` tag a few code blocks below.

This designates the section where the install code snippet (available in the next step) should be placed within. For example, in the image below, the section is located between lines 135 and 183.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5ac808fc2c7d3a0e93671964/file-8Mh84cTa3P.jpg)

11\. Start by copying the Uploadery install code snippet below.

```
<div id="uploadery-container"></div><br>

```

12\. Within this section of code, look for the word **quantity***.* Paste the install code snippet above that, as seen below.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5acc0c3e0428630750923bfb/file-Lt5cA4hCtV.jpg)

Not seeing a quantity section? Look for **add to cart** text and paste the install code snippet above that section, as seen below.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5acc0c4e0428630750923bfc/file-EmqPT4UsJx.jpg)

13\. Save your changes.

14\. You can now start creating upload fields for your products. Follow the instructions in [this article](https://shoppad.gitbook.io/uploadery/readme/create-and-display-upload-fields) to get started.

***

### What's next?

Add a snippet of code so upload fields can display quicker on your product page: [Decrease Uploadery's load time](https://shoppad.gitbook.io/uploadery/troubleshooting/decrease-uploaderys-load-time).

### Need to adjust the upload link on the cart page?

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222abd2c1e53608cf9e5526/file-ezHT0TCTBF.png)

Shorten the link shown on the cart page by adjusting the upload link: [Display file upload details in the cart page](https://github.com/shoppad/docs-uploadery/blob/master/customize-the-app/display-file-upload-details-in-the-cart-page.md).

### Want to customize the look of your upload fields?

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222ac30af6f8700f6dac05a/file-IRuz7wglkb.png)

**Here are some great resources to get you started:**

* [Style your upload fields](https://shoppad.gitbook.io/uploadery/customize-the-app/style-file-upload-fields)
* [Add an image preview to the product page](https://shoppad.gitbook.io/uploadery/customize-the-app/add-an-image-preview-to-the-product-page)

***

### Installing Uploadery on a 2.0 theme

Follow the step-by-step instructions below on how to install Uploadery for your 2.0 theme. This is a [list of available Shopify 2.0 themes](https://https/themes.shopify.com/collections/os2-themes).

If your theme is not a 2.0 theme, you can click on the the blue collapsable accordion at the top of this help document called: [**Not using a Shopify 2.0 theme? Click here to learn more on how to install Uploadery**!](#shopify-1)

1\. Starting from your Shopify dashboard, click on **Online Store**, and then click on **Themes**.

2\. Click the **Customize** button on the theme.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/62229e00c1688a6d26a7223f/file-JCT2oqsgxu.png)

3\. Select **Products** from the dropdown menu in the header and then select a product template. **Default product** is the standard template for a theme.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/62229e75ab585b230a89d7ad/file-4LR2moJANK.png)

4\. Locate a section for products in the left-hand toolbar. Then, click **+ Add block** and select the **Uploadery Fields** block. If the block does not appear, then you are not using a 2.0 theme. Please refer to the instructions for non 2.0 themes above in a blue collapsable accordion.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222a5222ce7ed0fb0912409/file-1U9kPbExRo.png)

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/615787fa0754e74465f15d63/file-oMfyZD8p29.png)

5\. Move the **Uploadery Fields** block above the **Quantity** **selector** block, or the **Buy buttons** block.

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222a931c1e53608cf9e5520/file-eCM6pTaLuK.png)

6\. **Save** your changes.

7\. You can now start creating upload fields for your products. Follow the instructions in [this article](https://shoppad.gitbook.io/uploadery/readme/create-and-display-upload-fields) to get started.

***

### What's next?

Add a snippet of code so upload fields can display quicker on your product page: [Decrease Uploadery's load time](https://shoppad.gitbook.io/uploadery/troubleshooting/decrease-uploaderys-load-time).

### Need to adjust the upload link on the cart page?

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222abd2c1e53608cf9e5526/file-ezHT0TCTBF.png)

Shorten the link shown on the cart page by adjusting the upload link: [Display file upload details in the cart page](https://github.com/shoppad/docs-uploadery/blob/master/customize-the-app/display-file-upload-details-in-the-cart-page.md).

### Want to customize the look of your upload fields?

![](https://https/d33v4339jhl8k0.cloudfront.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6222ac30af6f8700f6dac05a/file-IRuz7wglkb.png)

**Here are some great resources to get you started:**

* [Style your upload fields](https://shoppad.gitbook.io/uploadery/customize-the-app/style-file-upload-fields)
* [Add an image preview to the product page](https://shoppad.gitbook.io/uploadery/customize-the-app/add-an-image-preview-to-the-product-page)
