How do I show Supertime in multiple or additional languages for my store?

Supertime can add support additional languages by adding custom theme integration code. Simple placeholder text not provided below is automatically translated into the store's translation or locale.

Note: this is an advanced tutorial below.

Here is the format for the code snippet that Supertime expects for replacing text labels retrieved from your settings. When present, any of the fields provided will replace what comes from your Supertime settings.

// the following fields correspond to what is seen in the Text Labels area in your Supertime settings:
//
// instructionText - Appears above Supertime options on cart page:
// zipcodeText - Appears next to postal code/zip code input box if enabled:
// zipcodePlaceholderText - Appears as placeholder for postal code/zip code input box:
// deliveryMethodText - Appears next to delivery method box
// datePickerText - Appears next to date input box:
// timeslotText - Appears next to time slot box:
// datePickerRequiredText - Appears beneath date input box if field is required:
//
// anything declared below will replace text from your Supertime settings - here is an example with our default text labels:

<script> SupertimeTextLabels = { 
      instructionText: "Please select a date.",
      zipcodeText: "Postal Code:",
      zipcodePlaceholderText: "For example: 90210",
      deliveryMethodText: "Delivery Method:",
      datePickerText: "Select date:",
      timeslotText: "Select time:",
      datePickerRequiredText: "Make a selection to continue checkout."
    };
</script>

We have provided an example use case below where you can conditionally support additional languages based on store locale. This is an advanced tutorial where you may need help from a Shopify Partner that specializes in custom theme development.

Example: Replace Supertime text with text that I provide when the store is in French

1. Copy this Snippet below: this will replace text labels from your Supertime settings with text that you provide when the store locale is in French. 

<script> 
  if (Shopify.locale === "fr") { // declare this text based on the current store locale
    SupertimeTextLabels = { 
      instructionText: "Veuillez sélectionner une date.",
      zipcodeText: "code postal:",
      zipcodePlaceholderText: "par exemple: 12345",
      deliveryMethodText: "méthode de livraison:",
      datePickerText: "choisir une date:",
      timeslotText: "choisir l'heure:",
      datePickerRequiredText: "Faites une sélection pour continuer le paiement."
    };
  }
</script>

2. Locate the appropriate liquid file (e.g. theme.liquid, the cart-template.liquid file in Debut or the main-cart-footer.liquid file in Dawn or 2.0 Free themes) and edit the theme code in this file.

3. Paste the snippet above at the top of the desired liquid file.

Example: Replace Supertime text with text that I provide when the store is in Spanish

1. Copy this Snippet below: this will replace text labels from your Supertime settings with text that you provide when the store locale is in French. 

<script> 
  if (Shopify.locale === "es") { // declare this text based on the current store locale
    SupertimeTextLabels = { 
      instructionText: "Seleccione una fecha.",
      zipcodeText: "Código postal:",
      zipcodePlaceholderText: "por ejemplo: 12345",
      deliveryMethodText: "Método de entrega:",
      datePickerText: "seleccione una fecha:",
      timeslotText: "elegir hora:",
      datePickerRequiredText: "Haga una selección para continuar con el pago."
    };
  }
</script>

2. Locate the appropriate liquid file (e.g. theme.liquid,the cart-template.liquid file in Debut or the main-cart-footer.liquid file in Dawn or 2.0 Free themes) and edit the theme code in this file.

3. Paste the snippet above at the top of the desired liquid file.

Example: Replace Supertime text with text that I provide when the store is in French or German

1. Copy this Snippet below: this will replace text labels from your Supertime settings with text that you provide when the store locale is French or German. 

<script> 
  if (Shopify.locale === "fr") { // declare this text based on the current store locale
    SupertimeTextLabels = { 
      instructionText: "Veuillez sélectionner une date.",
      zipcodeText: "code postal:",
      zipcodePlaceholderText: "par exemple: 12345",
      deliveryMethodText: "méthode de livraison:",
      datePickerText: "choisir une date:",
      timeslotText: "choisir l'heure:",
      datePickerRequiredText: "Faites une sélection pour continuer le paiement."
    };
  } else if (Shopify.locale === "de") { // declare this text based on the current store locale
    SupertimeTextLabels = { 
      instructionText: "Bitte wählen Sie ein Datum.",
      zipcodeText: "Postleitzahl:",
      zipcodePlaceholderText: "zum Beispiel: 12345",
      deliveryMethodText: "Versandart:",
      datePickerText: "Datum auswählen:",
      timeslotText: "Zeit auswählen:",
      datePickerRequiredText: "Treffen Sie eine Auswahl, um die Zahlung fortzusetzen."
    };
  }
</script>

2. Locate the appropriate liquid file (e.g. theme.liquid, the cart-template.liquid file in Debut or the main-cart-footer.liquid file in Dawn or 2.0 Free themes) and edit the theme code in this file.

3. Paste the snippet above at the top of the desired liquid file.