ページを Shopify に公開する

始める前に確認すること

必要なのは、対象ワークスペースのアプリ作成・設定を担当できる人、対応するインストール用 ZIP、Shopify でアプリを設定・インストールできる担当者です。ストアの組織・インストール対象範囲が接続用アプリの条件に合うかも確認します。

ページ送信は Shopify 側の公開操作です。送信先ストア、ページの内容、公開担当を先に決めてください。Ptengine AI で独自ドメインへ先に公開しなくても、有効なプレビューリンクを使える場合があります。本文では一ページずつ手動で送信する流れを説明します。

初回のみ：専用アプリを準備する

1. 導入担当者から対象環境向けの ZIP と、その版に対応する Shopify 接続設定を受け取ります。ファイル名だけで最新版や対応状況を判断しないでください。
2. 「アプリを探す → カスタムアプリ管理 → 新規」を開き、アプリ名を入力して ZIP を選びます。作成・アップロード・デプロイはCustom App の開発と公開の schema 別手順に従います。
3. アプリ詳細の「基本情報」でアプリのアドレスを確認します。Shopify の Dev Dashboard で「Apps → Create app → Start from Dev Dashboard」から接続用アプリを作成し、名前を設定します。既存の接続用アプリを使う場合はその詳細を開きます。Versions で対象版に必要な URL と権限を設定して Release し、App settings で Client ID と Client secret を確認します。画面の詳細はShopify の公式手順を参照してください。
4. クライアント ID とシークレットを使う接続方式では、対応する SHOPIFY_CLIENT_ID を「設定」、SHOPIFY_CLIENT_SECRET を「シークレット」に保存します。使用するパッケージの宣言と一致することを担当者が確認します。
5. 設定変更後は「バージョン」から対象版を再デプロイし、成功を確認します。公開状態も確認してからアプリを開きます。ブラウザーの再読み込みだけでは設定の反映確認になりません。

ZIP や接続設定が手元にない場合は、ワークスペース名と Shopify の対象ストアを導入担当者へ伝えて準備を依頼します。すでに設定済みなら、次の接続手順から進めてください。

クライアント ID / シークレットを使う専用パッケージの接続設定例は次のとおりです。導入担当者が使用版の説明と一致することを確認してから設定してください。アプリのアドレスは対象アプリの実際の HTTPS アドレスへ置き換えます。

別の接続方式の設定や、他のアプリ・過去環境の URL を混ぜないでください。Shopify 側で権限を変更した場合は、ストア側で追加の承認が必要になることがあります。

ストアを接続して対象を確認する

1. 専用アプリを開き、ストア欄に your-store.myshopify.com などの Shopify ストアアドレスを入力し、「ストアを接続」を押します。独立した公開サイトのドメインと、Shopify の接続先ストアを混同しないでください。
2. 開いた Shopify ウィンドウで対象ストアと要求権限を確認し、インストールを承認します。権限がなければ、ストア所有者またはインストール担当者に依頼します。
3. 接続完了の表示を確認してウィンドウを閉じ、Ptengine 側でも接続済みと対象ストア名を確認します。
4. 複数ストアがある場合は、上部の選択欄で今回の送信先を明示的に選びます。既定の先頭ストアを送信先とは決めつけないでください。

Shopify 側から開いた際に接続コードが表示される版では、Ptengine 側の「接続コードで接続」を選び、表示されたコードで接続できます。無効・使用済み・期限切れと表示されたら、Shopify 側で新しいコードを取得します。有効期間は使用中の画面案内に従ってください。

ページを追加して公開先を選ぶ

1. ソースを準備します。公開済みページならその URL、未公開ならエディターの「プレビュー」を開き、プレビュー画面の「リンクをコピー」から完全なリンクを取得します。ログインが必要なエディターの URL は使いません。
2. 専用アプリの「ページを追加」に進み、URL を貼り付けて次へ進みます。PC とスマートフォンのソースを別々に指定できる版では、それぞれ対応するリンクを指定します。
3. ストアの /pages/ 以下のパスを入力し、使用可能な文字と重複チェックを確認します。すでに別のページが使っている場合は、未使用のパスに変更します。
4. ページテンプレートと、ストアのヘッダー・フッターを付けるかを選びます。ソース側のナビゲーションは自動で削除されないため、二重表示に注意してください。
5. ページのアクセスドメインを選べる版では、実際に利用する公開サイトのドメインを選択します。独立ストアフロントを手動指定する場合も、表示された最終 URL を確認します。この指定だけでは DNS やストア側の配信設定は変わりません。
6. 対象ストア、最終 URL、表示方式、内容を確認して「反映」を実行します。成功後、対象ページが一覧に表示されることを確認します。

公開後の確認と内容更新

1. 一覧の対象行からストアで開く操作を選び、実際の公開 URL を確認します。PC とスマートフォンで表示、動き、リンク、フォーム、計測を確認してください。
2. ソースを修正したら、一覧の対象行で更新します。公開 URL がソースの場合は、まず Ptengine AI 側で変更を公開し、元の URL に新内容が表示されることを確認します。
3. プレビューリンクを使った場合は、新しいプレビューを作成して完全なリンクをコピーし、更新画面で求められた欄へ貼り付けます。
4. 更新成功と最終更新時刻を確認し、同じストアの URL を開き直して変更箇所を検証します。

内容更新と、パス・テンプレートなどの設定変更は分けて操作します。ソースの修正は Shopify へ自動同期されません。本ガイドは一ページずつ手動送信する流れであり、一括送信や自動同期を保証するものではありません。

設定の編集・公開終了・接続解除

1. パス、表示方式、テンプレートを変える場合は、一覧の行末 ··· → 編集 を開きます。
2. 変更して「保存して反映」を実行します。この操作ではソースも読み直すため、意図しないソース変更が含まれていないか確認します。プレビューの再入力を求められたら新しいリンクを使います。
3. URL を変えた場合は新しい URL を開き、広告・リンク・QR コードなど参照先の更新も確認します。旧 URL の自動転送を前提にしないでください。
4. 公開を終了する場合は行末メニューの「非公開にする」を選び、確認画面のストア、ページ名、URL を確認します。この操作は Shopify の対象ページを削除するため、再利用するソースを残してから実行します。終了後は一覧と公開 URL の両方を確認します。

ストアの接続解除は別操作です。解除後はその接続で送信できなくなりますが、すでに Shopify に作成されたページを一括削除する操作ではありません。

接続・読込・計測の問題を調べる

同じプロファイルのタグをテーマとページに重ねて追加しないでください。設置確認の手順で実際の通信・データを検証します。問題が続く場合は、アプリ版、ストア、ソースの種類、操作、エラーを導入担当へ伝えます。