> 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/translate-or-change-the-upload-fields-text.md).

# Translate or Change the Upload Field's Text

Wondering how you can translate or change your upload field's text, **No file chosen** or **Choose File**?

<figure><img src="/files/d54OUSWl091YZWroVFG6" alt=""><figcaption></figcaption></figure>

### Translate or Change the Upload Field’s Text

If you’d like to change or translate the text that appears on your upload button, you can customize this through your theme.

{% hint style="info" %}
**Helpful tip:**\
The upload button is a native browser element, and browsers automatically display that text based on the shopper’s browser language settings. Changing the browser language will change the wording.\
If you would like to replace that browser text with your own custom upload button, follow the steps below.
{% endhint %}

Uploadery does not have a built-in setting to directly change the default input text, but you can update it through your theme by following these steps:

### How to Customize the Upload Button Text

* From your Shopify admin, go to Online Store → Themes.
* Find the theme you want to edit, click Actions → Edit code.
* Open `product.liquid` in the Templates folder.\
  If your theme uses `product.json`, open `main-product.liquid` in the Sections folder instead.
* Add this script to the bottom of the file:

<figure><img src="/files/6xOaCqisYlUPnvvCNLls" alt=""><figcaption></figcaption></figure>

1. 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 instead has a `product.json` file, locate a file called `main-product.liquid` in the Sections folder.
4. Paste the following code snippet at the bottom of the file:

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

5. Locate your theme’s main CSS file by following the instructions in this article.
6. Paste the following CSS at the bottom of your stylesheet:

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

7. From Step 6, locate the last two blocks of CSS and update the text inside the quotes with your preferred wording:

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

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

{% hint style="info" %}
**Important note:** Adding accents, special characters, or superscripts directly into code can sometimes cause formatting issues in your theme if they are not added correctly. If you’d like help adding special characters, please let us know, and we’ll be happy to help.
{% endhint %}

8. Save your changes and preview your product page.