How to make product name localizable

howto
1

Overview

Developers ask us to find the easiest way to localize product name.

You can select multiple languages for the catalog. But if you open the product blade, you see one value for the product name. It’s the System Product Name. You can make product name localizable by adding a new property DisplayName and use this property in StoreFront.

image
image508×546 24.9 KB

Step 1. Create Display Name property

  1. Open Catalog Settings
  2. Add a new Product Property: Display Name
  3. Save property

image
image398×683 21.6 KB

Step 2. Populate Display Name property

Use Import or Manually Enter the value to populate Display Name property for the products.

image
image393×695 23.8 KB

Step 3. Change the liquid template

Change the liquid template to display localized value from Display Name property.

{{ product.properties['DisplayName'] }}

PS

You can add additional logic to check if Display Name value is empty, then display System Name.

2

You shouldn’t be using arrays in liquid view so instead of

{{ product.properties['DisplayName'] }}

use

{{ product.properties.DisplayName }}

1 Like