How can I translate new product templates in my theme?

Technical Q&A
1

So, in my theme I have 3 different product templates. They all came with the theme.

  • product
  • product.pre-order
  • product.quick-view

I’m trying to create a 4th:

  • product.trip

I have created a new template called product.trip.liquid

Now I’m having trouble figuring out how to translate certain parts of the new product template.

I found this section of code in theme.liquid file:

window.languages = {
collectionOnSaleLabel: {{ 'collection.product.discount_html' | t | json }},
productFormUnavailable: {{ 'product.form.unavailable' | t | json }},
productFormAddToCart: {% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t | json }}{% else %}{{ 'product.form.add_to_cart' | t | json }}{% endif %},
productFormSoldOut: {{ 'product.form.sold_out' | t | json }},
shippingEstimatorNoResults: {{ 'cart.shipping_estimator.no_results_title' | t | json }},
shippingEstimatorOneResult: {{ 'cart.shipping_estimator.one_result_title' | t | json }},
shippingEstimatorMultipleResults: {{ 'cart.shipping_estimator.multiple_results_title' | t | json }},
shippingEstimatorErrors: {{ 'cart.shipping_estimator.errors' | t | json }}
};

And these are the original translation in my current language file, under product, form

"add_to_cart": "Add to cart",
      "sold_out": "Sold out",
      "pre_order": "Pre-order",
      "unavailable": "Unavailable",
      "contact_us": "Contact us"

I added another if else to productFormSoldOut to pick up translations from a new line in the translation file:

window.languages = {
        collectionOnSaleLabel: {{ 'collection.product.discount_html' | t | json }},
        productFormUnavailable: {{ 'product.form.unavailable' | t | json }},
        productFormAddToCart: {% if product.template_suffix == 'pre-order' %}{{ 'product.form.pre_order' | t | json }}{% else %}{{ 'product.form.add_to_cart' | t | json }}{% endif %},
        productFormSoldOut: {% if product.template_suffix == 'trip' %}{{ 'product.form.fully_booked' | t | json }}{% else %}{{ 'product.form.sold_out' | t | json }}{% endif %},
        shippingEstimatorNoResults: {{ 'cart.shipping_estimator.no_results_title' | t | json }},
        shippingEstimatorOneResult: {{ 'cart.shipping_estimator.one_result_title' | t | json }},
        shippingEstimatorMultipleResults: {{ 'cart.shipping_estimator.multiple_results_title' | t | json }},
        shippingEstimatorErrors: {{ 'cart.shipping_estimator.errors' | t | json }}
      };

Updated translation file:

"add_to_cart": "Add to cart",
      "sold_out": "Sold out",
      "fully_booked": "Fully Booked",
      "pre_order": "Pre-order",
      "book_now": "Book Now",
      "unavailable": "Unavailable",
      "contact_us": "Contact us"

Of course this didn’t work and I’ve been digging around to find out how a certain product template reference the language files.

Could anyone point me in the right direction? Any advice would be greatly appreciated!

2

Hi Bjorn,

Did you get this issue resolved. I’m trying to do something similar if you can share how you resolved it would be appreciated.

Kind Regards,

Stephen