📖 Weglot helps you to grow and increase your business by adding new languages to your store. Here is the guide for Weglot Integration with Boost AI Search & Discovery app.
About Weglot
App Information
Weglot helps you to grow and increase your business by adding new languages to your store.
App details: https://apps.shopify.com/weglot
Integration Function
Translate your websites' filter options/values as well as Search/Suggestion into different languages.
How to integrate Weglot with Boost AI Search & Discovery
⚠️ This feature only works with Boost AI Search & Discovery V2 and above. To find out which version of our app your store's current theme is installed with, please follow this article.
Integrate with Filter trees & Product list
1. Open Weglot app in Shopify Admin.
2. Select Visual Editor.
3. Go to Projects → Select your current theme/projects need to translate → Settings → Shopify Settings → Dynamic Settings.
Select one of the Versions below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out): V2 or V3. Then follow its corresponding Step 4.
4. (V2)
In the Selector box, add all these classes below:
.boost-pfs-filter-option-value
.boost-pfs-filter-option-title-text
.boost-pfs-filter-top-sorting
.boost-pfs-filter-option-item
4. (V3)
In the Selector box, add all these classes below:
Instant Search
.boost-sd__header-item
.boost-sd__suggestion-queries-link
.boost-sd__suggestion-queries-item-title
.boost-sd__view-all-text
.boost-sd__search-form-title
Banner & Toolbar
.boost-sd__header-title
.boost-sd__header-description
.boost-sd__view-as-text
.boost-sd__product-count
.boost-sd__sorting-label
.boost-sd__sorting-button
.boost-sd__sorting-option
Filter tree
.boost-sd__filter-option-title
.boost-sd__filter-option-item-button
.boost-sd__product-title
.boost-sd__button
Search page header result
.boost-sd__search-result-toolbar-panel
.boost-sd__search-result-toolbar-panel
.boost-sd__search-result-toolbar-item
5. Make sure the settings Translate search in your visitors' language is turned ON.
6. Click Save Changes. After 30s, please open your storefront website again in private mode (or clear your browser's cache) in order to see the translated contents.
Integrate with Search & Instant search
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you'd like to integrate the app and click Actions (⋯) > Edit code.
Select one of the tab below for the app version that your theme is installed with (if you have not known it, yet, please follow this article to find out): V2 or V3. Then follow its corresponding Step 4.
V2
3. (V2)
In Asset folder, find boost-pfs-filter.js file.
4. (V2)
Scroll all the way down to the bottom of the file, locate the line right above the last one.
5. (V2)
Copy & paste this code snippet:
// Only send Weglot request if the current language is different from English
function isWeglotActive() {
if (!window.Weglot || !window.Weglot.initialized) {
return false;
} else {
var currentLang = Weglot.getCurrentLang();
// Change 'en' to suit the original language of the store
return currentLang !== 'en';
}
}
InstantSearchApi.beforeCallAsync = function(searchTerm, callInstantSearchApi) {
// Use isWeglotActive in our API
if (window.Weglot && window.Weglot.initialized && isWeglotActive()) {
Weglot.search(searchTerm, function(englishTerm) {
Globals.instantSearchQueryParams['q'] = englishTerm;
callInstantSearchApi();
});
} else {
callInstantSearchApi();
}
};
6. (V2)
Click Save and you're set!
V3
3. (V3)
In Asset folder, locate a file named boost-sd-custom.js.
4. (V3)
Add the code snippet below to the boost-sd-custom.js file:
if (window.boostSDAppConfig) { window.boostSDAppConfig.integration = Object.assign({ languages: 'weglot' }, window.boostSDAppConfig.integration || {});}
5. (V3)
Click Save and you're all set!
How to integrate with Turbo
1. Go to Boost AI Search & Discovery > Integration > Shopify Integration > Select your preferred theme > Edit code.
2. Locate this file customization.js & add the following code at the end of it:
if (window.boostWidgetIntegration) {
window.boostWidgetIntegration.integration = Object.assign(
{ languages: 'weglot' },
window.boostWidgetIntegration.integration || {}
);
}3. Click Save and you're set.
App limitations
💡 While Boost AI Search & Discovery works diligently to ensure compatibility with various third-party apps and services, we have identified some constraints that may impact the full functionality of the Weglot translator integration. These limitations are specific to our app and are not reflective of any shortcomings on the part of Weglot translator.
Class must be manually added
To integrate with the Weglot app, you must manually add the classes that correspond to the features of Boost AI Search & Discovery.
Boost AI Search & Discovery's Synonym can only work with the original language of your store
Once integrated, Weglot translator displays a single translation for the original word, for instance, in the Product tile, if a customer searches using the exact translation, the corresponding product will be shown.
However, if the customer enters a similar word that does not precisely match the translation, the product title will not match, resulting in the product not being displayed to the customer.
Translations may not work as intended
But no worries, It is possible to edit your translation by clicking on any field and selecting the corresponding column on the right side if it is not translated as accurately as you require.
For more information on how to edit your translations, please follow this article.
Rest assured, we're actively working on addressing these limitations and improving the integration's performance to provide accurate and comprehensive translations for your store. We appreciate your understanding and patience as we continue to enhance our app's capabilities.
Reference
If you encounter any issues during the integration process, please don't hesitate to contact our support team for further assistance at [email protected].