ShopifyのLangShopのメモ(2023)

OS2.0以前に多少触っていたものの、2023年に開発ストアに入れて試そうとすると色々手間取ったのでメモとして。
以前の記憶が正しいかは微妙なので、実は特に変更されていない事柄かもしれません。

前提

• Shopifyの開発ストア
• LangShopで1言語追加する

以前の記事はこちら。

• ShopifyのLangShopに関して – WEBUTUBUTU

参考

• Multi Currency & Multilingual App | Language Translation| Shopify アプリストア
• [Shopify] Getting started | Aheadworks Help Center

メモ

調べて試したことを色々と。

開発ストアとLangShopのプラン

Langshopの全機能を使う場合、開発ストアであっても有料プランを選ぶ必要がある(多分)。
クライアントに譲渡してShopifyの有料プランが始まるとそのまま請求が始まるはず(多分)。

LangShopテーマの必要性

LangShop管理画面の「Translations > Theme」に移動し、「Duplicate」でLangshop専用テーマを作らないと、どのプランであっても「Static text elements(直接Liquidファイルに書かれたテキストを翻訳する機能)」での翻訳が実行できない。

重複するStatic text elements

Static text elementsで翻訳されると以下のように<ls-static-123456>のようなLangShop専用タグがHTMLタグの中に出力される。

<p><ls-static-123456>これはproduct.liquidに直接記載したテキストです。</ls-static-123456></p>

上記のコードをそのまま複数のファイルに書くと、LangShopで翻訳した部分のみ全て連動する模様。
ファイル上の文言を変更しただけではLangshopに影響はなく、翻訳を実行した際のファイルの文言に基づいて翻訳が作成され、それが全ての箇所に表示される。

言語の反映

LangShopで言語追加後、Shopifyの「Settings > Markets」でマーケットごとに追加した言語を有効化する必要がある。
追加しないと言語の横に「not connected」と接続されていない旨が表示される。
not connectedでもpublishedからunpublishedに戻せばプレビューでは追加した言語が確認できる模様。

結び

以前はボタン一つで色々済んでいた覚えがあったのですが、今回試すと色々必要な操作が増えた印象でかなり時間がかかりました。