> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/uploadery/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/uploadery/customize-the-app/add-an-image-preview-to-the-product-page.md).

# 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="/files/s9IJFYkY6fAX48lPY0jB" 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="/files/DoI82IM7b1VzfoMBFi80" 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="/files/WkUD3GA6YOErJnOLZZUj" 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 %}