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

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.

Example

After adding the JavaScript variable, your DC Preorder theme extension should now support multiple languages based on your locale settings. Here are a few example on how to implement this on OS 1.0 and 2.0 in Shopify theme.

How to Implement Language-Specific Preorder locales in Shopify Themes

For Online Store 2.0:

If your theme is compatible with Online Store 2.0, you can use a custom Liquid block to add the JavaScript code. Here is the step-by-step guide:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Customize.
3. Navigate to the page type you want to edit (e.g., Product pages).
4. In the left-hand side, click on Add block and then select Custom Liquid from the list of available blocks.
5. In the Custom Liquid block that you added, paste the following code:

{% if shop.locale == 'fr' %}
  <script type="text/javascript">
    window.DashPreordersLocales = {
      buttonText: "Pré-commander",
      buttonTextBuyWith: "Pré-commander avec",
      buttonTextEnded: "Pré-commande terminée",
      buttonTextNow: "Pré-commander maintenant",
      lineItemPropProductTypeKey: "Type de produit",
      lineItemPropProductTypeValue: "Pré-commande",
      lineItemPropShipByText: "Expédie par",
      shippingDateFormat: "%B %e, %Y",
      shippingPolicyText: "Délai d'expédition prévu {{ship_date}}",
      shippingPolicyColour: "#333333",
    };
  </script>
{% else %}
  <script type="text/javascript">
    window.DashPreordersLocales = {
      buttonText: "Pre-order",
      buttonTextBuyWith: "Pre-order with",
      buttonTextEnded: "Pre-order ended",
      buttonTextNow: "Pre-order now",
      lineItemPropProductTypeKey: "Product type",
      lineItemPropProductTypeValue: "Preorder",
      lineItemPropShipByText: "Ships by",
      shippingDateFormat: "%B %e, %Y",
      shippingPolicyText: "Expected shipping time {{ship_date}}",
      shippingPolicyColour: "#333333",
    };
  </script>
{% endif %}

6. Click Save.

For Online Store 1.0 or if Custom Liquid Block is Unavailable:

If your theme is not compatible with Online Store 2.0 or if the custom Liquid block is not available, you can add the JavaScript code to the product.liquid file. Here is the step-by-step guide:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the left-hand side, open the product.liquid file from the Templates directory.
4. Paste the following code at the bottom of the file:

{% if shop.locale == 'fr' %}
  <script type="text/javascript">
    window.DashPreordersLocales = {
      buttonText: "Pré-commander",
      buttonTextBuyWith: "Pré-commander avec",
      buttonTextEnded: "Pré-commande terminée",
      buttonTextNow: "Pré-commander maintenant",
      lineItemPropProductTypeKey: "Type de produit",
      lineItemPropProductTypeValue: "Pré-commande",
      lineItemPropShipByText: "Expédie par",
      shippingDateFormat: "%B %e, %Y",
      shippingPolicyText: "Délai d'expédition prévu {{ship_date}}",
      shippingPolicyColour: "#333333",
    };
  </script>
{% else %}
  <script type="text/javascript">
    window.DashPreordersLocales = {
      buttonText: "Pre-order",
      buttonTextBuyWith: "Pre-order with",
      buttonTextEnded: "Pre-order ended",
      buttonTextNow: "Pre-order now",
      lineItemPropProductTypeKey: "Product type",
      lineItemPropProductTypeValue: "Preorder",
      lineItemPropShipByText: "Ships by",
      shippingDateFormat: "%B %e, %Y",
      shippingPolicyText: "Expected shipping time {{ship_date}}",
      shippingPolicyColour: "#333333",
    };
  </script>
{% endif %}

5. Click Save.

Once you have completed these steps, the language-specific JavaScript code will be added to your Shopify store, and it will change based on the current language of the shop.

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.