---
title: 'Administration: Working with Translations | Shopware Community Hub'
description: >-
Learn how administration translations are provided through snippet JSON files,
resolved with $t() , and organized for global overrides and module-specific…
canonical_url: 'https://hub.shopware.com/learn/unit/administration-working-with-translations'
---
# Administration: Working with Translations
- Understand how administration translations are provided through snippet JSON files and resolved with `$t()`.
- Learn why administration snippets for extension development are managed in code, not through the Administration UI.
- Learn how to override existing administration snippets by mirroring the original snippet key structure.
- Learn how to add custom module snippets and use them in administration templates with `$t()`.
- Distinguish administration snippets from storefront snippets and their different translation systems.
# Administration: Working with Translations
Translations play a central role in the Shopware administration. Every label, button, headline, and description is resolved through the snippet system, which allows the interface to adapt to different languages without changing the underlying code.
Understanding this system is essential for building fully localized and professional administration extensions.
In administration development, "translations" are implemented through snippet JSON files. These files are loaded into the administration build and resolved through Vue I18n with the `$t()` function.
Storefront snippets can be managed in the Administration UI. Administration snippets for extension development work differently: You create them in code as JSON files. They are translated with `$t()`, but you cannot manage these administration snippets through the Administration UI.
## How Administration Snippets Differ From Storefront Snippets
You already know the basic snippet idea from the storefront: A snippet key points to a translated text value, and the active language decides which value is shown.
The administration uses the same general idea, but a different runtime. Administration snippets are loaded into the administration build and resolved in the browser through Vue I18n.
That means the structure can feel familiar, but the way you use the snippets is different:
- Storefront templates use server-side translation mechanisms such as the `trans` filter.
- Administration components use the `$t()` function in Twig.js templates, Vue bindings, and JavaScript logic.
- Storefront snippets can be managed through the Administration UI.
- Administration snippets for extension development are managed in code.
During the administration build process, Shopware automatically loads and merges all snippet files. This allows you to:
- Include your own snippets without having to modify the core files
- Extend existing `domains` to extend core translations
- Override core translations when necessary
In the administration, all translations are always resolved using the `$t` function – regardless of whether you are writing Vue templates, Twig blocks inside the administration, or JavaScript files.
**Example: Twig**
```twig
{{ $t('global.sw-data-grid.labelSelectionCount') }}
```
**Example: Using Vue in Twig/HTML**
```vue
```
**Example: Plain JavaScript**
```js
computed: {
placeholder() {
return this.$attrs.placeholder || this.$t('global.sw-simple-search-field.defaultPlaceholder');
}
}
```
This unified approach ensures consistent translation behavior across all admin components – regardless of whether you are writing Vue template, Twig blocks, or plain JavaScript logic.
If you ever wondered, "Do all administration translations use the same mechanism, even when the templating languages differ?" The answer is: **Yes, always via the `$t` function**.
## Override Core-Administration Snippets
In some cases, you do not want to change how a component behaves, but only need to override its text. For example, you might want to adjust the label of a button or rephrase a headline in the administration.
You can do this by overriding the core snippet in your plugin. This is the common way to override administration snippets from the core.
Snippets typically placed under `src/Resources/app/administration/src/snippet` apply globally to the entire administration. Now you want to override the "generalTab" of the product detail page.
How to do that? To have more control over the snippet files, create an **overrides** folder (`src/Resources/app/administration/src/snippet/overrides`) and create a new file for each locale you want to override.
```text
└── [shop_root]
└── custom
└── plugins
└── [your_plugin]
└── src
└── Resources
└── app
└── administration
└── src
├── snippet
│ │── overrides
│ │ └── de-DE.json
│ │ └── en-GB.json
│ ├── de-DE.json
│ └── en-GB.json
└── main.js
```
Inside your override files, add the snippet key tree as it is in the core snippet file. Then, add the new translation, in our case:
```json
{
"sw-product": {
"detail": {
"tabGeneral": "General Information"
}
}
}
```
Remember to have the same structure of the origin file; otherwise the override will not work.
In the last step, rebuild the administration so the changes become visible.
```bash
bin/build-administration.sh
```
**Before**
**After**
Pretty cool, right? Now, you know how to override snippets from the core-administration in a clean, maintainable, and extendable way!
Remember that every snippet file under `src/Resources/app/administration/src` will automatically be loaded recursively, as long as their filenames contain a valid locale.
In our case, we added the `overrides` folder to the `snippet` folder to have a clear structuration and ensure maintainability, extensibility, and readability.
Now, let's take a look at how you can add your **own custom snippets**.
## Create Custom Snippets
From the last learning, you have learned that every module has its own snippet folder. So, if you want to add custom snippets to a module, you have to create a new folder in the module's snippet folder.
To demonstrate this, let's take the example from the last learning unit. The folder structure was like this:
```text
└── [shop_root]
└── custom
└── plugins
└── [your_plugin]
└── src
└── Resources
└── app
└── administration
└── src
├── module
│ └── sw-product
│ └── view
│ └── sw-product-detail-base-override
│ └── index.js
│ └── sw-dashboard-index.html.twig
└── main.js
```
Based on this setup, let's check whether you can answer the following question correctly:
What you need to do to add snippets in your module?Create a folder `snippet` under `[your_plugin/src/Resources/app/administration/src/module/sw-product` and create within this folder the snippet files.Create a folder `snippet` under `[your_plugin/src/Resources/app/administration/src` and create within this folder the snippet files.
Hope you remembered correctly. Now, let's create the snippet files.
```text
└── [shop_root]
└── custom
└── plugins
└── [your_plugin]
└── src
└── Resources
└── app
└── administration
└── src
├── module
│ └── sw-product
│ │── snippets
│ │ └── de-DE.json
│ │ └── en-GB.json
│ └── view
│ └── sw-product-detail-base-override
│ └── index.js
│ └── sw-dashboard-index.html.twig
└── main.js
```
And add the text content of the .html.twig file as snippets:
```json
{
"customGeneral": {
"greeting": "Hello, I'm an override!"
}
}
```
And lastly replace your text content of your `sw-dashboard-index.html.twig` file by calling your snippet with the `$t` function:
```vue
{% block sw_product_detail_base %}
{{ $t('customGeneral.greeting') }}
{% endblock %}
```
Now, you have successfully added your custom snippets to your module. Now rebuild the administration and you should see the changes.
If you don't see the changes, check the following:
- Your plugin is installed and activated
- Your custom module is imported in the `main.js` file
- You cleaned the cache (`bin/console cache:clear` and deleted the `dev_` files in your `[shop_root]/var/cache` folder)
### Storefront-Specific Snippets vs. Administration-Specific Snippets
Now you have a good overview of snippets in the administration. To have a clear overview of the snippets in Shopware, let's have a look what Shopware provides overall:
Shopware uses two completely separate snippet systems:
| Area | Snippet System | Format | Resolved via | Editable via the UI in the Administration |
|----------------|--------------------------------------------------------------------------------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------|
| Administration | Vue i18n (client-side) | JSON | `$t()` across the administration (Twig/HTML, JS, Vue) | No |
| Storefront | [Symfony-Translator](https://symfony.com/doc/current/translation.html) (server-side) | JSON | PHP: [Symfony Translation component](https://symfony.com/doc/current/translation.html). Twig: uses the [trans](https://symfony.com/doc/current/reference/twig_reference.html#trans) filter provided via `symfony/twig-bridge` | Yes (Settings -> Localisation -> Snippets) |
## Summary
Great! You learned how the administration handles translations through snippet JSON files and resolves them with `$t()`.
You also learned how to override existing administration snippets, how to add custom module snippets, and why administration snippets for extension development are managed in code instead of through the Administration UI.
With this knowledge, you can now:
- Build fully localized custom modules.
- Override core-administration texts by mirroring the original snippet key structure.
- Organize snippet files per module and globally.
- Distinguish administration snippets from storefront snippets and their different translation systems.
In the next learning unit, we will go through a practical lab.