ページURLをliquidへ埋め込む方法による差異

日本語 ディスカッション Shopify テーマ

Topic summary

Shopifyテーマで多言語対応ページのURLをLiquidに埋め込む際の実装方法について議論されています。

2つの実装方法:

  • 方法A: href="{{ pages.stores.url }}" (Liquidオブジェクトを使用)
  • 方法B: href="/pages/stores" (ハードコードされたパス)

主な違い:
方法Bでは、英語サイト表示時に言語プレフィックス(/en/)が付与されず、xxx.myshopify.com/pages/storesのままになる可能性があります。方法Aならxxx.myshopify.com/en/pages/storesと正しく言語対応URLが生成されます。

パフォーマンスへの影響:
方法Aはpagesオブジェクトを呼び出すため、理論上は若干の処理負荷がありますが、実際のユーザー体感速度への影響は大多数のユーザーにとってほぼ無視できるレベルとされています。

結論:
多言語対応を考慮する場合、方法A ({{ pages.stores.url }}) の使用が推奨されており、質問者もこの方向で実装を進める意向を示しています。Chrome DevToolsなどでの詳細な検証も提案されています。

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Shopifyのページで作成したURLを、テーマのliquidに埋め込む場合。

多言語対応を想定するのであれば、下記のような実装が正しいと思いますが。（pagesのURLは「/pages/stores」だとして）

A、

href="{{ pages.stores.url }}"

B、

href="/pages/stores"

この「A」と「B」の2つでユーザー側のレスポンスに違いはないものでしょうか？
感覚的には、「A」の方がpagesのobjectを呼び出してる分。影響がありそうにも感じます。
ただ、生成時にサーバーサイドでコンテンツをキャッシュしているはずなので大多数のユーザーには違いはないような気もしています。

2

環境によってはマッチしない回答になるかもしれません。

その場合は、申し訳ございません。

ストアのドメインを xxx.myshopify.com とし、

日本語をデフォルト、

英語を追加したとします。

この時、英語サイトを表示するURLは、

xxx.myshopify.com/en/

になるかと思います。

B、

href="/pages/stores"

こちらの方法ですと、

英語サイトを表示している際に、

該当する箇所のリンク先URLは、

xxx.myshopify.com/en/pages/stores にはならず、

xxx.myshopify.com/pages/stores のままになってしまうのではないかと思われます。

導入されている翻訳アプリなどで、

この点、うまく解決されるようでしたら、

スルーいただいて大丈夫です。

この「A」と「B」の2つでユーザー側のレスポンスに違いはないものでしょうか？

感覚的には、「A」の方がpagesのobjectを呼び出してる分。影響がありそうにも感じます。
ただ、生成時にサーバーサイドでコンテンツをキャッシュしているはずなので大多数のユーザーには違いはないような気もしています。

おっしゃる通りかと思います。
また、サーバキャッシュがない状態でのアクセスであったとしても、
処理数が非常に多いループ処理でもない限り、
ユーザーの体感スピードに影響が出るほどのレスポンスの遅さはないようにも思います。
(具体的な数字を挙げることはできないのですが。。。)

ご参考まで。
(キュー田辺)

1 Like
3

回答ありがとうございます！

おっしゃる通り、そこまで差異はなさそうですので。

多言語対応、だとやはり

A、

href="{{ pages.stores.url }}"

が良さそうですね。

Shopify の chrome devtoolなどで、A・Bで呼び出しによる差異があるのか時間があれば深掘りしてみようと思います。

1 Like