> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Lab - Language File

Plan: Stencil Developer

Lesson 11 of 18 · 30 min

**In this lab, you will:**

* Edit an existing translation key in en.json
* Create a new translation key in en.json
* Create a new lang file
* Test new lang file

**Prerequisites**

* Previous labs have been completed
* Store profile is set to display the language based on the user's browser setting

## Step 1: Edit an Existing Translation Key in en.json

1. **Navigate** to *lang > en.json*
2. **Change** the "footer" text string for "navigate" from "Navigate" to "Site Nav"

![Editing a translation key in en.json](/_fern-img/3c2485d06a73e2ec10be22f08540277c995c56396bbe375550306e917fa9d9b2.webp)

3. **Observe** change in footer on storefront

![Footer showing updated navigation text](/_fern-files/bigcommerce.docs.buildwithfern.com/d453b3bb56893279b1e7afaab2402a0ba4d6633a4adc0a4e063091a3b593eeb6/assets/learn/stencil-core/Screenshot-2023-03-24-at-2.26.30-PM.png)

## Step 2: Create a New Translation Key in en.json

1. **Navigate** to *lang > en.json*
2. **Add** another key value pair under header:

```text showLineNumbers={false}
"new_hours": "Summer hours: {hours}"
```

![Adding a new translation key in en.json](file:assets/learn/stencil-core/screen-shot-2022-03-23-at-5-42-12-pm-\(1\).jpg)

3. **Edit** the /templates/components/common/header.html
4. **Add** the following code after the \{\{/if}} tag and before the `<header>` tag:

```text showLineNumbers={false}
{{> components/common/alert/alert-success (lang 'header.new_hours' hours="8 AM to 5 PM Central" )}}
```

![Adding the new hours component to the header template](/_fern-img/7f9894cbf756faa198592e65a0d3aa628238efe731ec98365c301574d49b5a63.webp)

5. **Observe** the new component at the top of your site:

![New summer hours banner displayed on the storefront](file:assets/learn/stencil-core/screen-shot-2022-03-23-at-5-49-16-pm-\(1\).png)

## Step 3: Create a New Language File

1. **Right-click** the lang folder
2. **Select** New > File
3. **Name** the new file da-DK.json
4. **Copy** the Danish translated footer values below and paste into the da-DK.json file

```json showLineNumbers={false}
{
    "footer": {
        "brands": "maerker",
        "navigate": "navigere",
        "info": "info",
        "categories": "Kategorier",
        "call_us": "Ring til os {phone_number}"
    }
}
```

## Step 4: Test New Language File

1. Using the Chrome browser, **Navigate** to *Settings > Advanced > Language*
2. **Add** a new language Danish - dansk
3. **Move** to the top of the priority list

![Chrome language settings with Danish added](/_fern-files/bigcommerce.docs.buildwithfern.com/a7206e3c745059f55c08ae036c5e10f30c2d221971c5ca3509710138594cdfc4/assets/learn/stencil-core/CSlangoptions.png)

4. **Observe** translated footer:

![Storefront footer displaying Danish translations](/_fern-files/bigcommerce.docs.buildwithfern.com/3ad700b8c28110d531621c5ca43d2087ab17b509da73821607c38e1d0f01be1c/assets/learn/stencil-core/CSdafrontend.png)