Add multilingual (locale) support in the DC Pre-order theme extension

This guide walks you through how to add support for multiple languages to your DC Preorder theme extension on Shopify. While the current version of the extension allows for locale changes, it supports only one language at a time. To accommodate a diverse user base or if you're utilizing Shopify Markets, you may want to add support for multiple languages in your store.

Prerequisites

1. You should have the necessary permissions to modify the theme files in your Shopify store. If not, consult with your system administrator or the person who manages your Shopify permissions.
2. Ensure you have the required translation app set up for the desired locales.

Step 1: Create the JavaScript Locale Variable

Begin by creating the following JavaScript variable on the page. This variable holds the various locale-specific phrases used in the DC Preorder theme extension.

<script type="text/javascript">
  window.DashPreordersLocales =  {
    buttonText: 'Preorder',
    buttonTextNow: 'Pre-order now',
    buttonTextEnded: 'Pre-order ended',
    buttonTextBuyWith: 'Pre-order with',
    shippingPolicyText: 'Expected to ship by {ship_date}',
    shippingDateFormat: '%B %e, %Y',
    shippingPolicyColour: '#333333',
    lineItemPropProductTypeKey: 'Product type',
    lineItemPropProductTypeValue: 'Preorder',
    lineItemPropShipByText: 'Ships by'
  };
</script>

Remember to replace the text within quotes with the correct locale values from your translation app or Shopify. Use the Liquid syntax ({{ }} ) to insert the correct locale values. You may need to reach out to your translation app provider to help with the locale setup if you haven't done so already.

Step 2: Insert the JS Variable into the Theme Code

Next, navigate to the Shopify admin interface and click on Sales Channel > Online Store > Themes.

From here, you have two options:

• Option 1: Click Edit code and insert the modified JavaScript variable from Step 1 into either the product.liquid or theme.liquid template.
• Option 2: If you are using Shopify Online Store 2.0, you can click Customize , select the Product template from the dropdown menu at the top-middle of the page, and then add a Custom Liquid block. Within this block, add the JavaScript window object shown in Step 1, complete with Liquid variables.

Final Steps

After adding the JavaScript variable, your DC Preorder theme extension should now support multiple languages based on your locale settings.

Need Further Assistance?

If you encounter any issues or need additional help with this process, please don't hesitate to ask for assistance. Remember, it's important to correctly setup your translation app and locale values to ensure a smooth user experience.