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.

4. Navigate to the product.liquid file within the Templates section.

5. Paste the following code snippet at the bottom of the product.liquid file.

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

6. Locate your theme's Main CSS file by following the instructions in the this article.

7. Paste the following code snippet at the bottom of your CSS file.

#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!";
}

8. Save and test your changes :)

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 your theme. 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 file that you inserted earlier (see step 5), 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. Locate your theme's Main CSS file by following the instructions in the this article.

3. Paste the following code snippet at the bottom of your CSS file.

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

Still need help? Contact Us Contact Us