Tutorial

Localize Your E‑Commerce Store for Japan with SiteLocaleAI

Published August 1, 2026

Localize Your E‑Commerce Store for Japan with SiteLocaleAI

Localize Your E‑Commerce Store for Japan with SiteLocaleAI

Expanding into the Japanese market is a great growth opportunity, but it comes with three technical hurdles:
1. Full‑page translation that search engines can index.
2. Accurate price conversion with psychological rounding (e.g., ¥9,800 instead of ¥9,823).
3. Zero friction integration across any front‑end framework.

SiteLocaleAI solves all three with a single, drop‑in JavaScript library that runs on your own LLM API keys. Below is a step‑by‑step tutorial for a typical Shopify‑or‑WordPress‑based store.

1. Install the Library

# Using npm (optional – you can also load the CDN directly)
npm install @sitelocaleai/core

If you prefer a CDN, add the following script tag to the <head> of your HTML:

<script src="https://cdn.sitelocaleai.com/v1/sitelocaleai.min.js"></script>

Note: The library is framework‑agnostic. It works with React, Vue, plain HTML, or any CMS that can serve a <script> tag.

2. Configure Your LLM API Keys

SiteLocaleAI does not host any model; you provide your own API key (Claude, GPT‑4o‑mini, etc.). Store it securely, e.g., in an environment variable.

// locale-config.js
export const LLM_CONFIG = {
  provider: "openai", // or "anthropic"
  apiKey: process.env.LLM_API_KEY,
  model: "gpt-4o-mini",
};

3. Initialize the Translator

import { SiteLocaleAI } from "@sitelocaleai/core";
import { LLM_CONFIG } from "./locale-config.js";

const locale = new SiteLocaleAI({
  apiKey: LLM_CONFIG.apiKey,
  model: LLM_CONFIG.model,
  targetLang: "ja",
  // Optional: custom prompt for e‑commerce tone
  systemPrompt: "Translate product descriptions for a Japanese audience, keep brand voice, and use polite form.",
});

// Auto‑translate the whole page once DOM is ready
window.addEventListener("DOMContentLoaded", () => locale.translatePage());

All visible text nodes are sent to the LLM, translated, and swapped in‑place. Search engines see the translated HTML after the CLI pre‑render step (see below).

4. Localize Prices with Psychological Rounding

Japanese shoppers expect prices to end in “800”, “900”, or whole000”. SiteLocaleAI provides a helper that you can plug into your price‑display component.

/**
 * Convert USD to JPY and apply charm rounding.
 * @param {number} usd - Price in US dollars.
 * @returns {string} Formatted JPY price, e.g., "¥9,800".
 */
function formatJPY(usd) {
  const rate = 150; // Example static rate; replace with live FX API if needed
  const raw = usd * rate;
  // Psychological rounding: nearest 100, but prefer 800/900 endings
  const remainder = raw % 100;
  let rounded = raw - remainder; // round down to nearest 100
  if (remainder >= 50) rounded += 100; // round up if >50

  // Force 800/900 endings when possible
  const lastTwo = rounded % 1000;
  if (lastTwo < 800) rounded = rounded - lastTwo + 800;
  else if (lastTwo > 900) rounded = rounded - lastTwo + 1000;

  return `¥${rounded.toLocaleString("ja-JP")}`;
}

// Example usage in a product card
const priceEl = document.querySelector(".price");
const usd = parseFloat(priceEl.dataset.usd); // data-usd="19.99"
priceEl.textContent = formatJPY(usd);

Add the data-usd attribute to every price element. The script runs after translation, so the Japanese price appears alongside the translated description.

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines can’t execute client‑side LLM calls. SiteLocaleAI ships a CLI that crawls your site, translates every page, and writes static HTML files for bots.

n Install the CLI globally (optional)
npm i -g @sitelocaleai/cli

# Run the pre‑render for your production build
sitelocaleai prerender \
  --url https://myshop.com \
  --output ./public/jp \
  --lang ja \
  --api-key $LLM_API_KEY \
  --model gpt-4o-mini

The command:
- Visits each route defined in your router.
- Sends the raw HTML to the LLM for translation.
- Writes a static index.html in ./public/jp.
- Rewrites price placeholders using the same formatJPY logic (the CLI can import a tiny Node helper).

Deploy the generated folder to your CDN or static host. Google and Bing will now index the Japanese version as if it were a native site.

6. WordPress Integration (No Node Required)

If your store runs on WordPress, simply install the SiteLocaleAI plugin from the marketplace. The plugin:
1. Enqueues the CDN script.
2. Adds a settings page to paste your LLM API key.
3. Provides a shortcode [sitelocale_price usd="19.99"] that outputs the rounded JPY price.

No npm or build step is needed—perfect for non‑technical teams.

7. Test, Deploy, and Monitor

  1. Local test – Open the dev console and verify that window.locale.isReady becomes true.
  2. A/B test – Serve the original English version to a control group and the Japanese version to a test group. Track conversion lift with Google Analytics.
  3. SEO audit – Use site:myshop.com/ja in Google Search to confirm that the pre‑rendered pages are indexed.

8. Next Steps

  • Dynamic currency rates – Hook the formatJPY function to a daily FX API.
  • Multi‑language support – Duplicate the config for zh-CN, ko, etc., and let SiteLocaleAI handle language detection.
  • Custom prompts – Fine‑tune the translation tone for luxury vs. budget brands.

Ready to launch your Japanese storefront? Try SiteLocaleAI today and see how quickly you can go from zero to fully localized, SEO‑ready pages.

[Explore the docs → https://sitelocaleai.com/docs]
[Read the CLI guide → https://sitelocaleai.com/docs/cli]

Try SiteLocaleAI now – sign up for the $5 Indie plan, upload your LLM key, and watch your store speak Japanese in minutes.

Back to blog