Expanding Your E‑Commerce Store to Japan with SiteLocaleAI
Japan is the third‑largest e‑commerce market in the world, but cracking it requires more than a simple translation. Shoppers expect prices that feel natural, and search engines need fully rendered Japanese pages to rank. In this tutorial we’ll walk through a practical setup using SiteLocaleAI, a self‑hosted JavaScript library that translates your site, localizes prices with psychological rounding, and pre‑renders SEO‑friendly pages.
1. Prerequisites
- A running website (static, React, Vue, WordPress, Shopify, etc.)
- Access to an LLM API key (Claude, GPT‑4o‑mini, etc.)
- Node.js (for the CLI) – optional for WordPress users
- Basic knowledge of JavaScript and your build pipeline
2. Install the SiteLocaleAI Library
SiteLocaleAI is framework‑agnostic. The easiest way is to add the script tag directly to your HTML head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Store</title>
<!-- SiteLocaleAI core -->
<script src="https://cdn.sitelocaleai.com/v1/site-locale.min.js"></script>
<script>
// Initialize with your LLM API key (keep it server‑side if possible)
SiteLocaleAI.init({
apiKey: 'YOUR_LLM_API_KEY',
defaultLang: 'en',
supportedLangs: ['en', 'ja'],
priceConfig: {
currency: 'JPY',
rounding: 'charm' // psychological rounding
}
});
</script>
</head>
<body>
<!-- Your store markup -->
</body>
</html>
Tip: For production, store the API key in an environment variable and proxy the request through your backend to avoid exposing it.
3. Localizing Prices with Psychological (Charm) Rounding
Psychological rounding, also known as charm pricing, adjusts numbers to make them appear more attractive (e.g., ¥9,800 instead of ¥9,823). SiteLocaleAI handles this automatically when you flag price elements.
3.1 Markup Prices
Add the data-price attribute to any element that displays a price in your base currency (USD in this example):
<span class="price" data-price="12.99">$12.99</span>
3.2 Enable Rounding
The priceConfig we passed during initialization tells SiteLocaleAI to:
- Convert USD → JPY using the latest exchange rate (via the LLM or a third‑party API you provide).
- Apply charm rounding: round to the nearest 100 ¥ or 500 ¥ depending on the price range.
When the page loads in Japanese (ja), the library rewrites the markup:
<span class="price" data-price="12.99">¥9,800</span>
You can also customize the rounding thresholds:
SiteLocaleAI.updatePriceConfig({
rounding: {
type: 'charm',
thresholds: [
{ max: 5000, step: 50 },
{ max: 20000, step: 100 },
{ max: Infinity, step: 500 }
]
}
});
4. Translating the Page Content
SiteLocaleAI uses your LLM to translate visible text. The library scans the DOM, extracts strings, and replaces them on the fly. For static sites you can also pre‑render translations using the CLI (see Section 6).
4.1 Inline Translation Example
<h1 data-i18n="welcome">Welcome to Our Store</h1>
<p data-i18n="description">Find the best gadgets at unbeatable prices.</p>
When a Japanese visitor lands, the library swaps the text:
<h1 data-i18n="welcome">私たちのストアへようこそ</h1>
<p data-i18n="description">最高のガジェットを驚きの価格で見つけよう。</p>
5. WordPress Integration (No Node Required)
If your store runs on WordPress, install the SiteLocaleAI plugin from the WordPress plugin directory. After activation:
1. Add your LLM API key in the plugin settings.
2. Choose the target language (Japanese) and enable Price Localization.
3. The plugin injects the script tag automatically and adds a shortcode [sl_price] for price fields.
[sl_price amount="12.99" currency="USD"]
The shortcode outputs the correctly rounded JPY price when the page language is set to Japanese.
6. SEO‑Friendly Pre‑Rendering with the CLI
Search engines can’t execute JavaScript reliably for every language version. SiteLocaleAI’s CLI generates static HTML snapshots for each locale, ensuring Google and Bing index the Japanese pages.
6.1 Install the CLI
npm i -g @sitelocaleai/cli
6.2 Run the Pre‑Render
site-locale-cli prerender \
--src ./public \
--out ./public-ja \
--lang ja \
--api-key $LMM_API_KEY \
--price-currency JPY \
--price-rounding charm
--srcpoints to your built site folder.--outis the folder that will contain the Japanese version.- The CLI fetches the latest exchange rates, translates all text, and applies charm rounding.
Upload the public-ja folder to your CDN or static host under the /ja/ path. Your sitemap should now include https://yourstore.com/ja/ URLs, giving you a clear signal to search engines.
7. Testing the Implementation
- Local Test – Open the site in a browser, open dev tools, and run
SiteLocaleAI.setLanguage('ja'). Verify that all text and prices update instantly. - Crawler Test – Use Google’s URL Inspection tool on a pre‑rendered Japanese URL to confirm the HTML contains the translated content.
- A/B Test – Compare conversion rates between the default English version and the Japanese version with localized pricing.
8. Monitoring & Maintenance
- Exchange Rate Updates – SiteLocaleAI pulls rates daily. If you need more frequent updates, set the
rateRefreshIntervaloption. - Translation Quality – Periodically review the LLM output, especially for product names and legal text. You can provide custom prompts via the
translationPromptconfig. - Analytics – Track locale‑specific traffic in Google Analytics by adding a custom dimension for
language.
9. Next Steps
You now have a fully localized Japanese storefront with psychologically rounded prices and SEO‑ready pages. The same approach works for any market—just change the currency and rounding settings.
Ready to go live? Try SiteLocaleAI today and unlock global growth without the overhead of third‑party translation services.
Internal Resources
- Detailed setup guide: https://sitelocaleai.com/docs/quick-start
- SEO pre‑rendering documentation: https://sitelocaleai.com/docs/seo-prerender
Happy selling in Japan!