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 Theme Helper が機能しない場合の修正方法
  • ヒントとベストプラクティス

Was this helpful?

Edit on GitHub
  1. FAQとトラブルシューティング
  2. トラブルシューティング
  3. ライブサイトの問題

カートドロワーが自動的に更新されない

Last updated 25 days ago

Was this helpful?

概要

この記事では、商品カートを追加してもカートドロワー(カートアイコン)が自動更新されない PageFly ページの問題について説明します。これは、お客様が「カートに追加」ボタンをクリックしても、ストアのテーマのカートドロワーが、商品が自動的に更新される代わりに静的なままになることを意味します。

基本的に、PageFly は Shopify テーマとうまく連携します。ただし、一部のテーマ、特にカートの仕組みが PageFly と競合する場合、カートドロワーが自動的に更新されないことがあります。

修正方法

この問題を修正するには、以下の手順に従ってください。

  • Shopify 管理画面 > オンラインストア > テーマに移動します。

  • 現在のテーマで > カスタマイズをクリックします。

  • 左側のサイドバーで、アプリ埋め込みをクリックします。

  • PageFly Theme Helper の横にあるチェックボックスをオンにします。

  • 保存をクリックします。

これにより、Shopify テーマの 60% で問題が修正されます。問題が解決しない場合は、以下の特定のテーマ向けソリューションを確認してください。テーマがリストにない場合は、サポートチームにお問い合わせください。

注: テーマ名を変更した場合、元のテーマ名を知っている必要があります。

詳細については、以下のビデオチュートリアルをご確認ください。

PageFly Theme Helper が機能しない場合の修正方法

まず、Shopify 管理画面のテーマファイルにアクセスする必要があります。

Shopify 管理画面 > オンラインストア > テーマ > コードを編集に移動します。

注: 各テーマによって、この問題を修正するためのコードは異なります。お使いのテーマのコードは以下のリストにあります。

Narrative テーマ

Narrative テーマでは、theme.liquid ファイル内に必要なコードを追加するだけです。

Venue テーマ

Venue テーマでは、theme.liquid ファイル内に必要なコードを追加するだけです。

Turbo テーマ

  1. app.js.liquid ファイルに移動し、refreshCart を検索します。

  2. このビデオのように window.refreshCart を追加します。

  3. app.js.liquid ファイルで add.js を検索し、このビデオのようにその下のコードをコピーします。

  4. カートに追加機能が機能するように、theme.liquid ファイルの window.__pagefly_helper_store コード内に、上記でコピーしたコードをこのビデオのように追加します。

Dawn - Origin - Taste - Craft - Refresh - Sense Theme Popup Notification

Dawn テーマでは、theme.liquid ファイルにこのコードを追加してください。

注: コード内の「View my cart」というテキストは、ストアの言語に合わせて変更する必要があります。

Dawn - Origin - Taste - Craft - Refresh - Sense Theme New Version With Cart Drawer

Dawn - カートドロワーでは、theme.liquid ファイルにこのコードを追加してください。

Blockshop テーマ

Blockshop テーマでは、theme.liquid ファイル内に必要なコードを追加するだけです。

Boundless テーマ

  1. テーマの javascript ファイルに移動し、ajaxCart を見つけます。

  2. var ajaxCart = window.ajaxCart のように、ajaxCart の後に window.ajaxCart を追加します。

  3. theme.liquid にこのコードを追加します。

Porto テーマ

Porto テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Cospora テーマ

Cospora テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Flex テーマ

Flex テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Grid テーマ

Grid テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Galleria テーマ

Galleria テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Debutify & Palo Alto テーマ

Debutify テーマでは、以下の手順に従ってください。

  1. theme.js.liquid ファイルに移動し、theme.ajaxCart、ajaxify、ajaxCart を検索します。

  2. ライブビューでこのキーワードを使って、load 関数または update 関数があるかどうかを確認します。

例: theme.ajaxCart.update() または ajaxCart.load()

上記のキーワードのいずれかがある場合は、theme.liquid ファイルにこのコードを追加します。

こちらにチュートリアルリンクがありますこちら。

上記ガイドに従っても機能せず、カートドロワーが空白になる場合

このコードを追加してください。

Avone テーマ

Avone テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Showtime テーマ

Showtime テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Rebranding テーマ

Rebranding テーマでは、theme.liquid ファイルにこのコードを追加してください。

Envy テーマ

Envy テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Basel テーマ

Basel テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Ella テーマ

Ella テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Lusion テーマ

Lusion テーマでは、ソリューションについてはこちらのリンクこちらをご確認ください。

Atlantic テーマ

Atlantic テーマでは、theme.liquid ファイルにこのコードを追加してください。

Motion テーマ

Motion テーマでは、theme.liquid ファイルにこのコードを追加してください。

Maker テーマ

Maker テーマでは、theme.liquid ファイルにこのコードを追加してください。

Debut テーマ

Debut テーマでは、theme.liquid ファイルにこのコードを追加してください。

注: このコードをテーマに追加しても機能しない場合があります。ライブビューで console.log() を開き、何かエラーが出ていないか確認できます。「$ is not define…」というエラーが表示される場合、この行を theme.liquid ファイルにコピー&ペーストする必要があります。

