# Add an image preview to the product page

Adding an image preview to the product page is a great way for customers to ensure they've uploaded the correct file. Follow the steps below to get started.

**Note**: This will only work with rasterized files (.png, .jpg, .jpeg, and .gif).

<figure><img src="https://1830227525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FttS2ys9nVT4SeVSaGa3f%2Fuploads%2FfHFZxLVjIFci3BEjuSiI%2FUploadery_ImagePreviewFile_Prod_AS.png?alt=media&#x26;token=ee2823bc-dac4-4284-be65-dc9bfd18a94d" alt=""><figcaption></figcaption></figure>

### Getting Started...

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

2\. Find the theme you want to edit, click the **Actions** button, then click **Edit code.**

<figure><img src="https://1830227525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FttS2ys9nVT4SeVSaGa3f%2Fuploads%2Fgit-blob-91efb6bb94fc2bceb0dd70af247e738428154ccc%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

3\. In the **Templates** folder, open the **product.liquid** file. If your theme does not have a product.liquid file and if you see a product.json file, locate a file called **main-product.liquid** file in the **Sections** folder.&#x20;

4\. Paste the following code snippet at the bottom of that file.

```html
<script>
$(function() {
  $(document).on('previewSuccess', 'form[data-uploadery]', function(e) {
    if (e.originalEvent.detail.preview === '') {
      return;
    }
    var $title = $('<p></p>').html('Preview:');
    var $img = $('<img/>').attr('src', e.originalEvent.detail.preview);
    var $uploaderyResponse = $('<div></div>').attr('class', 'uploaderyResponse').html([$title, $img]);
    $(e.target).next('.uploaderyResponse').remove();
    $(e.target).after($uploaderyResponse);
  });
});
</script>
```

5\. After the code is placed in the theme editor, navigate to the Uploadery dashboard, within the **Settings** section.  Locate the **Custom CSS** field.

<figure><img src="https://1830227525-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FttS2ys9nVT4SeVSaGa3f%2Fuploads%2Fgit-blob-ed69e72e2bc9c2fa624c80b190d9f8de093b928d%2FUploadery_ImagePreviewProd_AS.png?alt=media" alt=""><figcaption></figcaption></figure>

6\. Paste the following code snippet in the field.

```css
.uploaderyResponse {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  padding: 10px;
  background: #F5F5F5;
  box-sizing: border-box;
  border: 1px solid #ececec;
  margin-bottom: 10px;
  margin-top: 10px;
}

.uploaderyResponse p {
  width: 100%;
}
```

7\. **Save** your changes.

{% hint style="info" %}
**Note:** If you need any help getting this set up, feel free to contact our support team. Certain themes may require a bit of additional code.  We'd be happy to help out!
{% endhint %}