NEXT-33716 - improve docs for snippet handling

docs/docs/guide/6_faq/index.md

@@ -11,4 +11,37 @@ The preferred solution is to use subdomains for each app. For example, you can u
 ## How can I use components that resemble the original components in the administration?
 While it is not possible to use the exact same components in the Shopware administration, there is a component library called Meteor Component Library that offers similar components. The Shopware administration components are not native Vue components because they have extension capabilities, Twig templates, and other features that cannot be directly used. However, by utilizing the Meteor Component Library, you can achieve a native look and feel for your app that seamlessly integrates with the original Shopware administration.
 
-To access the Meteor Component Library, visit the following link: https://github.com/shopware/meteor-component-library
+To access the Meteor Component Library, visit the following link: https://github.com/shopware/meteor-component-library
+
+## How can I use snippets to translate my app?
+
+You can manage all texts rendered within your [locations](../4_concepts/locations.md) with a translation plugin of your choice. If you're utilizing Vue.js as your frontend framework, you can use the i18n plugin. Additionally, to ensure consistency between your app and the Shopware Administration, you can synchronize language changes by [subscribing to them through the context API](../2_api-reference/context.md#subscribe-on-language-changes).
+
+For text elements outside your locations, such as titles within [component sections](../4_concepts/component-sections.md), you can employ snippet files within your app. Here's a how to accomplish this:
+
+1. **Create Snippet Files:** Begin by generating a snippet file for each supported language within your app. These files should reside in the `Resources/app/administration/snippet` directory. Naming conventions follow the language code format, for instance, `en-GB.json` for English language support. The file structure mirrors that of administration snippets. However it is not impossible to overwrite Shopware Administration snippets.
+
+```json
+// <app root>/Resources/app/administration/snippet/en-GB.json
+{
+    "my-app-name": {
+        "example-card": {
+            "title": "My app",
+            "subtitle": "This is my app"
+        }
+    }
+}
+```
+
+2. **Integrate Snippets:** Utilize these snippets within your app by referencing their paths directly in your code. For example:
+
+```js
+sw.ui.componentSection('sw-manufacturer-card-custom-fields__before').add({
+    component: 'card', 
+    props: {
+        title: 'my-app-name.example-card.title',
+        subtitle: 'my-app-name.example-card.subtitle',
+        locationId: 'my-app-card-before-properties'
+    }
+})
+```