Style file upload fields

Follow the steps below to style Uploadery's file upload field.

This will also allow you to change the text that appears within the input.

Getting Started...

1. Starting from your Shopify admin, click Online Store, then click Themes.

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

3. Navigate to the product.liquid file within the Templates folder. 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. 

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

<script>
Shoppad.$(function() {
  Shoppad.$(document).on('uploadSuccess', 'form[data-uploadery]', function(e) {
    $(e.target).addClass('upload-complete');
  });
});
</script>

5. Save your changes.

6. In your Apps, go to your Uploadery dashboard.

7. Click the Settings tab at the top of the dashboard.

8. Paste the following code snippet in the Custom CSS field.

#uploadery-container input[type=file] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

#uploadery-container input[type=file]:active {
  outline: none;
}

#uploadery-container label > div {
  width: 100%;
  height: 40px;
  cursor: pointer;
  border: 1px solid #ececec;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNjQgNjQiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDY0IDY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8Zz4NCgkJCTxwb2x5Z29uIHBvaW50cz0iMzQsNTAgMzAsNTAgMzAsNy40IDE3LjcsMTguNSAxNSwxNS41IDMyLDAuMiA0OSwxNS41IDQ2LjMsMTguNSAzNCw3LjQgCQkJIi8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxnPg0KCQkJPHBvbHlnb24gcG9pbnRzPSI2MSw2NCAzLDY0IDMsMjQgMjIsMjQgMjIsMjggNywyOCA3LDYwIDU3LDYwIDU3LDI4IDQyLDI4IDQyLDI0IDYxLDI0IAkJCSIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQoNCg==');
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: 2% center;
  text-align: center;
  line-height: 42px;
}

#uploadery-container .uploaderyProgressBar {
  display: block;
  float: none;
  width: 100% !important;
  height: 100%;
  max-width: none;
  clear: none;
}

#uploadery-container .uploadery-temporary {
  height: 100%;
}

#uploadery-container .uploaderyProgressBar span {
  border-radius: 0;
}

#uploadery-container .uploaderyIsUploading > div:after {
  content: '';
}

#uploadery-container label > div:after {
  content: "Upload File";
}

#uploadery-container .upload-complete label > div:after {
  content: "Upload Complete!";
}

9. Save and refresh the product page.

Updating the text within the input

It is possible to change the text that appears within the input by adjusting some of the CSS code that you added to the Settings tab of your Uploadery dashboard. Follow the steps below to do this.

1. Navigate to the place where the CSS code snippet was added.

2. Locate the following section of code.

#uploadery-container label > div:after {
  content: "Upload File";
}

#uploadery-container .upload-complete label > div:after {
  content: "Upload Complete ✓";
}

Replace the text within the quotes ("Upload File" and "Upload Complete!") with your desired messages.

Note: The first message will appear when the you initially view the input. The second message will appear after the file upload is complete.

Optional: show the file name when the upload completes

1. Locate the code in your product.liquid or main-product.liquid file that you inserted earlier (see step 4), replace it with the following code.

<script>
Shoppad.$(function() {
  Shoppad.$(document).on('uploadSuccess', 'form[data-uploadery]', function(e) {
    var uploaderyFileName = e.originalEvent.detail.file.match(/[^\/]+$/)[0];
    uploaderyFileName = uploaderyFileName.substr(uploaderyFileName.indexOf('-') + 1);
    var $uploaderyActiveField = $(e.target);
    $uploaderyActiveField.addClass('upload-complete');


    // Insert new / update existing
    if ($uploaderyActiveField.find('div')[0].childNodes[0].nodeType === 3) {
      $uploaderyActiveField.find('div')[0].childNodes[0].nodeValue = uploaderyFileName;
    } else {
      var uploaderyFileNameNode = document.createTextNode(uploaderyFileName);
      $(uploaderyFileNameNode).insertBefore($uploaderyActiveField.find('input'));
    }
  });
});
</script>

2. In your Uploadery dashboard, paste the following code snippet at the bottom of the Custom CSS field on the Settings tab.

#uploadery-container .upload-complete label > div:after {
  content: none;
}

3. Save your changes.

<script>
Shoppad.$(function() {
  Shoppad.$(document).on('uploadSuccess', 'form[data-uploadery]', function(e) {
    $(e.target).addClass('upload-complete');
  });
});
</script>