Express テーマ

Express テーマでは、theme.liquid ファイルにこのコードを追加してください。

Impulse テーマ

Impulse テーマでは、theme.liquid ファイルにこのコードを追加してください。

上記のコードが機能しない場合は、代わりにこのコードを追加してみてください。

Wokiee テーマ

Wokiee テーマでは、theme.liquid ファイルにこのコードを追加してください。

ABZ - Icon

ABZ - Icon では、theme.liquid ファイルにこのコードを追加してください。

Streamline テーマ

Streamline テーマでは、theme.liquid ファイルにこのコードを追加してください。

Bold-Movivatior

Bold-Movivatior テーマでは、theme.liquid ファイルにこのコードを追加してください。

Brooklyn テーマ

Brooklyn テーマでは、ソリューションについてはこのビデオをご確認ください。

上記ガイドに従っても機能せず、カートドロワーが空白になる場合

このコードを追加してください。

Lorenza テーマ

Lorenza テーマでは、テーマが縮小されていないことを確認する必要があります。

ソリューションについては、このビデオをご確認ください。

Kalles テーマ

Kalles テーマでは、theme.liquid ファイルにこのコードを追加してください。

Prestige - Warehouse テーマ

Prestige または Warehouse テーマでは、theme.liquid ファイルにこのコードを追加してください。

上記のコードが機能しない場合は、代わりにこのコードを追加してください。

EcomSolid

EcomSolid テーマでは、theme.liquid ファイルにこのコードを追加してください。

Focal

Focal テーマでは、theme.liquid ファイルにこのコードを追加してください。

Focal 8.10

Focal 8.10 テーマでは、theme.liquid ファイルにこのコードを追加してください。

Retina

  • ステップ 1: retina.js のコードを更新します。

  • ステップ 2: theme.liquid でこのコードを使用します。

Slate テーマ

ソリューションについては、このビデオの説明に従ってください。

Expanse テーマ

ソリューションについては、このビデオの説明に従ってください。

Custom Theme (minimog)

theme.liquid ファイルにこのコードを追加してください。

MeroxIO Custom Theme

ソリューションについては、このビデオに従ってください。

Showcase テーマ

Showcase テーマでは、theme.liquid ファイルにこのコードを追加してください。

Lorenza テーマ

ソリューションについては、このビデオに従ってください。

MODULAR テーマ

MODULAR テーマでは、theme.liquid ファイルにこのコードを追加してください。

Electro - Zeexo テーマ

ステップ 1: テーマコードで bc.script.js.liquid を検索して開きます。

ステップ 2: AT_AddCart を検索し、このビデオのリンクのように window に移動します。

ステップ 3: theme.liquid ファイルにこのコードを追加してください。

Boost テーマ

Boost テーマでは、theme.liquid ファイルにこのコードを追加してください。

Reach

Reach テーマでは、theme.liquid ファイルにこのコードを追加してください。

District テーマ

ソリューションについては、このビデオに従ってください。

Vela テーマ

  • ステップ 1: vela.js のこの関数を window に移動し、コードヘルパーを追加しました。

  • ステップ 2: theme.liquid ファイルにこのコードを追加します。

Pipeline, Testament テーマ

  • ステップ 1: まず cartUpdateCallback を window に移動します。

  • ステップ 2: theme.liquid ファイルにこのコードを追加します。

Shella テーマ

  • ステップ 1: ソリューションについては、このビデオに従ってください。

  • ステップ 2: theme.liquid ファイルにこのコードを追加します。

Shella Theme Version 5.0.1

Shella Theme 5.0.1 では、theme.liquid ファイルにこのコードを追加してください。

Prestige Theme - Warehouse

Prestige テーマ - Warehouse (一部のバージョンのみ) では、theme.liquid ファイルにこのコードを追加してください。

Lammer Theme 4.0.0

Lammer theme 4.0.0 では、theme.liquid ファイルにこのコードを追加してください。

Warehouse 2.5.2 Theme

Warehouse 2.5.2 テーマでは、theme.liquid ファイルにこのコードを追加してください。

Turboant Theme

Turboant テーマでは、theme.liquid ファイルにこのコードを追加してください。

Broadcast Theme

Broadcast テーマでは、theme.liquid ファイルにこのコードを追加してください。

Be Yours 4.1.0 Theme

Be Yours 4.1.0 テーマでは、theme.liquid ファイルにこのコードを追加してください。

Solodrop-2.4.0 Theme

Solodrop-2.4.0 テーマでは、theme.liquid ファイルにこのコードを追加してください。

Pop version 3.0.4 Theme

Pop version 3.0.4 テーマでは、theme.liquid ファイルにこのコードを追加してください。

詳細については、このビデオガイドをご覧ください。

Flow version 16.3.1 Theme

Flow version 16.3.1 テーマでは、theme.liquid ファイルにこのコードを追加してください。

詳細については、このビデオガイドをご覧ください。

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

すべてのテーマで、この同じコードが必要です。

お使いのテーマが上記リストにない場合は、テーマプロバイダーに独自のテーマコードを依頼し、以下のデモのように赤い枠内のコードを更新してもらうよう依頼してください。

このコードも theme.liquid ファイルに追加する必要があります。