Launch Your Japanese Store with SiteLocaleAI: Price Localization & SEO
Expanding an e‑commerce store into Japan is a fantastic growth opportunity, but it comes with unique challenges: language, currency, and search‑engine visibility. SiteLocaleAI lets you tackle all three with a single, framework‑agnostic JavaScript library that you host yourself. In this tutorial we’ll:
- Add the SiteLocaleAI drop‑in script to a generic storefront (React, Vue, WordPress, Shopify, etc.).
- Translate UI strings using your own LLM API key (Claude, GPT‑4o‑mini, etc.).
- Localize prices to Japanese yen (JPY) with psychological rounding (e.g., ¥1,980 → ¥1,999).
- Pre‑render translated pages for search‑engine indexing via the CLI.
- Deploy a WordPress plugin version you prefer a no‑code solution.
1. Install the Library
SiteLocaleAI is a single‑file JavaScript bundle. Download it from the CDN or host it yourself:
<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
Add the script to the <head> of every page you want to translate. Because the library is framework‑agnostic, it works with static HTML, React components, Vue templates, and even Shopify liquid files.
2. Configure Your LLM API Key
SiteLocaleAI never sends data to our servers; it forwards translation requests to the LLM you provide. Store your API key in an environment variable or a secret manager and expose it to the client via a short‑lived token endpoint.
// locale-config.js
window.SiteLocaleAI = {
apiKey: 'YOUR_CLAUDE_OR_GPT4O_MINI_KEY',
provider: 'claude', // or 'openai'
targetLang: 'ja', // Japanese
};
Security tip: Use a server‑side proxy that injects the key only for authenticated users.
3. Translate Text on the Fly
Mark any translatable element with data-i18n. The library will replace the inner text after the LLM returns the translation.
<h1 data-i18n="welcome">Welcome to Our Store</h1>
<p data-i18n="description">Find the best gadgets at unbeatable prices.</p>
// init.js
document.addEventListener('DOMContentLoaded', () => {
SiteLocaleAI.translatePage();
});
The first time a visitor loads the page, the library calls the LLM, caches the result in localStorage, and instantly swaps the text on subsequent visits.
4. Price Localization with Psychological Rounding
Japanese shoppers respond better to prices ending in 99 or 95 (the “charm price” effect). SiteLocaleAI provides a helper to convert a USD price to JPY and apply this rounding automatically.
// price-utils.js
function toJpy(usd) {
const rate = 150; // Example conversion rate; replace with real API
const raw = usd * rate;
// Psychological rounding: nearest 99 yen
const rounded = Math.floor(raw / 100) * 100 + 99;
return `¥${rounded.toLocaleString('ja-JP')}`;
}
// Example usage
const priceElements = document.querySelectorAll('[data-price-usd]');
priceElements.forEach(el => {
const usd = parseFloat(el.dataset.priceUsd);
el.textContent = toJpy(usd);
});
Add data-price-usd to any price element:
<span class="price" data-price-usd="19.99"></span>
When the page loads, the script replaces it with something like ¥2,999 – a price that feels “right” to Japanese consumers.
5. SEO‑Friendly Pre‑Rendering
Search engines still struggle with client‑side translations. SiteLocaleAI’s CLI can pre‑render static HTML for each locale, ensuring Google and Bing index the Japanese version.
# Install the CLI globally
npm i -g @sitelocaleai/cli
# Generate a Japanese build
sitelocaleai prerender --lang ja --output ./dist/ja
The CLI crawls your site, runs the same translation pipeline server‑side, and writes fully translated HTML files to ./dist/ja. Deploy that folder to your CDN or static host, and configure a language‑specific URL (e.g., example.com/ja/).
For more details, see the Pre‑Rendering Docs.
6. WordPress Plugin (No Node Required)
If your store runs on WordPress, you can skip the manual script injection. Install the SiteLocaleAI plugin from the WordPress marketplace, then:
- Go to Settings → SiteLocaleAI.
- Paste your LLM API key.
- Choose Japanese (ja) as the target language.
- Enable Price Rounding and set the conversion rate.
The plugin automatically adds the script, translates content, and rewrites price tags based on the data-price-usd attribute. No Node.js or build step needed.
7. Testing & Validation
- Language Switcher – Add a simple dropdown that calls
SiteLocaleAI.switchLang('ja'). - Price Check – Verify that all price elements display the rounded yen amount.
- SEO Audit – Use Google Search Console’s URL Inspection tool on
example.com/ja/to confirm the page is indexed with Japanese content.
8. Going Live
Deploy the pre‑rendered Japanese folder to your production CDN, update your sitemap to include the /ja/ URLs, and submit the updated sitemap to Google Search Console. Your store is now fully localized, price‑optimized, and SEO‑ready for the Japanese market.
9. Next Steps
- A/B test different rounding strategies (99 vs. 95) to see which drives higher conversion.
- Add locale‑specific payment methods (e.g., Konbini, PayPay) using the same
data-price-usdapproach. - Expand to other Asian markets by changing
targetLangand adjusting conversion rates.
Ready to launch your Japanese store in minutes? Try SiteLocaleAI today and watch your international sales soar.