# 開発中テーマで独自作成したテンプレートページのプレビュー方法

**URL:** <https://community.shopify.com/t/topic/207236>\
**Category:** 技術的なQ＆A\
**Created:** [April 11, 2023, 5:18am UTC](https://community.shopify.com/t/topic/207236 "2023-04-11T05:18:23Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

開発中の有料テーマ（Be Yours）で独自作成したテンプレートページをプレビュー共有する際の技術的な課題について議論されています。

**問題点：**
- 「Share preview」機能では、デフォルトページのみプレビュー可能
- 独自作成したテンプレートページはプレビュー対象として選択できない
- 開発中テーマのテンプレート選択肢に、新規作成したテンプレートが表示されない

**提案された解決策：**

1. **条件分岐による確認**
   - 特定パラメータ（`?test_template=on`）付与時のみ独自テンプレート内容を表示
   - メインテンプレートファイルにLiquidコードで条件分岐を追記

2. **メインテーマでの調整**
   - メインテーマ内に開発中テーマと同名のテンプレートファイルを作成
   - テンプレート選択肢から選択可能にし、デフォルトと同じ内容を表示
   - 本番公開時に独自テンプレートファイルを適用

**結果：**
質問者は「方法２」で自己解決。ただし、イレギュラーな方法であり、クライアントや運営担当者が管理画面を触らずにプレビュー確認できる標準的な機能の必要性が示唆されています。

<div class="post-metadata">

**Author:** ![te2shop](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@te2shop](https://community.shopify.com/u/te2shop)\
**Post date:** [April 11, 2023, 5:18am UTC](https://community.shopify.com/t/topic/207236/1 "2023-04-11T05:18:23Z")

</div>

お世話になっております。

すでにshopifyサイトを運営中の店舗で、新規で有料テーマ(Be Yours)でのリニューアル作業を行なっています。

私自身がパートナーとしてコラボレーターアカウントで作業しております。

現在、コード編集を含めテーマのカスタマイズ中なんですが、作業途中のサイトをプレビューで確認してもらう際、プレビュー画面のリンクをコピーして共有する機能はあるかと思うのですが、

その画面だとデフォルトのページしかプレビュー出来ず、独自で作成したテンプレートページがプレビュー出来ません。

メニューのオンラインストア＞テーマ＞テーマライブラリー＞該当の開発中テーマの「カスタマイズ」からではなく、

商品ページやブログ記事、“ページ” などで独自に作成したテンプレートのページをプレビューして確認してもらう方法はありませんでしょうか。

よろしくお願いします。

---

<div class="post-metadata">

**Author:** ![st\_mh](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@st\_mh](https://community.shopify.com/u/st_mh)\
**Post date:** [April 11, 2023, 7:31am UTC](https://community.shopify.com/t/topic/207236/2 "2023-04-11T07:31:15Z")

</div>

![st_mh_0-1681196883742.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/d/4d21ef1c98df7fb6a64b088d11194c76520a2460.png)

「･･･」ボタンクリック後のプレビューより、選択したテーマのプレビューが開きます。

この際、URLにパラメータ（「?\_ab=0&\_fd=0&\_sc=1」）が付いてきますが、このパラメータ付きURLならプレビューが共有できる訳でもないと思っています。  
そもそもこのパラメータにはテーマ管理IDが含まれず、どのテーマをプレビューしても同じパラメータです。

新規作成のテンプレートが確認出来ないという状況のようですが、このプレビューを選択する限り、テーマ内の設定やファイルが全て反映されるはずです。

また、閲覧中テーマの確認方法です。

headタグ内に、var Shopifyで諸々定義されています。この値の中に、テーマ名が含まれています。

コンソール画面で「Shopify.theme」と入力すればすぐ確認可能です。

 ![st_mh_1-1681197917657.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/5/45aa339661e5e106f5f019bbe718cc11dd4b1a52.png)

* * *

このプレビューの仕様ですが、おそらくキャッシュによって、表示テーマ情報が保存されます。

そのため同一ブラウザに限り、新しいタブからでも選択したテーマのプレビューが継続されます。

当然ながら、別PCのブラウザ、別ブラウザ、プライベートモードでは、テーマ情報のキャッシュが共有されないため、閲覧ページはメインテーマになっているはずです。

先方に開発テーマを確認いただくならば、開発中テーマのプレビューを選択頂くことになるかと思います。

ちなみに、元のテーマ表示に戻したい時は、再度メインテーマを選びなおすと良いです。

または、キャッシュが切れるとメインテーマが表示されますが、保存期間は不明で、体感だと2～3日位です。

* * *

（追記）

追記です。  
他のPC、他のブラウザを対象とした、テーマを指定する方法がありました。

基本形式は以下です。

ttps://ドメイン/?\_ab=0&\_fd=0&\_sc=1& **preview\_theme\_id** = **00000**

preview\_theme\_idの値に、開発中テーマのIDを設置します。

このURLを開いたブラウザでは、自動的に表示テーマが保存されます。

実際に同PCですが、シークレットモード、メインではないブラウザにて、テーマが切り替わったことを確認しました。

IDの調べ方は、上にも書いた通り、テーマのプレビュー後にコンソール画面で「Shopify.theme.id  
」で必要な情報が取得できます。

先方に確認しただくに当たり、上記URLを送付すれば即確認可能です。携帯端末からも可能ですね。

ただし、自動的に開発テーマの表示状態が保存されるので、いつでも戻せるよう、メインテーマID付きのURLも用意しておくと良いかと思います。

---

<div class="post-metadata">

**Author:** ![te2shop](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@te2shop](https://community.shopify.com/u/te2shop)\
**Post date:** [April 11, 2023, 8:16am UTC](https://community.shopify.com/t/topic/207236/3 "2023-04-11T08:16:18Z")

</div>

ご丁寧にありがとうございます。

> [@st\_mh](#):
>
> さんは書きました:
> 
> ![st_mh_0-1681196883742.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/d/4d21ef1c98df7fb6a64b088d11194c76520a2460.png)
> 
> 「･･･」ボタンクリック後のプレビューより、選択したテーマのプレビューが開きます。 この際、URLにパラメータ（「?\_ab=0&\_fd=0&\_sc=1」）が付いてきますが、このパラメータ付きURLならプレビューが共有できる訳でもないと思っています。 そもそもこのパラメータにはテーマ管理IDが含まれず、どのテーマをプレビューしても同じパラメータです。

↑ここでのプレビューのURLでは共有出来ないことは存じておりますが、共有する際はここではなく、、  
このプレビューを開いた後に画面下に表示される「Share preview」ボタンを押下して表示されるリンクを共有しております。

 ![FireShot Capture 065.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/7/a/67aa19c154c1a1b0acf83461f1c3c54627b6f589.png)

 ![FireShot Capture 065-2.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/7/47f90d2330a3841f8c47e1ad3bbeaaa46e468900.jpeg)

ここのリンクで共有する場合でしたら、別のPCでもブラウザでも当然キャッシュ関係なく、表示画面で記載の通り2日間です。

しかしながら、最初の質問の通り、割り当てられているデフォルトのページしかプレビュー出来ず、独自で作成したテンプレートページがプレビュー出来ません。

公開前のテーマなので、既存のページを作成したテンプレートに割り当てることも出来ず、何か方法があればと思い質問しました。

もし方法があるようでしたら教えていただければ幸いです。

質問が下手で申し訳ありません。

---

<div class="post-metadata">

**Author:** ![st\_mh](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@st\_mh](https://community.shopify.com/u/st_mh)\
**Post date:** [April 12, 2023, 12:51am UTC](https://community.shopify.com/t/topic/207236/4 "2023-04-12T00:51:15Z")

</div>

すいません。早とちりしていました。

ページ内のここの部分の件ですか？

一旦、そうだとして回答しますが、間違っていたら指摘してください。

 ![st_mh_0-1681203306860.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/3/4378ae6e95868ee5b0589b8a8c798dfd53b5c54a.png)

この部分は余り触ることがなかったので、こちらでも確認しました。

どうもメインテーマのテンプレートのみ選択可能なようですね。

しかも、現時点でテンプレートの変更をする訳にいかないということでしょうか。

–

デザイン等確認していくに当たり、以下2通りが考えられます

1. 条件分岐で確認
2. メインテーマを少々操作しつつ、開発中テーマで確認

◎方法1

こちらは特定パラメータ付与時のみ、独自テンプレート内容を表示させる方法です。

そのパラメータはこちらとします「?test\_template=on」。

メインテンプレートファイル内にて、以下のような条件分岐を追記します。

```markup
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%}
{%- assign get_query_value_by_key = '' -%}
{%- if pageUrl contains "?" -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last | replace:'=','&' -%}
  {%- assign tmp = pageQuerystring | split:'&' -%}
  {%- for kv in tmp -%}
      {%- if kv == 'test_template' -%}
          {%- assign get_query_value_by_key = tmp[forloop.index] -%}
          {%- break -%}
      {%- endif -%}
  {%- endfor -%}
{%- endif -%}

{% if get_query_value_by_key == 'on' %}
  テストパラメータがon
  独自テンプレート内容を記述
{% else %}
  パラメータ無し
  デフォルトテンプレート内容を記述
{% endif %}

```

パラメータkey名を変更する時はこちらを修正してください。{%- if kv == ‘test\_template’ -%}

本公開時には、メインテーマで独自テンプレートファイルを作成し、割り当てたいページに適用させるという流れです。

* * *

◎方法2

メインテーマでの調整

- まず、新規にテンプレートファイルを作成します。名称は開発中テーマ内で作成中の独自テンプレートと同名にします。
- 内容はメインテーマのデフォルトテンプレートと同じにしておきます。
- テスト確認したい任意のページに対し、このテンプレートを選択します。

こちらの処理にて、テンプレート選択候補から独自テンプレートの割り当てが可能です。

この時点で、独自テンプレートの内容はデフォルトと同一ですので、メインテーマを閲覧中のお客様にとっては、表示に不備はない状態が維持できます。

そして、開発テーマのプレビュー中は、作成中のテンプレート内容が反映されると。

あとは本公開時には、メインテーマの独自テンプレートに内容をペーストすれば速やかに適用できるでしょう。

---

<div class="post-metadata">

**Author:** ![te2shop](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@te2shop](https://community.shopify.com/u/te2shop)\
**Post date:** [April 12, 2023, 1:10am UTC](https://community.shopify.com/t/topic/207236/5 "2023-04-12T01:10:30Z")

</div>

ご返答ありがとうございます。

昨晩、どうにか自己解決出来たのですが、まさに回答いただいた「方法２」のやり方でした。

大変ご丁寧に説明いただきありがとうございました！

でも、結構イレギュラーな方法ですよね。

個人的には、新テーマに切り替える時など、クライアント様、特に運営担当者ではなく管理画面を触らないようなオーナー様などにプレビュー画面を見ていただく際には、結構必要になりそうな事だと思ったんですが、どうなんでしょうかね。

ともあれ、二つも方法を探っていただきありがとうございました。