Localizing Your E‑Commerce Store for Japan with SiteLocaleAI
Expanding into the Japanese market can be a game‑changer, but it requires more than a simple translation. Japanese shoppers expect prices in JPY and often respond better to psychological rounding—prices that end in 800, 900, or 990 yen, for example. In this tutorial we’ll walk through a complete workflow using SiteLocaleAI, a self‑hosted JavaScript library that leverages your own LLM API keys to translate content, localize prices, and boost international SEO.
1. Prerequisites
| Requirement | Detail |
|---|---|
| Node.js (optional) | Needed only if you use the CLI for SEO pre‑rendering. |
| LLM API key | Claude, GPT‑4o‑mini, or any compatible model. |
| SiteLocaleAI library | Install via npm or CDN. |
| E‑commerce platform | React, Vue, Shopify, WordPress, etc. |
| Access to product data | Price in USD (or your base currency). |
Tip: SiteLocaleAI works without a build step—just drop the script tag into your HTML and you’re ready.
2. Adding the Drop‑in Library
For a framework‑agnostic setup, include the CDN script in the <head> of your pages:
<head>
<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>
<script>
// Initialise with your LLM API key (kept server‑side for security)
SiteLocaleAI.init({
apiKey: 'YOUR_LLM_API_KEY',
defaultLang: 'en',
targetLang: 'ja',
priceCurrency: 'JPY',
roundingStrategy: 'charm' // see Section 4
});
</script>
</head>
If you prefer a module bundler, install via npm:
npm install @sitelocaleai/core
import SiteLocaleAI from '@sitelocaleai/core';
SiteLocaleAI.init({ apiKey: process.env.LLM_KEY, targetLang: 'ja', priceCurrency: 'JPY', roundingStrategy: 'charm' });
The library automatically scans the DOM for elements marked with data-sitelocale and translates them on‑the‑fly.
3. Marking Up Your Product Listings
Add the data-sitelocale attribute to any text that needs translation and to price elements that require localisation.
<div class="product" data-sitelocale="product">
<h2 data-sitelocale="title">Organic Cotton T‑Shirt</h2>
<p data-sitelocale="description">Soft, breathable, and perfect for everyday wear.</p>
<!-- Base price in USD (stored in a data attribute) -->
<span class="price" data-price-usd="29.99" data-sitelocale="price"></span>
</div>
When the page loads, SiteLocaleAI will:
1. Translate the title and description to Japanese.
2. Convert the USD price to JPY using the latest exchange rate.
3. Apply charm rounding (see next section).
4. Psychological Rounding (Charm Rounding)
Japanese consumers are accustomed to seeing prices ending in 800, 900, or 990 yen. SiteLocaleAI’s roundingStrategy: 'charm' does exactly that:
// Inside the library (simplified)
function charmRound(jpy) {
const remainder = jpy % 100;
if (remainder < 30) return jpy - remainder + 800; // round down to 800
if (remainder < 80) return jpy - remainder + 900; // round up to 900
return jpy - remainder + 990; // otherwise round to 990
}
The final price is rendered with a yen sign and proper thousands separators:
<span class="price">¥9,800</span>
If you need a different strategy, you can switch to roundingStrategy: 'nearest' or implement a custom function via the priceFormatter hook.
5. SEO‑Friendly Pre‑Rendering with the CLI
Search engines still struggle with client‑side translations. SiteLocaleAI offers a CLI that pre‑renders translated pages, allowing crawlers to index the Japanese version directly.
n Install the CLI globally (optional)
npm i -g @sitelocaleai/cli
# Run the pre‑render for the /products route
npx sitelocaleai prerender --lang ja --output ./dist/ja
The CLI:
- Fetches your site’s HTML.
- Sends it through the LLM for translation.
- Applies price localisation.
- Writes static HTML files to ./dist/ja.
Deploy the generated folder to your CDN or static host. Google and Bing will now see fully translated, indexable pages.
For more command‑line options, see the CLI docs.
6. WordPress Integration (No Node Required)
If your store runs on WordPress, SiteLocaleAI provides a lightweight plugin that injects the script and handles price localisation via shortcodes.
- Install the plugin from the WordPress admin → Plugins → Add New → Search “SiteLocaleAI”.
- Configure the API key and target language in Settings → SiteLocaleAI.
- Use the shortcode
[sitelocale_price usd="29.99"]in your product description.
<?php echo do_shortcode('[sitelocale_price usd="29.99"]'); ?>
The plugin fetches the exchange rate, applies charm rounding, and outputs ¥9,800 automatically.
7. Testing & Quality Assurance
- Visual check: Open the page in Chrome DevTools, switch the device toolbar to “Mobile”, and verify Japanese text and rounded prices.
- Automated test: Use Cypress to assert that the price element contains the correct
¥value.
cy.get('.price').should('contain.text', '¥9,800');
- SEO audit: Run a Lighthouse audit on the pre‑rendered
/japage. Confirm that the<html lang="ja">attribute is present and that the meta description is translated.
8. Going Live
- Deploy your updated front‑end (or static
./dist/jafolder). - Update your sitemap to include the
/ja/URLs. - Submit the new sitemap to Google Search Console.
Your Japanese shoppers will now see a fully translated store with prices that feel natural and persuasive.
9. Recap
- Drop‑in, framework‑agnostic JS library.
- Self‑hosted: you keep control of your LLM keys.
- Psychological price rounding (charm) for JPY.
- SEO‑friendly pre‑rendering via CLI.
- WordPress plugin for non‑technical owners.
Ready to boost your Japanese sales? Try SiteLocaleAI today and watch your conversion rates climb.