PageFlyはShopifyテーマとどのように連携しますか?
Last updated
Was this helpful?
Last updated
Was this helpful?
このガイドでは、ヘッダーとフッターの管理、テーマの切り替え、一般的な問題のトラブルシューティングの詳細を含め、を説明し、シームレスな統合を実現します。
をインストールする
希望のテーマを公開または選択する
Shopifyの基本的な知識
PageFlyテーマ拡張機能は、PageFlyが現在のShopifyテーマと適切に連携するために有効にする必要がある必須の拡張機能です。
テーマ拡張機能が無効になっている場合、警告が表示されることがあります:
PageFlyダッシュボードの場合:
PageFlyエディターの場合:
以下のいずれかの方法を使用して、PageFlyテーマ拡張機能を有効にできます:
1. Shopifyダッシュボード経由
Shopifyダッシュボード > オンラインストア > テーマ に移動し、現在のテーマセクションへ進み、「カスタマイズ」ボタンをクリックします。
テーマエディターで、左側のメニューにある「アプリ埋め込み」ボタンを選択します。
PageFlyテーマ拡張機能を検索し、アプリを有効にします。
2. PageFly警告メッセージ経由
テーマ拡張機能が無効になっていることに関する警告が表示されたら、警告から直接「PageFlyテーマ拡張機能を有効にする」ボタンを選択します。
3. PageFlyダッシュボード経由
PageFlyダッシュボード > 左メニューの「設定」を選択 > 「テーマアプリ拡張機能」を選択します。
「今すぐ有効にする」ボタンをクリックして、テーマ拡張機能を有効にします。
4. PageFlyページを公開する
PageFlyでページを公開すると、「公開」ボタンをクリックしたときにテーマ拡張機能が自動的に有効になります。
Shopifyテーマを切り替える際は、上記いずれかの方法でPageFlyテーマ拡張機能を必ず有効にしてください。これにより、新しいテーマがPageFlyページと適切に連携することが保証されます。
ステップ1:テーマにアクセスする
Shopify管理画面から、オンラインストア > テーマへ進みます。
ステップ2:テーマを公開する
テーマライブラリで、使用したいテーマを選択し、「公開」をクリックします。
注意:試用版テーマには「公開」ボタンが表示されません。公開するにはまずテーマを購入する必要があります。
より分かりやすい視覚的な説明については、以下のビデオチュートリアルをご覧ください。
テーマ切り替えプロセス中に、PageFlyページエディターで、作業中のすべてのページの下部右隅に2つのポップアップ通知が自動的に表示されます。これらの通知は、ページのステータスを通知します。
下部中央のポップアップにある「詳細を表示」ボタンをクリックすると、すべてのページのステータスの詳細情報が表示されます。
または、左下のボタン(カスタマーサポートボタンの上)をクリック > 「バックグラウンドプロセス」を選択 > 確認したいプロセスを選択することで、プロセスを確認できます。
ステータスが失敗と表示された場合、リストの失敗したページをクリックすると、その特定のページにリダイレクトされます。その後、ページを再公開して、テーマ切り替え後にすべてのページが正常に公開されることを確認します。
注意:テーマ切り替えプロセスが完了した後、PageFlyテーマ拡張機能が有効になっているか確認してください。新しいテーマでPageFlyページが適切に機能するためには有効になっている必要があります。
パスワードページを除いて、PageFlyで作成された通常ページ、ホームページ、コレクションページ、商品ページ、ブログ記事ページで、フッターとヘッダーを非表示にすることができます。
ステップ1:ページ設定モーダルにアクセスする
PageFlyエディターで、左側のツールバーにある「ページ設定」ボタンをクリックします。
ステップ2:ヘッダーとフッターのオプションを無効にする
ページ設定モーダルが表示されたら、「ヘッダーとフッターを表示」オプションの選択を解除します。変更を適用するには、「保存」ボタンをクリックします。
ステップ3:ページを公開する
設定を保存した後、「公開」ボタンをクリックして、ライブビューで変更を確認します。
PageFlyを使用してカスタムページを作成する際、ブランドアイデンティティにとって一貫性のあるヘッダーとフッターを維持することが非常に重要です。一貫性を維持するために、PageFlyページ設定でヘッダーとフッターを有効にできます。これにより、カスタムページがストアの他のデザインと一致することが保証されます。または、Shopifyのデフォルトヘッダーとフッターのない独自のレイアウトを好む場合は、ページ設定でそれらを無効にし、変更を公開して結果を確認できます。
Shopifyテーマを切り替えると、カスタムPageFlyページの表示に問題が発生することがあります。これを解決するには、Shopifyテーマエディター内でPageFlyテーマ拡張機能を有効にすることが不可欠です。これにより、新しいテーマとPageFlyのカスタマイズとの互換性が確保されます。
さらに、PageFlyのバックグラウンドプロセスを監視することで、失敗したページ更新を特定できます。ページが正しく表示されない場合は、PageFlyエディターから再公開して、適切な機能と外観を復元できます。
商品ページをさらにカスタマイズするために、Shopifyのデフォルトの商品詳細を非表示にできます:
Theme OS 1.0の場合
ステップ1:左メニューの「ページ設定」アイコンをクリックします。
ステップ2:「テーマのセクション」までスクロールし、「デフォルトの商品詳細を表示」を無効にして、「保存」をクリックします。
新しいテーマ(OS 2.0)の場合:
ステップ1:左メニューの「ページ設定」アイコンをクリックし、下にスクロールして「テーマエディターに移動」を選択します。
ステップ2:テーマエディターで、デフォルトの商品詳細の横にある目のアイコンをクリックして非表示にします。
ステップ3:変更を保存し、ライブビューで確認します。
このカスタマイズにより、よりクリーンなレイアウトが可能になり、強調したい要素に注意を集中させることでユーザーエンゲージメントを高めます。
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. 商品を追加してもカートが自動的に更新されません。どうすれば修正できますか?
5. テーマ拡張機能をオンにしないとどうなりますか?
PageFlyテーマ拡張機能をオンにしない場合、PageFlyページの多くの要素がShopifyテーマと適切に接続されず、正しく機能しない可能性があります。たとえば、アコーディオンやタブ要素などのインタラクティブ要素は意図したとおりに機能せず、ユーザーエクスペリエンスが損なわれる可能性があります。
したがって、テーマ拡張機能を有効にして、ページのすべての要素がスムーズに動作し、テーマと完全に統合されていることを確認することが重要です。
デフォルトでは、ヘッダーとフッターは使用しているShopifyテーマに含まれています。それらを非表示にするには、モーダルを開きます。
基本的に、PageFlyはShopifyテーマとうまく連携します。ただし、特定のカートメカニズムを持つ一部のテーマは、PageFlyと競合を引き起こし、カートドロワーが自動的に更新されない場合があります。この問題の詳細については、を確認してください。