<aside class="note"> <h4>Functions availability</h4> <ul> <li>Users that have <a href="/docs/storefronts/themes/architecture/layouts/checkout-liquid"><code>checkout.liquid</code></a> customizations need to <a href="https://help.shopify.com/manual/checkout-settings/checkout-extensibility/checkout-upgrade">upgrade to Checkout Extensibility</a> to use Function APIs.</li> <li>Stores on any plan can use public apps that are distributed through the Shopify App Store and contain functions. Only stores on a <a href="https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan">Shopify Plus plan</a> can use <a href="https://help.shopify.com/manual/apps/app-types/custom-apps">custom apps</a> that contain <a href="/docs/api/functions">Shopify Function APIs</a>.</li> <li>Some Shopify Functions capabilities are available only to stores on a <a href="https://help.shopify.com/manual/intro-to-shopify/pricing-plans/plans-features/shopify-plus-plan">Shopify Plus plan</a>. See <a href="/docs/api/functions#availability-of-shopify-functions">Shopify Function APIs</a> for details.</li> </ul> </aside> This guide describes specific localization practices that you can use when creating Shopify Functions. ## Localizing title and description The function `name` and `description` properties in the `shopify.extension.toml` display to merchants in the Shopify admin. To create the best experience for merchants, it's important to localize the values of `name` and `description`. Use the following process to provide translations for the `name` and `description` properties: 1. In `shopify.extension.toml`, replace the values for `name` and `description` with values prefixed with `t:`. The prefix indicates the translation key that Shopify uses when displaying the properties. The following example shows how define the properties: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="shopify.extension.toml"></script> <script type="text/plain" data-language="toml"> name = "t:name" description = "t:description" </script> </div> </p> 1. Create a `locales` folder within your function extension to contain translation resources. 1. Create a JSON file for the default language and translations for these fields. The name of the file should follow the format `<language-iso>.default.json`. Shopify uses these translations for the language in the file name, and for any languages which you don't provide. The keys in the JSON document should match the translation keys used in your `shopify.extension.toml`. The following example shows how to set up a JSON file: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="en.default.json"></script> <script type="text/plain" data-language="json"> { "name": "The English function name", "description": "The English function description" } </script> </div> </p> 1. Create JSON translation resources for additional languages. The name of these files should follow the format `<language-iso>.json`. Shopify uses these translations for the language in the file name. The keys in the JSON document should match the translation keys used in your `shopify.extension.toml`. The following example shows how to create JSON translation resources in French: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="fr.json"></script> <script type="text/plain" data-language="json"> { "name": "Le nom de la fonction en français", "description": "La description de la fonction en français" } </script> </div> </p> ## Providing translated content Shopify provides the current locale to function [input queries](/docs/apps/build/functions/input-output#input) as part of the `Localization` object. For example, the Order Discount API returns [`Localization`](/docs/api/functions/reference/order-discounts/graphql/common-objects/localization) from the `localization` field on its [Input root](/docs/api/functions/reference/order-discounts/graphql/input). Your function should use this locale to provide translated content in [function output](/docs/apps/build/functions/input-output#output) for any messages that display to customers. Shopify recommends using language-native libraries to embed translated content in your function WebAssembly module. ## Converting money values When selling to multiple markets, you need to be aware of the currency displayed to the customer at checkout. Function input queries provide monetary values in the customer's displayed currency. Likewise, monetary values output from functions must be in the customer's currency. You can use the function input's `presentment_currency_rate` property for the conversion rate between the store currency and the currency displayed to the customer. You must multiply any merchant-configured amounts by the `presentment_currency_rate` when comparing monetary values with the cart, or when outputting value discounts. For example, if your app allows merchants to configure a fixed amount for a discount function, then you can use a [numeric metafield](/docs/apps/build/custom-data/metafields/list-of-data-types) and populate the metafield with the value in the store currency. When your function executes, it must multiply the configured value by the `presentment_currency_rate` input to compare the configured subtotal to the customer's cart subtotal in the customer's display currency. The following example shows how to apply the `presentment_currency_rate` on a value discount: ```rust fn function(input: input::Input) -> Result<FunctionResult, Box<dyn std::error::Error>> { let config: input::Configuration = input.configuration(); let cart_lines = input.cart.lines; let rate = input.presentment_currency_rate.parse::<f64>()?; ... let value: api::Value = Value::FixedAmount(FixedAmount { amount: config.amount * rate, applies_to_each_item: Some(true), }); Ok(FunctionResult { discounts: vec![Discount { message: None, conditions: None, targets, value, }], discount_application_strategy: DiscountApplicationStrategy::First, }) } ```