# PageFlyとShopifyテーマの連携方法

### 概要

このガイドでは、ヘッダーとフッターの管理、テーマの切り替え、一般的な問題のトラブルシューティングの詳細を含め、[PageFlyページビルダーがShopifyテーマとどのように連携するか](https://help.pagefly.io/manual/switch-theme-process-in-pagefly/)を説明し、シームレスな統合を実現します。

### 必要条件

* [PageFlyアプリ](https://apps.shopify.com/pagefly)をインストールする
* 希望のテーマを公開または選択する
* Shopifyの基本的な知識

### PageFlyがテーマ拡張機能と連携する方法

PageFlyテーマ拡張機能は、PageFlyが現在のShopifyテーマと適切に連携するために有効にする必要がある必須の拡張機能です。

テーマ拡張機能が無効になっている場合、警告が表示されることがあります：

* PageFlyダッシュボードの場合：

![](/files/YMAvXAQBA1ID5DA35G2g)

* PageFlyエディターの場合：

![](/files/eBvNRXfHvXi7FBw30DGl)

#### PageFlyテーマ拡張機能を有効にする方法

以下のいずれかの方法を使用して、PageFlyテーマ拡張機能を有効にできます：

**1. Shopifyダッシュボード経由**

* Shopifyダッシュボード > オンラインストア > テーマ に移動し、現在のテーマセクションへ進み、「カスタマイズ」ボタンをクリックします。
* テーマエディターで、左側のメニューにある「アプリ埋め込み」ボタンを選択します。
* PageFlyテーマ拡張機能を検索し、アプリを有効にします。

![](/files/EBseG2SB9rCJzrzRm84I)

**2. PageFly警告メッセージ経由**

テーマ拡張機能が無効になっていることに関する警告が表示されたら、警告から直接「PageFlyテーマ拡張機能を有効にする」ボタンを選択します。

![](/files/mJ3PvNp4HMmYCUY7kbxX)

**3. PageFlyダッシュボード経由**

* PageFlyダッシュボード > 左メニューの「設定」を選択 > 「テーマアプリ拡張機能」を選択します。
* 「今すぐ有効にする」ボタンをクリックして、テーマ拡張機能を有効にします。

![](/files/QKLCQ3PS2ZX6c2OeXrez)

**4. PageFlyページを公開する**

PageFlyでページを公開すると、「公開」ボタンをクリックしたときにテーマ拡張機能が自動的に有効になります。

![](/files/fezbZD292UtUBxXzkXgK)

#### テーマを切り替える場合はどうすればよいですか？

Shopifyテーマを切り替える際は、上記いずれかの方法でPageFlyテーマ拡張機能を必ず有効にしてください。これにより、新しいテーマがPageFlyページと適切に連携することが保証されます。

### Shopifyでテーマを切り替える方法

#### テーマ切り替えプロセス

* **ステップ1：テーマにアクセスする**

Shopify管理画面から、オンラインストア > テーマへ進みます。

![](/files/zuPdlUhCdUaBeHiiqvkt)

* **ステップ2：テーマを公開する**

テーマライブラリで、使用したいテーマを選択し、「公開」をクリックします。

![](/files/KzL11H9ropFpAl1AIH1o)

注意：試用版テーマには「公開」ボタンが表示されません。公開するにはまずテーマを購入する必要があります。

より分かりやすい視覚的な説明については、以下のビデオチュートリアルをご覧ください。

{% embed url="<https://youtu.be/up8D0ZSCEmQ>" %}

#### PageFlyでのテーマ切り替えプロセス機能

テーマ切り替えプロセス中に、PageFlyページエディターで、作業中のすべてのページの下部右隅に2つのポップアップ通知が自動的に表示されます。これらの通知は、ページのステータスを通知します。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdON82uZGwEPPQjzBaWYn2_P4Zd4ieZf2EC4t-WJJeljnNTI6rn1KR7_9kKGu-EaK5M8SGy7J5csqhAm6aNRn03WuvhJF7a87-pVmY3NbRdYmv-7dD55aW0-7u7y6EEtvUR0XVNY45plAs6-otOMAkeyBT6b0T-3a3wRzkbuLjg-og.png)

下部中央のポップアップにある「詳細を表示」ボタンをクリックすると、すべてのページのステータスの詳細情報が表示されます。

![](/files/ZOglKJ9W1zTSJw2L5p1e)

または、左下のボタン（カスタマーサポートボタンの上）をクリック > 「バックグラウンドプロセス」を選択 > 確認したいプロセスを選択することで、プロセスを確認できます。

![](/files/JDqU0rLAYHzXQoEUzZUy)

#### テーマ切り替え中にページステータスが失敗した場合はどうすればよいですか？

ステータスが失敗と表示された場合、リストの失敗したページをクリックすると、その特定のページにリダイレクトされます。その後、ページを再公開して、テーマ切り替え後にすべてのページが正常に公開されることを確認します。

注意：テーマ切り替えプロセスが完了した後、PageFlyテーマ拡張機能が有効になっているか確認してください。新しいテーマでPageFlyページが適切に機能するためには有効になっている必要があります。

### PageFlyページでShopifyテーマのヘッダー/フッターを非表示にする方法

パスワードページを除いて、PageFlyで作成された通常ページ、ホームページ、コレクションページ、商品ページ、ブログ記事ページで、フッターとヘッダーを非表示にすることができます。

デフォルトでは、ヘッダーとフッターは使用しているShopifyテーマに含まれています。それらを非表示にするには、[ページ設定](https://help.pagefly.io/manual/page-settings)モーダルを開きます。

* **ステップ1：ページ設定モーダルにアクセスする**

PageFlyエディターで、左側のツールバーにある「ページ設定」ボタンをクリックします。

![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeTJTyY3gYnEFAhBjnEJ2JJ1FLpAW6tAioh2W4hVcgJ3QSxzM6lJGBgTxwysQ-hlPAUEe9SO2tJqk6I03p7VRpxUEtxyg-ofZm5iknrT934OHBjwUZncoJpm3vHPNVuigu7qtPHsiOCL1HRK3nnKQkeyBT6b0T-3a3wRzkbuLjg-og.png)

* **ステップ2：ヘッダーとフッターのオプションを無効にする**

ページ設定モーダルが表示されたら、「ヘッダーとフッターを表示」オプションの選択を解除します。変更を適用するには、「保存」ボタンをクリックします。

![](/files/ASSlAkGxZthBm79xL5ZR)

* **ステップ3：ページを公開する**

設定を保存した後、「公開」ボタンをクリックして、ライブビューで変更を確認します。

### ユースケース

#### カスタムページ全体で一貫性のあるヘッダーとフッターを管理する

PageFlyを使用してカスタムページを作成する際、ブランドアイデンティティにとって一貫性のあるヘッダーとフッターを維持することが非常に重要です。一貫性を維持するために、PageFlyページ設定でヘッダーとフッターを有効にできます。これにより、カスタムページがストアの他のデザインと一致することが保証されます。または、Shopifyのデフォルトヘッダーとフッターのない独自のレイアウトを好む場合は、ページ設定でそれらを無効にし、変更を公開して結果を確認できます。

#### Shopifyテーマ切り替え後、カスタムPageFlyページが正しく表示されない

Shopifyテーマを切り替えると、カスタムPageFlyページの表示に問題が発生することがあります。これを解決するには、Shopifyテーマエディター内でPageFlyテーマ拡張機能を有効にすることが不可欠です。これにより、新しいテーマとPageFlyのカスタマイズとの互換性が確保されます。

さらに、PageFlyのバックグラウンドプロセスを監視することで、失敗したページ更新を特定できます。ページが正しく表示されない場合は、PageFlyエディターから再公開して、適切な機能と外観を復元できます。

#### デフォルトの商品詳細を非表示にする

商品ページをさらにカスタマイズするために、Shopifyのデフォルトの商品詳細を非表示にできます：

Theme OS 1.0の場合

* ステップ1：左メニューの「ページ設定」アイコンをクリックします。
* ステップ2：「テーマのセクション」までスクロールし、「デフォルトの商品詳細を表示」を無効にして、「保存」をクリックします。

![](/files/Jakrcn3NAmlIiqW9QoMb)

新しいテーマ（OS 2.0）の場合：

* ステップ1：左メニューの「ページ設定」アイコンをクリックし、下にスクロールして「テーマエディターに移動」を選択します。

![](/files/4PWy1xc7uwqyDKQDgXbv)

* ステップ2：テーマエディターで、デフォルトの商品詳細の横にある目のアイコンをクリックして非表示にします。

![](/files/341KZH1qILfQEZYBGvZ5)

* ステップ3：変更を保存し、ライブビューで確認します。

![](/files/CGRfsywhKbrF917zWUbt)

このカスタマイズにより、よりクリーンなレイアウトが可能になり、強調したい要素に注意を集中させることでユーザーエンゲージメントを高めます。

### ヒントとベストプラクティス

* **PageFlyテーマ拡張機能を有効にする**: Shopifyテーマとの互換性を確保するために、PageFlyテーマ拡張機能を常に有効にしてください。これにより、表示の問題を防ぎ、カスタムページの機能を維持できます。
* **テーマの一貫性を維持する**: カスタムPageFlyページがShopifyテーマ全体のデザインと一致していることを確認してください。すべてのページで同じフォント、色、スタイルを使用して、ストア全体で統一感のある外観を作成します。
* **グローバル要素を管理する**: ヘッダーやフッターなどの要素については、Shopifyテーマのデフォルト設定を使用するか、PageFlyでカスタマイズするかを決定してください。すべてのページでグローバル要素を一貫して使用することで、統一されたブランドアイデンティティを維持できます。

### よくある質問

**1. PageFlyページで2つのテーマを使用できますか？**

いいえ、できません。すべてのPageFlyページで1つのテーマのみを使用できます。一貫性のために、単一のテーマを選択して使用する必要があります。

**2. 未公開のテーマでPageFlyページをプレビューできますか？**

いいえ、できません。PageFlyページは公開されているテーマでのみ動作します。新しいテーマでPageFlyページがどのように表示されるかを確認するには、まずテーマを公開する必要があります。

**3. 新しいテーマをPageFlyページで利用するにはどうすればよいですか？**

テーマを公開するか、古いテーマから新しいテーマにPageFlyコンテンツを移行すると、PageFlyページは自動的にそのテーマを適用します。

場合によっては、一部のPageFlyページが同期されていないため、再確認してこれらのページを再公開する必要があります。

例えば、ストアに多くのページがあり、Shopify APIの制限に達する可能性がある場合、一部のページが一度に適切に同期されない可能性があります。したがって、すべてのPageFlyページを再確認する必要があります。

**4. 商品を追加してもカートが自動的に更新されません。どうすれば修正できますか？**

基本的に、PageFlyはShopifyテーマとうまく連携します。ただし、特定のカートメカニズムを持つ一部のテーマは、PageFlyと競合を引き起こし、カートドロワーが自動的に更新されない場合があります。この問題の詳細については、[この記事](https://help.pagefly.io/manual/cart-drawer-does-not-automatically-update/)を確認してください。

**5. テーマ拡張機能をオンにしないとどうなりますか？**

PageFlyテーマ拡張機能をオンにしない場合、PageFlyページの多くの要素がShopifyテーマと適切に接続されず、正しく機能しない可能性があります。たとえば、アコーディオンやタブ要素などのインタラクティブ要素は意図したとおりに機能せず、ユーザーエクスペリエンスが損なわれる可能性があります。

したがって、テーマ拡張機能を有効にして、ページのすべての要素がスムーズに動作し、テーマと完全に統合されていることを確認することが重要です。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/hajimeni/quick-start/switch-theme-process-in-pagefly.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.