Shopifyのテーマライブラリ内テーマで追加した代替テンプレートのプレビュー確認方法

以前はできないと思っていたのですが、思いついて別方向から調べたら方法があったのでメモとして。

実現したいこと

• Shopifyのテーマライブラリ内のテーマに代替テンプレートを追加した際に、プレビュー用リンクで該当のテンプレートが反映された状態を表示を確認したい

補足

Shopifyの仕様として、各ページの設定画面で指定可能なテンプレートはライブテーマ内に存在する代替テンプレートに限られます。
テーマライブラリ内に新たにテンプレートを追加しても各ページ詳細画面で設定できず、ライブテーマのようにプレビューでは確認ができません。

テーマエディタでは確認できるため関係者が確認する際には致命的な問題になりにくいですが、テーマエディタに入る権限がない人が確認する必要がある場合には問題になり得ます。

対応策

• Templates

Alternate templates can be rendered on the storefront with the view URL parameter. This parameter should be in the format of ?view=[template-suffix], where [template-suffix] is the template’s alternate name.

For example, given the product.alternate.json template from the previous section, and a product called Example product, you can render that product with that template using the following:

/products/example-product?view=alternate

上記のようにviewパラメータを追加することで、指定したテンプレートが反映された状態でプレビューでも確認可能です。

例えばtestという名称でページ用代替テンプレートを追加した場合、以下のようにviewパラメータをすれば確認できます。

https://example.myshopify.com/pages/my-page?view=test

別案

前述以外の方法としては以下の方法があります。

1. テーマライブラリ内のテーマに代替テンプレートを追加する
2. ライブテーマにも前項と同じ名称で代替テンプレートを追加する
3. 各ページ詳細画面で前項の代替テンプレートを設定する

上記のようにすればライブテーマとテーマライブラリ内テーマに同じテンプレートが存在することになり、テーマライブラリ内テーマの編集内容を反映した状態でプレビューによる確認が可能です。

結び

カートパーマリンクなどはパラメータで色々設定できるので、テンプレートもできるのではと思って調べたら見つけた次第です。