From 3b94a5e3dd7a60f0baaa009e0a3a88c67d311ca4 Mon Sep 17 00:00:00 2001 From: DevBot Date: Fri, 6 Feb 2026 07:06:03 +0000 Subject: [PATCH] docs: document automatic product translation for Shopify V2 - Add 'Automatic Product Translation' section to change-quiz-language.md explaining how V2 uses @inContext to fetch translated product data - Add success callout to show-quiz-based-on-markets.md noting that product titles/descriptions/prices are auto-translated with Markets - Add callout to shopify-markets.md tutorial clarifying that only quiz questions/choices need manual translation, not product data - Update adapt-quizzes-to-markets.md to mention automatic currency conversion and product translation in V2 The V2 frontend already fetches product data with the Storefront API @inContext(country, language) directive, which returns translated titles, descriptions and localized prices. This was undocumented. --- .../adapt-quizzes-to-markets.md | 2 +- docs/how-to-guides/change-quiz-language.md | 130 +++++++++++------- .../show-quiz-based-on-markets.md | 6 + docs/tutorials/shopify-markets.md | 4 + 4 files changed, 88 insertions(+), 54 deletions(-) diff --git a/docs/customer-success/adapt-quizzes-to-markets.md b/docs/customer-success/adapt-quizzes-to-markets.md index 99e45b7d4..bc4c77f39 100644 --- a/docs/customer-success/adapt-quizzes-to-markets.md +++ b/docs/customer-success/adapt-quizzes-to-markets.md @@ -51,7 +51,7 @@ Localization isn’t just swapping languages. It touches multiple layers of the **Visuals.** Even colors carry meaning. Red signals good fortune in China but can imply danger in Western markets. -**Currency and pricing.** Showing euros to a German customer instead of USD removes an instant layer of friction. +**Currency and pricing.** Showing euros to a German customer instead of USD removes an instant layer of friction. With the `💎 Built for Shopify` version, product prices are automatically converted to the customer's local currency and product titles and descriptions are shown in the customer's language — as long as you have translations set up via Shopify's [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app. **Legal requirements.** Some regions enforce very specific rules — like GDPR consent in Europe or advertising standards in Canada. diff --git a/docs/how-to-guides/change-quiz-language.md b/docs/how-to-guides/change-quiz-language.md index da0008973..ef311280a 100644 --- a/docs/how-to-guides/change-quiz-language.md +++ b/docs/how-to-guides/change-quiz-language.md @@ -29,13 +29,13 @@ This guide will help you change the language of your quiz, translate it into dif
- Before assigning quizzes to specific markets and languages, you’ll need to create and customize the quiz versions for each language. Here’s how: + Before assigning quizzes to specific markets and languages, you'll need to create and customize the quiz versions for each language. Here's how: **Step 1: Create Your Initial Quiz:** - Start by creating a [`new quiz`](/reference/dashboard/#new-quiz) with the basic content and questions you want to include. - - Save this quiz as your base version, which you’ll use to duplicate for different languages. + - Save this quiz as your base version, which you'll use to duplicate for different languages. **Step 2: Duplicate the Quiz for Each Language:** @@ -44,7 +44,7 @@ This guide will help you change the language of your quiz, translate it into dif ![manual_shopifyV2_quizmanagementoptions](/images/manual_shopifyV2_quizmanagementoptions.png) !!! tip - + [Quiz Copilot](/how-to-guides/use-quiz-copilot/) can be used to translate and duplicate quizzes. Just open a chat with it and ask it to duplicate the main quiz for you in a different language. - For each duplicate quiz, go into the [`Quiz settings > Quiz content`](/reference/quiz-builder/quiz-settings/#messages) and update the language for all buttons, popups, and other interface elements. @@ -53,7 +53,7 @@ This guide will help you change the language of your quiz, translate it into dif **Step 3: Translate Questions and Choices Separately:** - Unless you've used [Quiz Copilot](/how-to-guides/use-quiz-copilot/) to translate the quiz, the questions and answer choices won’t automatically translate; you’ll need to manually update these for each language version. + Unless you've used [Quiz Copilot](/how-to-guides/use-quiz-copilot/) to translate the quiz, the questions and answer choices won't automatically translate; you'll need to manually update these for each language version. - Go through each question and answer choice to ensure they are accurately translated and culturally relevant for each target language. @@ -62,30 +62,54 @@ This guide will help you change the language of your quiz, translate it into dif - Go to the [Quiz Settings > Content](/reference/quiz-builder/quiz-settings/#content) tab. - Change the translations for buttons and helpers for each language version. - + **Step 5: Assign the Quiz to the Right Market and Language:** !!! tip "Tutorial" - + Check our step by step tutorial on how to set up Shopify Markets and assign quizzes to different markets and languages with the RevenueHunt app: [Assign Quizzes to Shopify Markets and Languages](/tutorials/shopify-markets/). - Once each quiz version is ready, go to [App Settings > Shopify Markets](/reference/app-settings/#markets). - Select the appropriate market and language, and link each translated quiz to its respective locale. This will ensure that visitors see the correct quiz based on their market and language settings. - By following these steps, you’ll have a well-localized quiz experience ready for each market and language, which you can then manage seamlessly in the Shopify Markets tab of your app settings. + By following these steps, you'll have a well-localized quiz experience ready for each market and language, which you can then manage seamlessly in the Shopify Markets tab of your app settings. + ## Automatic Product Translation (Shopify V2) -=== "Shopify (Legacy)" + !!! success "Translated Product Titles & Descriptions" + + The `💎 Built for Shopify` version of the RevenueHunt app **automatically displays translated product titles, descriptions, and prices** on the quiz results page based on the customer's market and language. + + This works through Shopify's Storefront API `@inContext` directive — when a customer views the quiz in a specific market/language, the app fetches product data in that locale directly from Shopify. + + **How it works:** + + 1. The theme extension detects the customer's **country** and **language** from the Shopify storefront context. + 2. When the results page loads, product data (titles, descriptions, prices, URLs) is fetched via the Shopify Storefront API using the detected locale. + 3. If you have translated your products using Shopify's **Translate & Adapt** app (or a third-party translation app), those translations will appear automatically in the quiz results. + + **Requirements:** + + - Your store must have the [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app (or equivalent) installed and configured with product translations. + - [Shopify Markets](/how-to-guides/show-quiz-based-on-markets/) must be set up with the appropriate languages and regions. + - Product translations must be published for the relevant locales in your Shopify store. !!! note - Version 1 of the RevenueHunt App for Shopify doesn't support the Shopify Markets feature. + This automatic product translation applies only to the **results page** where recommended products are displayed. The quiz **questions, choices, and UI text** still need to be translated manually or via [Quiz Copilot](/how-to-guides/use-quiz-copilot/) as described above. + + +=== "Shopify (Legacy)" + + !!! note + + Version 1 of the RevenueHunt App for Shopify doesn't support the Shopify Markets feature. 1. **Open Quiz Settings**: To change the quiz language navigate to [Quiz Settings](/reference/quiz-builder/quiz-settings/) or [`Quiz Settings -> Messages`](/reference/quiz-builder/quiz-settings/#messages). ![how to change quiz language messages](/images/manual_quizbuilder_quizsettings_messages.png){width="300"} - + 2. **Language**: Choose a language from a dropdown list to change the text on the quiz buttons and placeholders into that language. 3. **Add your own translations**: If the desired language is not available or you prefer a different translation you can modify individual instances (such as buttons and placeholders) directly within the [Messages](/reference/quiz-builder/quiz-settings/#messages) tab. 4. **Override the translations**: Should any buttons revert to their original English translations (overriding your selected quiz language) you can manually adjust the button text in [`Quiz Builder -> Question settings`](/reference/quiz-builder/questions/#question-settings). @@ -95,7 +119,7 @@ This guide will help you change the language of your quiz, translate it into dif 1. **Open Quiz Settings**: To change the quiz language navigate to [Quiz Settings](/reference/quiz-builder/quiz-settings/) or [`Quiz Settings -> Messages`](/reference/quiz-builder/quiz-settings/#messages). ![how to change quiz language messages](/images/manual_quizbuilder_quizsettings_messages.png){width="300"} - + 2. **Language**: Choose a language from a dropdown list to change the text on the quiz buttons and placeholders into that language. 3. **Add your own translations**: If the desired language is not available or you prefer a different translation you can modify individual instances (such as buttons and placeholders) directly within the [Messages](/reference/quiz-builder/quiz-settings/#messages) tab. 4. **Override the translations**: Should any buttons revert to their original English translations (overriding your selected quiz language) you can manually adjust the button text in [`Quiz Builder -> Question settings`](/reference/quiz-builder/questions/#question-settings). @@ -105,7 +129,7 @@ This guide will help you change the language of your quiz, translate it into dif 1. **Open Quiz Settings**: To change the quiz language navigate to [Quiz Settings](/reference/quiz-builder/quiz-settings/) or [`Quiz Settings -> Messages`](/reference/quiz-builder/quiz-settings/#messages). ![how to change quiz language messages](/images/manual_quizbuilder_quizsettings_messages.png){width="300"} - + 2. **Language**: Choose a language from a dropdown list to change the text on the quiz buttons and placeholders into that language. 3. **Add your own translations**: If the desired language is not available or you prefer a different translation you can modify individual instances (such as buttons and placeholders) directly within the [Messages](/reference/quiz-builder/quiz-settings/#messages) tab. 4. **Override the translations**: Should any buttons revert to their original English translations (overriding your selected quiz language) you can manually adjust the button text in [`Quiz Builder -> Question settings`](/reference/quiz-builder/questions/#question-settings). @@ -115,7 +139,7 @@ This guide will help you change the language of your quiz, translate it into dif 1. **Open Quiz Settings**: To change the quiz language navigate to [Quiz Settings](/reference/quiz-builder/quiz-settings/) or [`Quiz Settings -> Messages`](/reference/quiz-builder/quiz-settings/#messages). ![how to change quiz language messages](/images/manual_quizbuilder_quizsettings_messages.png){width="300"} - + 2. **Language**: Choose a language from a dropdown list to change the text on the quiz buttons and placeholders into that language. 3. **Add your own translations**: If the desired language is not available or you prefer a different translation you can modify individual instances (such as buttons and placeholders) directly within the [Messages](/reference/quiz-builder/quiz-settings/#messages) tab. 4. **Override the translations**: Should any buttons revert to their original English translations (overriding your selected quiz language) you can manually adjust the button text in [`Quiz Builder -> Question settings`](/reference/quiz-builder/questions/#question-settings). @@ -125,7 +149,7 @@ This guide will help you change the language of your quiz, translate it into dif 1. **Open Quiz Settings**: To change the quiz language navigate to [Quiz Settings](/reference/quiz-builder/quiz-settings/) or [`Quiz Settings -> Messages`](/reference/quiz-builder/quiz-settings/#messages). ![how to change quiz language messages](/images/manual_quizbuilder_quizsettings_messages.png){width="300"} - + 2. **Language**: Choose a language from a dropdown list to change the text on the quiz buttons and placeholders into that language. 3. **Add your own translations**: If the desired language is not available or you prefer a different translation you can modify individual instances (such as buttons and placeholders) directly within the [Messages](/reference/quiz-builder/quiz-settings/#messages) tab. 4. **Override the translations**: Should any buttons revert to their original English translations (overriding your selected quiz language) you can manually adjust the button text in [`Quiz Builder -> Question settings`](/reference/quiz-builder/questions/#question-settings). @@ -137,10 +161,10 @@ This guide will help you change the language of your quiz, translate it into dif
!!! tip "Tutorial" - + Check our step by step tutorial on how to set up Shopify Markets and assign quizzes to different markets and languages with the RevenueHunt app: [Assign Quizzes to Shopify Markets and Languages](/tutorials/shopify-markets/). - Our RevenueHunt app allows you to tailor the shopping experience for customers worldwide by selecting specific quizzes for each Shopify Market and its associated languages. Here’s a step-by-step guide to help you change your quiz language based on the visitor’s location and language preference. + Our RevenueHunt app allows you to tailor the shopping experience for customers worldwide by selecting specific quizzes for each Shopify Market and its associated languages. Here's a step-by-step guide to help you change your quiz language based on the visitor's location and language preference. **Step 1: Navigate to the Shopify Markets Settings** @@ -152,9 +176,9 @@ This guide will help you change the language of your quiz, translate it into dif **Step 2: Assign a Quiz to a Specific Shopify Market** - - In the [Shopify Markets](/reference/app-settings/#markets) tab, you’ll see a `dropdown list` that shows all available quizzes. - - - From the Shopify Markets section, select the Shopify Market where you’d like to assign a quiz. + - In the [Shopify Markets](/reference/app-settings/#markets) tab, you'll see a `dropdown list` that shows all available quizzes. + + - From the Shopify Markets section, select the Shopify Market where you'd like to assign a quiz. ![manual_shopifyV2_appsettings_markets_pickquiz](/images/manual_shopifyV2_appsettings_markets_pickquiz.png) @@ -166,7 +190,7 @@ This guide will help you change the language of your quiz, translate it into dif - Toggle the `Show All Locales` option to display a detailed list of markets and associated languages. - - You’ll now be able to assign different quizzes for each language within the same market: + - You'll now be able to assign different quizzes for each language within the same market: *Example: For the United States market, you can set one quiz for English-speaking customers and another for Spanish-speaking customers.* @@ -180,15 +204,15 @@ This guide will help you change the language of your quiz, translate it into dif **Step 5: Hide All Locales for Simplified View** - If you’d like to revert to a single quiz for a Market regardless of language: + If you'd like to revert to a single quiz for a Market regardless of language: ![manual_shopifyV2_appsettings_markets_showall](/images/manual_shopifyV2_appsettings_markets_showall.png) - Click the `Hide All Locales` option. This will simplify the view by removing language-specific distinctions. - - The default quiz you’ve selected for that Market will now display to all visitors from that region, regardless of their language. + - The default quiz you've selected for that Market will now display to all visitors from that region, regardless of their language. - By following these steps, you’ll be able to customize your quizzes by Market and language, ensuring each visitor has a tailored experience that feels relevant and engaging. + By following these steps, you'll be able to customize your quizzes by Market and language, ensuring each visitor has a tailored experience that feels relevant and engaging. === "Shopify (Legacy)" @@ -197,8 +221,8 @@ This guide will help you change the language of your quiz, translate it into dif How does it work? - - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. - - Then, each of these quizzes will have a **unique quiz ID**. + - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. + - Then, each of these quizzes will have a **unique quiz ID**. - You can embed each of these quizzes on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a [script that displays the correct quiz](#step-2-display-the-correct-quiz-based-on-browser-language) popup depending on the browser language. - However, the main problem is that our app **can only sync the base products from your store (in the main language)**, as products translated automatically to other languages don't have unique product IDs that we could sync. So you can change the quiz language but the product names and descriptions will be shown in the original language. There are some [workarounds](#step-3-handling-product-sync-in-multilingual-stores) mentioned in the article that you can try. @@ -221,7 +245,7 @@ This guide will help you change the language of your quiz, translate it into dif document.addEventListener("DOMContentLoaded", function() { // Check browser's preferred language (get the first two characters to ignore region) const language = navigator.language.substring(0,2); - + // Your mapping of languages to quiz IDs const quizMapping = { 'en': 'abc123', @@ -256,16 +280,16 @@ This guide will help you change the language of your quiz, translate it into dif !!! warning - Make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior. + Make sure that you don't publish two quizzes on the same page, as this may lead to unwanted behavior. **Step 3: Redirect to Translated Product URL** - Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. + Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with [JavaScript](/how-to-guides/add-javascript/). 1. Instead of adding a product to cart, you can change the [checkout settings](/how-to-guides/change-checkout-settings/) to `link to product` and point customers to the translated product page. - 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. + 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. 3. For example, you can tell the Results Page to automatically change all the links from this `https://www.example.com/products/productA` to this `https://www.example.com/en/products/productA` This way your customers will be automatically redirected to the translated product page. 4. To redirect to an English translation of a product, one can use: ```javascript @@ -290,8 +314,8 @@ This guide will help you change the language of your quiz, translate it into dif How does it work? - - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. - - Then, each of these quizzes will have a **unique quiz ID**. + - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. + - Then, each of these quizzes will have a **unique quiz ID**. - You can embed each of these quizzes on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a [script that displays the correct quiz](#step-2-display-the-correct-quiz-based-on-browser-language) popup depending on the browser language. - However, the main problem is that our app **can only sync the base products from your store (in the main language)**, as products translated automatically to other languages don't have unique product IDs that we could sync. So you can change the quiz language but the product names and descriptions will be shown in the original language. There are some [workarounds](#step-3-handling-product-sync-in-multilingual-stores) mentioned in the article that you can try. @@ -314,7 +338,7 @@ This guide will help you change the language of your quiz, translate it into dif document.addEventListener("DOMContentLoaded", function() { // Check browser's preferred language (get the first two characters to ignore region) const language = navigator.language.substring(0,2); - + // Your mapping of languages to quiz IDs const quizMapping = { 'en': 'abc123', @@ -349,16 +373,16 @@ This guide will help you change the language of your quiz, translate it into dif !!! warning - Make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior. + Make sure that you don't publish two quizzes on the same page, as this may lead to unwanted behavior. **Step 3: Redirect to Translated Product URL** - Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. + Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with [JavaScript](/how-to-guides/add-javascript/). 1. Instead of adding a product to cart, you can change the [checkout settings](/how-to-guides/change-checkout-settings/) to `link to product` and point customers to the translated product page. - 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. + 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. 3. For example, you can tell the Results Page to automatically change all the links from this `https://www.example.com/products/productA` to this `https://www.example.com/en/products/productA` This way your customers will be automatically redirected to the translated product page. 4. To redirect to an English translation of a product, one can use: ```javascript @@ -383,8 +407,8 @@ This guide will help you change the language of your quiz, translate it into dif How does it work? - - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. - - Then, each of these quizzes will have a **unique quiz ID**. + - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. + - Then, each of these quizzes will have a **unique quiz ID**. - You can embed each of these quizzes on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a [script that displays the correct quiz](#step-2-display-the-correct-quiz-based-on-browser-language) popup depending on the browser language. - However, the main problem is that our app **can only sync the base products from your store (in the main language)**, as products translated automatically to other languages don't have unique product IDs that we could sync. So you can change the quiz language but the product names and descriptions will be shown in the original language. There are some [workarounds](#step-3-handling-product-sync-in-multilingual-stores) mentioned in the article that you can try. @@ -407,7 +431,7 @@ This guide will help you change the language of your quiz, translate it into dif document.addEventListener("DOMContentLoaded", function() { // Check browser's preferred language (get the first two characters to ignore region) const language = navigator.language.substring(0,2); - + // Your mapping of languages to quiz IDs const quizMapping = { 'en': 'abc123', @@ -442,16 +466,16 @@ This guide will help you change the language of your quiz, translate it into dif !!! warning - Make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior. + Make sure that you don't publish two quizzes on the same page, as this may lead to unwanted behavior. **Step 3: Redirect to Translated Product URL** - Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. + Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with [JavaScript](/how-to-guides/add-javascript/). 1. Instead of adding a product to cart, you can change the [checkout settings](/how-to-guides/change-checkout-settings/) to `link to product` and point customers to the translated product page. - 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. + 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. 3. For example, you can tell the Results Page to automatically change all the links from this `https://www.example.com/products/productA` to this `https://www.example.com/en/products/productA` This way your customers will be automatically redirected to the translated product page. 4. To redirect to an English translation of a product, one can use: ```javascript @@ -476,8 +500,8 @@ This guide will help you change the language of your quiz, translate it into dif How does it work? - - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. - - Then, each of these quizzes will have a **unique quiz ID**. + - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. + - Then, each of these quizzes will have a **unique quiz ID**. - You can embed each of these quizzes on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a [script that displays the correct quiz](#step-2-display-the-correct-quiz-based-on-browser-language) popup depending on the browser language. - However, the main problem is that our app **can only sync the base products from your store (in the main language)**, as products translated automatically to other languages don't have unique product IDs that we could sync. So you can change the quiz language but the product names and descriptions will be shown in the original language. There are some [workarounds](#step-3-handling-product-sync-in-multilingual-stores) mentioned in the article that you can try. @@ -500,7 +524,7 @@ This guide will help you change the language of your quiz, translate it into dif document.addEventListener("DOMContentLoaded", function() { // Check browser's preferred language (get the first two characters to ignore region) const language = navigator.language.substring(0,2); - + // Your mapping of languages to quiz IDs const quizMapping = { 'en': 'abc123', @@ -535,16 +559,16 @@ This guide will help you change the language of your quiz, translate it into dif !!! warning - Make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior. + Make sure that you don't publish two quizzes on the same page, as this may lead to unwanted behavior. **Step 3: Redirect to Translated Product URL** - Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. + Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with [JavaScript](/how-to-guides/add-javascript/). 1. Instead of adding a product to cart, you can change the [checkout settings](/how-to-guides/change-checkout-settings/) to `link to product` and point customers to the translated product page. - 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. + 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. 3. For example, you can tell the Results Page to automatically change all the links from this `https://www.example.com/products/productA` to this `https://www.example.com/en/products/productA` This way your customers will be automatically redirected to the translated product page. 4. To redirect to an English translation of a product, one can use: ```javascript @@ -569,8 +593,8 @@ This guide will help you change the language of your quiz, translate it into dif How does it work? - - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. - - Then, each of these quizzes will have a **unique quiz ID**. + - For now, it is possible to [create multiple quizzes](#step-1-create-quizzes-in-different-languages), each one in a different language. + - Then, each of these quizzes will have a **unique quiz ID**. - You can embed each of these quizzes on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a [script that displays the correct quiz](#step-2-display-the-correct-quiz-based-on-browser-language) popup depending on the browser language. - However, the main problem is that our app **can only sync the base products from your store (in the main language)**, as products translated automatically to other languages don't have unique product IDs that we could sync. So you can change the quiz language but the product names and descriptions will be shown in the original language. There are some [workarounds](#step-3-handling-product-sync-in-multilingual-stores) mentioned in the article that you can try. @@ -593,7 +617,7 @@ This guide will help you change the language of your quiz, translate it into dif document.addEventListener("DOMContentLoaded", function() { // Check browser's preferred language (get the first two characters to ignore region) const language = navigator.language.substring(0,2); - + // Your mapping of languages to quiz IDs const quizMapping = { 'en': 'abc123', @@ -628,16 +652,16 @@ This guide will help you change the language of your quiz, translate it into dif !!! warning - Make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior. + Make sure that you don't publish two quizzes on the same page, as this may lead to unwanted behavior. **Step 3: Redirect to Translated Product URL** - Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. + Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will be displayed in the original language. A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with [JavaScript](/how-to-guides/add-javascript/). 1. Instead of adding a product to cart, you can change the [checkout settings](/how-to-guides/change-checkout-settings/) to `link to product` and point customers to the translated product page. - 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. + 2. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. 3. For example, you can tell the Results Page to automatically change all the links from this `https://www.example.com/products/productA` to this `https://www.example.com/en/products/productA` This way your customers will be automatically redirected to the translated product page. 4. To redirect to an English translation of a product, one can use: ```javascript diff --git a/docs/how-to-guides/show-quiz-based-on-markets.md b/docs/how-to-guides/show-quiz-based-on-markets.md index f7c95f2b9..b0e050b4a 100644 --- a/docs/how-to-guides/show-quiz-based-on-markets.md +++ b/docs/how-to-guides/show-quiz-based-on-markets.md @@ -156,6 +156,12 @@ icon: material/earth In there, you can also change format of how the price currency on recommended product is displayed. If you don't change the default, the price will be displayed as set up in your Shopify Market. If you want to change the format type the currency in the format you want, for example `${{amount}}` or `{{amount}}€` can be used to replace the default `{{amount}}USD` or `{{amount}}EUR`. + !!! success "Automatic Product Translation" + + When Shopify Markets are configured, the quiz results page will **automatically display translated product titles, descriptions, and localized prices** based on the customer's market and language. This works through Shopify's Storefront API — if you have product translations set up via the [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app, they will appear automatically in quiz results. No extra configuration is needed in the RevenueHunt app. + + + === "Shopify (Legacy)" diff --git a/docs/tutorials/shopify-markets.md b/docs/tutorials/shopify-markets.md index 4748ca5d7..b93e25e84 100644 --- a/docs/tutorials/shopify-markets.md +++ b/docs/tutorials/shopify-markets.md @@ -160,6 +160,10 @@ icon: material/numeric-8 6. In [`Quiz settings`](/reference/quiz-builder/quiz-settings/) go to [`Quiz content`](/reference/quiz-builder/quiz-settings/#messages-quiz-contentt) click `Reset messages` and change the language of system buttons and helpers as needed. You can also change the translations manually for each field. 7. Remember to save the changes with the `Save` button. + !!! success "Product Titles & Descriptions Are Translated Automatically" + + You only need to translate the quiz **questions, choices, and UI text** manually. The **product titles, descriptions, and prices** shown on the results page are fetched automatically from Shopify in the customer's language and currency. This works through Shopify's Storefront API — as long as you have product translations set up via the [Translate & Adapt](https://apps.shopify.com/translate-and-adapt) app (or a compatible translation app), those translations will appear automatically in quiz results. + === "Shopify (Legacy)"