LogoLogo
Back to PageFly.ioVideo Tutorials
Japanese 🇯🇵
Japanese 🇯🇵
  • PageFlyヘルプセンター
  • はじめに
    • 概要
    • クイックスタート
      • PageFlyのインストール方法
      • PageFlyの使用方法 | 5分で始める
      • PageFlyテンプレートから新しいページを作成する方法
      • PageFly LiveChatにアクセスする方法
      • PageFlyはShopifyテーマとどのように連携しますか?
    • 価格と請求
      • 概要
      • PageFlyの料金プラン
      • PageFlyの請求の仕組み
      • PageFlyをアンインストールするとどうなりますか?
      • PageFlyの返金ポリシー
  • ページとセクションの作成
    • 概要
    • 一般
      • PageFlyページのセットアップ
      • PageFlyがサポートするページの種類
      • PageFlyのページとセクションを使用する方法
      • PageFlyのページとセクションをエクスポート・インポートする方法
    • ページ
      • PageFlyでホームページを作成する方法
      • PageFlyで商品ページを作成する方法
      • PageFlyでコレクションページを作成する方法
      • PageFlyでブログ記事ページを作成する方法
      • PageFlyでパスワード保護ページを作成する方法
      • PageFlyでよくある質問(FAQ)ページを作成する方法
      • PageFlyで公開予定ページを作成する方法
      • PageFlyで会社概要ページを作成する方法
      • PageFlyでお問い合わせページを作成する方法
      • PageFlyでランディングページを作成する方法
      • PageFlyでA/Bテストページを作成する方法
    • セクション
      • プリメイドセクションと保存済みセクションを使用してページを作成する方法
      • 画像とテキストを含む基本セクションを作成する方法
      • PageFlyセクションでパララックス効果を使用する方法
      • PageFlyで全幅セクションを作成する方法
      • PageFlyでコードなしで固定セクションを作成する方法
  • ページ構造と要素
    • 概要
    • エディター
      • ユーザーインターフェース
        • PageFlyエディターでの作業方法
        • PageFlyをモバイルで使用する方法
        • ページエディター – 要素インスペクター
        • ページエディター - 全般タブ
        • ページエディター - スタイルタブ
        • ページ構成を使用してページレイアウトを整理する方法
        • 魅力的なモバイルレスポンシブページを作成する方法
        • 自動保存とバージョン履歴を使用する方法
      • 追加機能
        • 商品バリエーションのカスタムオプションスウォッチを管理する方法
        • グローバルスタイルを使用して、すべてのPageFlyページで使用するスタイルをカスタマイズする方法
        • ゴミ箱を使用して、削除されたページ、セクション、メディアファイルを管理する方法
        • PageFlyにカスタムフォントを追加する方法
        • PageFlyで画像と動画を管理する方法
    • PageFly要素
      • ユニバーサル要素
      • コンテナ
        • レイアウト
        • スライドショー
        • タブ
        • アコーディオン
        • コンテンツリスト
      • 基本
        • 見出し
        • 段落
        • ボタン
        • リスト
        • アイコン
        • 区切り線
        • HTML/Liquid
      • メディア
        • 画像
        • Youtube動画
        • Vimeo動画
        • HTML動画
        • Soundcloud
      • ソーシャル
        • Instagramフィード
        • Facebook「いいね!」とシェア
        • Facebookフィード
        • Twitterフィード
      • 詳細
        • QRコード
        • テーブル
        • カウントダウン
        • Googleマップ
        • プログレスバー
        • Mailchimpフォーム
    • Shopify要素
      • カスタムコンテンツ
        • アプリブロック
      • 商品
        • 商品バリエーションメタフィールド
        • 商品リスト
        • 商品詳細
        • 商品メディア
        • 商品タイトル
        • 商品ベンダー
        • 商品価格
        • 商品詳細説明
        • 商品バリエーション
        • 商品数量
        • 商品カートに追加
        • 商品詳細を見る
        • 商品メタフィールド
        • 動的チェックアウトボタン
      • コレクション
        • コレクションタイトル
        • コレクション画像
        • コレクションリスト
        • コレクション詳細を見る
        • コレクション詳細
        • コレクション説明
      • フォーム
        • 顧客フォーム
        • 顧客フォームフィールド
        • 顧客フォームボタン
        • お問い合わせフォーム
        • お問い合わせフォームフィールド
        • お問い合わせフォームボタン
        • 検索フォーム
      • ブログ記事
        • ブログ記事リスト
        • ブログ記事詳細
        • ブログ記事画像
        • ブログ記事タイトル
        • ブログ記事内容
        • ブログ記事メタデータ
    • 最適化
      • カスタムコードエディターを使用してページをカスタマイズする方法
      • ページ分析
      • Shopifyストアの速度を上げる方法
      • Facebookピクセルを設定して、ウェブサイト上でのユーザーアクションを理解する方法
      • PageFlyページをShopifyメニューナビゲーションに公開する方法
      • PageFlyページでZakeke Product Customizerを使用する方法
      • Langifyを使用してページを翻訳する方法
      • Weglotを使用してページを翻訳する方法
      • T Labを使用してPageFlyのページを翻訳する方法
      • PageFlyでのJSONテンプレート
      • PageFlyエディターでTinyIMGを使用して画像を最適化する方法
      • PageFlyでShoplift A/Bテストを使用する方法
      • PageFlyでSEOAnt:AI SEO & 画像最適化を使用する方法
      • ブラックフライデーセールアイデア
      • PageFly要素でCRO向けページを最適化
      • バレンタインデーのセールを最適化
      • PageFlyでクリスマスセールページを設定する方法 | 2023年ベストガイド
      • フラッシュセールセクションを作成する方法 - 新学期
      • 母の日に向けてストアを最適化: PageFlyでギフトガイドを作成
    • 主なユースケース
      • ページ上の要素を整列
      • リンク、セクション、ポップアップへの直接リンク
      • スペーシング、マージン、パディングの編集
      • Flex機能
      • ページへのファイルアップロード
  • 連携機能
    • サードパーティ要素
      • 連携されたサードパーティShopifyアプリをページで使用するためにアクティベートする方法
      • PageFlyと連携するアプリは何ですか?
      • レビューと評価
      • アップセルとクロスセル
      • バッジとシール
      • 予約システム
      • 配送と受け取り
      • サブスクリプション
      • 注文追跡
      • ファイルアップロードフィールド
      • メールマーケティング
      • 商品情報
      • プッシュ通知
      • リファーラルとアフィリエイトマーケティング
      • 画像とメディア
      • ロイヤリティとリワード
      • 持続可能性
      • ギフト
      • 国際化
      • 広告
      • サポート
      • SMSマーケティング
  • FAQとトラブルシューティング
    • 概要
    • FAQ
      • PageFly使用時のShopifyテーマに関する問題
      • GDPRへの準拠方法
      • 私のページのURLアドレス
      • PageFlyページエディター - FAQ
      • 要素 - FAQ
    • トラブルシューティング
      • ライブサイトの問題
        • カートドロワーが自動的に更新されない
        • モバイルレスポンシブの横スクロール問題
        • YouTube、HTML動画の自動再生問題
        • テーマプレビューモードでページが完全に表示されない
        • ロケールファイルを作成できない
        • theme.pagefly.liquidを作成できない
        • Shopifyのデフォルト商品詳細を非表示にする方法
        • PageFlyページリストのロードが終わらない
        • ページ上部の空白スペースを削除する
        • ブログページが正常に更新されない
        • ページのスタイルが崩れている
      • エラーメッセージ
        • PageFlyページリストのロードが終わらない
        • ページサイズ制限
        • ページ上の要素数制限
        • データをインポートできません
        • 画像サイズ制限
        • 不明なエラー
  • 最新アップデート
    • PageFlyがOnline Store 2.0に対応しました
    • PageFlyリファーラルプログラム
    • PageFly旧料金プラン
  • PageFlyアフィリエイトプログラム
    • アフィリエイトサクセス:PageFlyがマーチャントのためにできること
    • アフィリエイトサクセス:DOs & DON'Ts - PageFlyアフィリエイトとして成功するために知っておくべきすべて
    • アフィリエイトサクセス:よくある質問
