新しいShopifyアプリのインストールは、特に売上増加やコンバージョン向上を約束するアプリであれば、わくわくするものです。しかし、バンドルアプリやアップセルアプリを追加した直後、ストアのレイアウトが崩れたり、ボタンがずれたり、商品セクションが奇妙に移動したりするのに気づくかもしれません。
心配しないでください。これはテーマが台無しになったという意味ではありません。これはテーマとアプリの競合、またはスクリプトの重複によって引き起こされる一般的な問題であり、舞台裏で何が起こっているのかを知れば簡単に修正できます。
このガイドでは、開発者でなくても、WizioのようなShopifyのバンドルアプリやアップセルアプリをインストールした後に発生したレイアウト/UIの不具合を特定、トラブルシューティング、修正する方法を、段階的に説明します。
Shopifyアプリのインストール後にレイアウトとUIの不具合が発生するのはなぜですか？
修正に取り掛かる前に、Shopifyアプリをインストールした後になぜレイアウトが壊れるのかを理解することが役立ちます。
Wizioを含むほとんどのバンドルアプリやアップセルアプリは、カスタムスクリプト、ウィジェット、または商品要素をストアフロントに追加します。これらは、バンドルオファー、数量割引、またはポップアップの表示など、機能を強化することを目的としています。
ただし、テーマの構造やCSSスタイリングがアプリのデザインスクリプトと競合すると、視覚的な問題が発生する可能性があります。
以下に、これらの不具合の一般的な原因をいくつか示します。
- テーマの互換性の問題： 古いテーマや高度にカスタマイズされたテーマは、アプリのレイアウトコンポーネントと完全に一致しない場合があります。
- CSSまたはJavaScriptの競合： 類似したスタイルクラスやイベントトリガーを使用している複数のアプリが重複を引き起こす可能性があります。
- アプリのインストールエラー： アプリのスクリプトが適切にロードされなかった場合、UI要素が意図したとおりに表示されない可能性があります。
- カスタムコードの編集： 以前にテーマファイルで行われた手動の編集が、新しいアプリのコードと干渉する可能性があります。
- 古いテーマバージョン： 新しいアプリのAPIをサポートしていない古いテーマを使用すると、レイアウトが壊れる可能性があります。
ステップ1：壊れているものを特定する
最初のステップは、実際に何が問題を引き起こしているのかを正確に特定することです。すべてのレイアウトの問題がアプリによって引き起こされるわけではありません。時には、既存のデザインの弱点が明らかになることもあります。
以下を探します。
- ボタン、画像、または商品詳細のずれ
- 壊れた、または重複している「カートに追加」セクション
- 不足しているバンドルウィジェット、または歪んでいる「一緒によく購入されています」ブロック
- コレクションページで商品がグリッドから外れて表示されている
- バンドルセクションがモバイル表示に適応していない
ヒント： ストアをデスクトップとモバイルで開き、問題がどこで発生しているかを確認します。レスポンシブCSSの競合により、レイアウトが一方のデバイスでは問題なく機能し、もう一方のデバイスでは壊れることがあります。
こちらも読む： Shopifyバンドルで削除された商品を壊さずに処理する方法
ステップ2：テーマの互換性を確認する
Wizioのようなバンドルアプリやアップセルアプリは、ほとんどのShopify 2.0テーマで動作するように構築されています。ただし、レガシーテーマやカスタムコーディングが多いテーマを使用している場合、軽微な競合が発生する可能性があります。
対処法は次のとおりです。
- Shopify管理画面 → オンラインストア → テーマに移動します。
- カスタマイズをクリック → 次にコードを編集を選択します（変更を加える前にバックアップを作成してください）。
theme.liquid、product-template.liquid、cart.liquidなどのファイルを確認します。- Wizioのスクリプトが追加された可能性のあるセクションを探します
- アクティブなテーマと、デフォルトのShopify Dawnテーマ（完全に互換性があります）を比較します。
プロのヒント：Dawnテーマのプレビューでレイアウトが問題ないように見える場合、現在のテーマに互換性の問題がある可能性が高く、開発者またはWizioバンドルのサポートを通じて修正できます。
ステップ3：キャッシュをクリアし、アプリウィジェットを再インストールする
レイアウトの不具合のように見えるものが、単に適切に更新されていないキャッシュされたスクリプトデータである場合があります。
この簡単な修正を試してください。
- ブラウザのキャッシュとCookieをクリアします。
- Shopifyで、アプリ → Wizio Bundleに移動します。
- アプリウィジェット（「バンドルセクション」や「一緒によく購入されています」ブロックなど）を再インストールまたは再埋め込みします。
- ストアフロントページを更新し、再度確認します。
💡 ヒント： カスタムテーマを使用している場合は、Wizioブロックがメインのレイアウトコンテナの外ではなく、商品セクション内に挿入されていることを確認してください。
ステップ4：CSSを調整する（微調整でほとんどの問題が修正されます）
小さな要素がずれたり重複したりしている場合は、通常、CSSの微調整で数分で修正できます。
安全に行う方法は次のとおりです。
- オンラインストア → テーマ → コードを編集に移動します。
- theme.cssまたはbase.cssファイルを開きます。
- Wizioセクションを適切に整列させるカスタムスタイルを追加します。
- 保存してプレビューします。
🎨 これらの小さな調整により、アプリウィジェットがストアのビジュアルアイデンティティとまとまりのあるものに見えるようになります。
ステップ5：他のアプリとの競合を確認する
商品ページを変更する複数のアプリ（アップセル、割引、在庫アプリなど）をインストールしている場合、それらが重複するスクリプトを挿入している可能性があります。
テスト方法は次のとおりです。
- 他のアプリを一時的に1つずつ無効にします。
- その都度ストアフロントを更新します。
- レイアウトの不具合が消えるかどうかを確認します。
他のアプリを無効にすることで問題が解決した場合は、競合を発見したことになります。次のいずれかを実行できます。
- 表示順序を調整する（ほとんどのアプリでドラッグアンドドロップでの配置が可能です）、または
- Wizioまたは他のアプリのサポートチームにガイダンスを求めます。
こちらも読む： Wizio BundleとShopifyテーマの簡単な統合
ステップ6：Wizioのテーマ統合サポートを利用する
WizioはほとんどのShopifyテーマとスムーズに連携するように設計されており、デザインの競合が発生した場合は、サポートチームが無料の統合サポートを提供しています。
Wizioダッシュボードから直接連絡できます。
- ヘルプ → テーマ統合リクエストに移動します
- 問題のスクリーンショットを提供します
- テーマ名とストアURLを伝えます
数時間以内に、サポートチームは通常、迅速なコード修正を提供するか、シームレスな配置のためにアプリウィジェットを手動でインストールします。
実例
Impulseテーマを使用しているあるマーチャントが、「一緒によく購入されています」セクションが商品グリッドを壊していることに気づきました。WizioのサポートチームがCSSを1行調整し、デザインの残りの部分に影響を与えることなく、即座に解決しました。
UIの問題を修正した後、必ず複数のデバイスでストアをテストしてください。
- 商品ページとカートドロワーでのバンドルの表示を確認します。
- ボタン、商品名、価格が適切に整列していることを確認します。
- テーマエディターのShopifyのデバイスモードでプレビュー機能を使用して、すべての画面タイプを表示します。
関連情報： Shopifyバンドルアプリの他のすべてとの互換性について解説
ステップ8：将来の不具合を防ぐ
レイアウトが修正されたら、将来の競合を防ぐために次のことができます。
- 新しいアプリをインストールする前に、必ずテーマを複製する。
- テーマとアプリを最新バージョンに更新し続ける。
- ガイドがない限り、
theme.liquidなどのコアファイルを直接編集するのを避ける。 - バックグラウンドでスクリプトをロードしている可能性のある未使用のアプリを削除する。
🧠 プロのヒント： ShopifyのTheme CheckまたはShopify Theme Doctor Chrome拡張機能を使用して、壊れたコードブロックや重複したコードブロックを自動的に特定します。
結論
アプリに起因するレイアウトの問題は、最初は気が遠くなるように見えるかもしれませんが、チェックすべきことが分かれば、ほとんどはすぐに修正できます。
Wizioを使用すると、Shopifyマーチャントは互換性とスムーズなユーザーエクスペリエンスを優先するチームにアクセスできます。そして、このガイドの手順に従うことで（テーマの確認やキャッシュのクリアから、CSSの微調整やサポートへの問い合わせまで）、すぐにストアのレイアウトを完璧な状態に戻すことができます。
クリーンでレスポンシブなレイアウトは、単に美観の問題ではありません。コンバージョン率と信頼に直接影響します。したがって、数分かけてストアフロントを微調整し、シームレスなバンドル表示がどのように閲覧者を購入者に変えるかを見てみましょう。
