> 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shoppad.gitbook.io/uploadery/customize-the-app/translate-or-change-the-upload-fields-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.