Powered by GitBook
LogoLogo

製品

  • テンプレート
  • 価格
  • ハッピー顧客

リソース

  • ブログ
  • アカデミー
  • ビデオチュートリアル
  • コミュニティ
  • フィードバック

パートナー

  • 私たちのパートナー
  • アフィリエイトプログラム

会社

  • 私たちについて
  • キャリア
  • プライバシーポリシー
  • 利用規約

Copyright © 2025 PageFly. All rights reserved.

On this page
  • 概要
  • 必要条件
  • PageFlyがテーマ拡張機能と連携する方法
  • Shopifyでテーマを切り替える方法
  • PageFlyページでShopifyテーマのヘッダー/フッターを非表示にする方法
  • ユースケース
  • ヒントとベストプラクティス
  • よくある質問

Was this helpful?

Edit on GitHub
  1. はじめに
  2. クイックスタート

PageFlyはShopifyテーマとどのように連携しますか?

Last updated 3 days ago

Was this helpful?

概要

このガイドでは、ヘッダーとフッターの管理、テーマの切り替え、一般的な問題のトラブルシューティングの詳細を含め、を説明し、シームレスな統合を実現します。

必要条件

  • をインストールする

  • 希望のテーマを公開または選択する

  • Shopifyの基本的な知識

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

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

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

  • PageFlyダッシュボードの場合:

  • PageFlyエディターの場合:

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

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

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

  • Shopifyダッシュボード > オンラインストア > テーマ に移動し、現在のテーマセクションへ進み、「カスタマイズ」ボタンをクリックします。

  • テーマエディターで、左側のメニューにある「アプリ埋め込み」ボタンを選択します。

  • PageFlyテーマ拡張機能を検索し、アプリを有効にします。

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

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

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

  • PageFlyダッシュボード > 左メニューの「設定」を選択 > 「テーマアプリ拡張機能」を選択します。

  • 「今すぐ有効にする」ボタンをクリックして、テーマ拡張機能を有効にします。

4. PageFlyページを公開する

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

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

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

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

テーマ切り替えプロセス

  • ステップ1:テーマにアクセスする

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

  • ステップ2:テーマを公開する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ステップ3:ページを公開する

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

ユースケース

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

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

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

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と競合を引き起こし、カートドロワーが自動的に更新されない場合があります。この問題の詳細については、を確認してください。

ページ設定
この記事
PageFlyページビルダーがShopifyテーマとどのように連携するか
PageFlyアプリ