Shopifyの管理画面からアプリを削除したのに、商品ページのバナーやレビュー欄、ポップアップなどが残ることがあります。
これは、アプリ本体の削除には成功していても、テーマに追加された設定やコードが残っているためです。消えない表示を見つけて、関係がありそうなコードを手当たり次第に削除すると、商品ページやカートまで動かなくなるおそれがあります。
まずは、何が残っているのか、どのテーマに入っているのかを順番に調べます。
最初に消えていないものを確認する
「表示が消えない」といっても、残っている場所によって見るべき設定が違います。
| 残っているもの | 確認する場所 |
|---|---|
| 商品ページのレビュー欄 | 商品テンプレートのアプリブロック |
| 画面端のチャットボタン | 埋め込みアプリ、テーマコード |
| 割引や送料無料のバナー | セクション、スニペット、JavaScript |
| ポップアップ | 埋め込みアプリ、外部スクリプト |
| カート内の案内文 | カートテンプレート、アプリブロック |
| 不自然な余白 | 削除された機能の枠やCSS |
| Liquid errorの文字 | テーマ内に残ったアプリ用コード |
表示されているページと内容をメモし、できればスクリーンショットも残しておきます。
スマホだけで起きるのか、パソコンでも起きるのかも確認してください。画面サイズによって表示を切り替えるコードが使われていると、片方にだけ残ることがあります。
Shopifyアプリを削除しても表示が残る主な原因
アプリブロックが商品ページに残っている
Shopifyのテーマでは、商品ページやカートページにアプリの機能をブロックとして追加できます。
アプリを削除したあとも、テーマエディタ内に空の枠や設定が残っている場合があります。
管理画面から次の順に開きます。
- 「オンラインストア」を開く
- 「テーマ」を開く
- 公開中のテーマで「カスタマイズ」を押す
- 表示が残っているページを選ぶ
- 左側の一覧からアプリ名や不明なブロックを探す
該当するブロックが見つかったら、いきなり削除せず、一度非表示にしてページを確認します。
埋め込みアプリが有効になっている
チャットボタン、アクセス解析、ポップアップなどは、「埋め込みアプリ」としてテーマ全体に入ることがあります。
テーマエディタを開き、左側にある「埋め込みアプリ」の項目を確認します。削除したアプリに関係する設定が残っていたら、スイッチを切って保存します。
同じような機能のアプリを複数使っている場合は、名前だけで判断しないでください。別のアプリまで無効にすると、現在使っている機能も消えてしまいます。
テーマ内にコードが残っている
古い方式のアプリや、導入時に手作業で設定したアプリは、テーマのファイルにコードを追加していることがあります。
Shopify公式でも、一部のアプリがテーマに追加したコードは、アプリをアンインストールしても自動では削除されないと案内しています。 が残りやすい場所は次のとおりです。
- theme.liquid
- product関連のテンプレート
- cart関連のテンプレート
- snippetsフォルダ
- assetsフォルダ
- sectionsフォルダ
ファイル名にアプリ名が入っているとは限りません。「app」「widget」「review」などの一般的な名前だけで削除すると、別の機能を壊すことがあります。
アプリ用のファイルを呼び出す記述だけが残っている
アプリ専用のスニペットやJavaScriptファイルが残っているだけでは、画面に何も出ないことがあります。
一方で、そのファイルを読み込む記述がtheme.liquidなどに残っていると、表示の崩れやエラーにつながります。
ファイル本体だけを削除して呼び出し部分を残すと、Liquid errorが表示される場合があります。反対に、呼び出し部分だけを消すと、不要なファイルは残りますが、すぐに表示が崩れるとは限りません。
どちらか一方だけを見るのではなく、呼び出す側と呼び出される側をセットで調べます。
編集しているテーマと公開中のテーマが違う
テーマを複製したことがある場合は、別のテーマを編集していることがあります。
管理画面の「オンラインストア」から、現在公開されているテーマを確認してください。「テーマライブラリー」にある下書きテーマを直しても、公開中のショップには反映されません。
反対に、下書きテーマでは直っているのに、古いテーマを公開し続けているケースもあります。
ブラウザに古い表示が残っている
設定やコードを直したあと、ブラウザに変更前のページが残っていることがあります。
次の方法で確認します。
- シークレットウィンドウで開く
- 別のブラウザで開く
- スマートフォンのモバイル回線で開く
- ページを再読み込みする
- Shopifyのテーマプレビューで確認する
別の環境では消えている場合、テーマではなくブラウザ側の表示が古いと考えられます。
コードを触る前にテーマを複製する
公開中のテーマを直接編集するのは避けます。
管理画面の「オンラインストア」からテーマのメニューを開き、「複製」を選びます。複製したテーマで作業すれば、表示が崩れたときに元の状態へ戻せます。
Shopify公式も、テーマコードを編集する前にテーマを複製し、バックアップを作るよう案内しています。 アップを作ったら、次の順番で調べると余計な変更を減らせます。
- テーマエディタのアプリブロック
- 埋め込みアプリ
- アプリの説明ページや削除手順
- theme.liquid内の読み込み記述
- アプリ用のスニペットやJavaScript
- 関係するCSS
一か所直すたびに保存し、表示を確認します。複数のファイルをまとめて変更すると、どの変更で直ったのか分からなくなります。
削除したアプリを入れ直す方法は慎重に使う
削除手順を確認するため、一時的にアプリを入れ直す方法もあります。
ただし、再インストールによって以前の設定が戻るとは限りません。新しい設定が作られたり、テーマにコードが追加されたりする場合もあります。
先に次の情報を探してください。
- アプリ公式のアンインストール手順
- アプリ導入時に届いたメール
- アプリ内のヘルプページ
- Shopify App Storeの説明
- アプリ開発元のサポート情報
削除前に専用の操作が必要だったアプリでは、管理画面からアンインストールしただけでは後片付けが終わらないことがあります。
直ったあとに確認するページ
残っていた表示が消えても、そこで作業を終わらせず、購入に関係するページを確認します。
- トップページ
- 商品ページ
- コレクションページ
- カートページ
- 検索結果ページ
- スマホ表示
- パソコン表示
特に商品をカートへ入れられるか、数量変更ができるか、購入手続きへ進めるかを見てください。
見た目だけ直っていても、アプリに関係するJavaScriptを消した影響で、ボタンが動かなくなることがあります。
自分で直すのが難しいときにまとめる情報
自分で直すのが難しい場合や不安なときには、専門家に依頼するのがベター。Shopifyのネットショップの問題を修正しますなどのサービスがあります。
作業内容を伝えるときは、「アプリを消したらおかしくなった」だけでは原因を探すのに時間がかかります。
次の情報をまとめておくと状況が伝わりやすくなります。
- 削除したアプリの名前
- アプリを削除した日
- 表示が残っているページのURL
- 残っている表示のスクリーンショット
- 使用しているテーマ名
- テーマを手作業で編集したことがあるか
- 表示が崩れる前に行った操作
- スマホとパソコンのどちらで起きるか
まとめ
Shopifyアプリを削除しても表示が消えないときは、アプリ本体ではなく、テーマ側に設定やコードが残っていることがあります。
最初に調べる場所は、アプリブロック、埋め込みアプリ、公開中のテーマです。それでも残る場合は、theme.liquidやスニペット、JavaScript、CSSを確認します。
コードを編集する前にはテーマを複製し、一か所ずつ変更してください。関係がありそうなコードをまとめて消すと、商品ページやカートの別の機能まで壊れることがあります。
表示が消えたあとも、商品ページから購入手続きまで一通り操作し、ショップ全体に影響が出ていないか確かめることが必要です。
