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

[te2shop]

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

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

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

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

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

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

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

よろしくお願いします。

[st_mh]

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

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

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

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

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

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

-----

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

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

当然ながら、別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も用意しておくと良いかと思います。

[te2shop]

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

---

@st_mh さんは書きました:

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

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

---

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

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

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

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

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

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

[st_mh · Accepted solution]

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

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

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

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

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

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

--

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

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

◎方法1

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

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

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

{%- 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

メインテーマでの調整

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

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

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

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

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

[te2shop]

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

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

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

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

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

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