オンラインストアのテーマのトラブルシューティング

さまざまな状況によりテーマが期待通りに表示されない場合があり、要素が消える、適切に機能しない、およびその他の表示の問題につながる可能性があります。これは、テーマと競合する外部サービスやアプリコード、またはカスタムコードのカスタマイズにより発生することがあります。また、管理画面の設定で調整が必要な場合もあります。たとえば、翻訳されたコンテンツ、商品、コレクション、メニュー、またはマーケットを確認する必要がある場合があります。

このガイドの手順を確認してもテーマに問題が発生する場合は、テーマのサポートチームにお問い合わせください。テーマのサポートを受けることについて、詳しくはこちらをご覧ください。

問題の原因を特定する

テーマ内で問題の原因を特定することがテーマを修正するための最初の手順です。問題の原因を特定するには、以下の手順を実行します。

1. ストアフロントに影響を与える可能性がある既知の問題について、Shopifyのステータスページにアクセスして確認します。類似の問題が掲載されてない場合は、さらに問題について調査します。

2. 問題はローカルデバイスで発生していることがあります。ローカルの問題は、多くの場合、デバイスまたはブラウザの設定、またはインターネット接続が原因です。以下の手順を実行して、問題がローカルではなく、他のデバイス、ブラウザ、インターネット接続でも発生することを確認します。

   • ブラウザのキャッシュとCookieをクリアします。ShopifyアカウントでShopifyヘルプセンターにログインしている場合、ブラウザのキャッシュとCookieをクリアすると、アカウントからログアウトされます。ヘルプセンターのバーチャルアシスタントを使用している場合、ブラウザのキャッシュとCookieをクリアすると、チャット履歴がリセットされ、アカウントからログアウトされるため、ヘルプセンターのバーチャルアシスタントとの新しいチャットを開始する必要があります。
   • シークレットMode、別のデバイス、または Shopify アプリをお試しください。
   • モバイルデータまたは別のインターネット接続を使用してみてください。
   • ブラウザーが最新に更新されていることを確認する。
   • 一部のアプリはCookieなしで正しく表示されない可能性があります。ブラウザがすべてのCookieをブロックするように設定されていないことを確認してください。
   • 仮想プライベートネットワーク (VPN) を使用していないこと、Shopifyをブロックするファイアウォールが有効になっていないことを確認してください。

3. 他のデバイス、ブラウザ、またはインターネット接続でも問題が発生する場合、問題はローカルの問題ではなく、再発する可能性があります。問題の原因を特定するための次の手順は、別のテーマでも問題が発生するかどうかを確認することです。Theme Storeにアクセスして新しいバージョンのテーマをインストールし、問題が最新バージョンのテーマでも発生するかどうかを確認します。問題が特定のテーマによるものか、すべてのテーマで同じ問題が発生するのかを判断できるため、Shopifyの無料テーマなど、他のテーマをインストールすることも有効です。他のテーマをテストしたら、問題がどのように発生しているかに応じて次の手順を実行します。

   • 現在のテーマ、および更新済みでカスタマイズされていないバージョンのテーマのみで問題が発生する場合は、テーマについてお問い合わせいただく必要があるかもしれません。
   • 問題が現在のテーマでのみ発生する場合、問題の原因となっているテーマコードが存在している可能性があります。最近テーマコードを更新した場合は、旧バージョンのテーマコードにロールバックできます。テーマのコードを変更していない場合は、テーマ設定を確認してみてください。たとえば、[カートに追加する] ボタンが表示されない場合は、テーマ設定のボタンの色が、対照的な異なる色であることを確認します。
   • すべてのテーマで問題が発生する場合は、管理画面の設定、アプリ、その他の問題が原因である可能性があります。

4. 問題がアプリに起因する場合があります。ストアフロントに影響を与えるアプリを最近インストールまたは更新した場合は、アプリを一時的にアンインストールしてみてください。アプリをアンインストールした後に問題が解決した場合は、アプリをストアフロントに正しく表示できるよう、アプリ開発者のサポートチームに連絡します。アプリのサポート依頼について詳しくはこちらをご覧ください。アプリをアンインストールしても問題が解決しない場合、アプリは問題の原因ではありません。

画像が正しく表示されない

画像が想定とは異なって表示される場合がありますが、画像自体がテーマで使用する画像と互換性がないことが原因の可能性があります。使用している画像の画像寸法が正しいかを確認します。互換性のない画像をアップロードした際に発生する可能性がある一般的な表示問題については、以下の一覧をご確認ください。

• ヘッダーがデスクトップに広く表示され、ロゴ画像がモバイル上で想定よりも小さく表示される場合、ロゴ画像ファイルの空白が原因である可能性があります。画像ファイルを編集して、ロゴの周りをトリミングし、空白を削除します。
• スライドショー画像がトリミングされている場合、デスクトップとモバイルで画像が同じように表示されるよう設計されていることが原因です。モバイル画面ではコンテンツの表示が非常に小さいので、コンテンツを縮小すると多くの詳細が失われる可能性があります。このように詳細が失われないよう、コンテンツはトリミングされます。横幅よりも縦幅が広い縦長の画像は、デスクトップ上にかなりのスペースを取る場合があります。これによりスライドショー画像には縦幅制限が設けられています。スライドショー画像にフォーカルポイントを追加して、フォーカルポイントを常にスライドショー画像の中央に位置付けることができます。フォーカルポイントを追加しても問題が解決しない場合は、すべての画面サイズで動作する画像を使用します。スライドショーのベストプラクティスについて、詳しくはこちらをご覧ください。
• GIF画像が正しく表示されておらず、商品説明やブログ記事などの中でリッチテキストエディタを使用してストアフロントに追加されている場合、画像サイズが原因である可能性があります。修正するには、リッチテキストエディタで対象のGIFをクリックし、[画像を編集] をクリックします。[画像サイズ] ドロップダウンメニューで、[元のサイズ] を選択します。そして、画像の角をクリックし内側にドラッグして縮小したり、外側にドラッグして拡大したりすることでGIFサイズを変更できます。
• ストアフロントに表示される画像が元の色と大幅に違う場合、画像が標準の赤・緑・青 (sRBG) の色を使用していない可能性があります。この、色が変更される問題を修正するには、写真編集アプリでファイルをsRBGとして保存します。一般的には「ウェブ用に最適化」、「ウェブ用に画像を調整する」、または「ウェブ用に保存する」と表示されています。カラープロファイルについて詳しくはこちら。
• コレクションページの商品画像が揃って表示されない場合は、商品画像ファイルのアスペクト比を調整して縦と横の比率を揃えてから、商品画像を再度アップロードしていただく必要がある場合があります。また、Shopify App Storeから画像編集アプリも是非ご利用ください。

商品またはコレクションが正しく表示されない

商品がストアフロントに表示されない場合は、管理画面の商品の [公開] セクションで、[ステータス] と [販売チャネル] を確認する必要がある場合があります。商品のステータスが [アクティブ] で、その商品が [オンラインストア] で利用可能であることを確認します。

コレクションがストアフロントに表示されない場合は、管理画面のコレクションの [公開] セクションで、[販売チャネル] を確認する必要がある場合があります。コレクションが [オンラインストア] で利用可能であることを確認します。また、コレクションが [メニュー] に追加されていることを確認する必要がある場合があります。

コレクションは表示されるものの、商品が表示されない場合は、[メニュー] 設定でコレクションの任意のタグフィルターを確認する必要があります。商品が表示されない原因となるようなタグが [タグでコレクションを絞り込む] フィールドに含まれていないことを確認します。

商品やコレクションに通貨が正しく表示されない場合は、[設定] > [一般設定] の [ストアのデフォルト]　セクションで [通貨表示] を確認して、追加のコードが含まれていないことを確認します。お客様への通貨表示方法のフォーマットについて詳しくはこちら。

一部の商品やコレクションの表示方法が他の商品と異なる場合は、管理画面で商品またはコレクションに割り当てられたテーマテンプレートを確認する必要がある場合があります。

翻訳されたコンテンツが正しく表示されない

翻訳されたコンテンツが正しく表示されない、またはストアフロントに表示されない場合、コンテンツの翻訳が古くなっているか、翻訳されていない可能性があります。また、コンテンツがマーケット向けの特定のテンプレートに含まれている可能性があります。デフォルトの言語で新しいコンテンツを追加した場合は、忘れずに自動翻訳を再度実行するか、手動で新しい翻訳を追加してください。

翻訳されたコンテンツには、次のステータスが適用されます。

• 翻訳済み：コンテンツに利用できる翻訳があります。
• 古い：デフォルト言語でのコンテンツは更新されているが、翻訳には更新内容が反映されていません。
• 未翻訳：このコンテンツタイプに利用できる翻訳がありません。

翻訳されたコンテンツを確認する際に、翻訳されていないコンテンツまたは古くなったコンテンツを更新すると、翻訳されたコンテンツが正しく表示されます。

ストアの翻訳とローカライズについて詳しくはこちら。

テーマエディタで更新した内容がストアフロントに表示されない

ストアフロントとテーマエディタで同じ情報が表示されない場合は、編集中のテーマテンプレートを確認します。正しい情報を表示するには、テーマテンプレートを編集して更新する必要がある場合があります。ストアのコンテキスト化により、マーケットごとに異なるストアフロントを作成し、翻訳されたコンテンツを表示することができます。更新を行う際に、誤って特定のマーケットまたはB2B内で操作を行っている可能性があります。テーマエディタの [コンテキスト] ドロップダウンメニューでコンテンツを特定し、それが正しいマーケットに表示されているかを確認します。

ストアのコンテキスト化について詳しくはこちら。

リッチテキストエディタ

リッチテキストエディタに追加されたHTMLコードがテーマコードと競合する場合があります。商品ページ、ページ、ブログ記事など、単一のページで問題が発生する場合は、余分なHTMLコードが入力されている可能性があります。これは、別のサイトからテキストをコピーしてペーストすることで発生することがあります。

HTMLコードを確認する

リッチテキストエディタでHTMLコードを確認できます。

手順

1. 管理画面ページに移動します。
2. [</>HTMLを見る] ボタンをクリックして、HTMLコードを確認します。
3. 表示問題の原因となっていると思われるHTMLコードを特定して削除します。
4. [保存] をクリックします。

書式設定を解除する

テキストの一部を強調表示してHTMLの書式設定を解除します。

手順

1. 管理画面ページに移動します。
2. 書式の問題が発生しているテキストを強調表示します。
3. [🚫] ボタンをクリックします。
4. [保存] をクリックします。

リッチテキストエディタについて詳しくはこちらから。

ページがサポートされていないURLにリダイレクトされています

ストアフロントに、ショップと連携していないURLにユーザーをリダイレクトするコードが含まれている場合は、テーマエディタにアクセスする際、リダイレクトが無効になっていることを確認してください。

たとえば、このタイプのリダイレクトをストアフロントに追加して、お客様を、お客様のロケーションに応じて異なるShopifyストアに誘導することができます。このタイプのリダイレクトコードは、テーマまたはインストールしたアプリのいずれかに含めることができます。

リダイレクトが編集操作に干渉しないようにするために、JavaScriptの変数への参照を使用して、テーマエディタにアクセスする際、リダイレクトを無効にするJavaScriptのwindow.Shopify.designMode変数を参照してください。この変数は、ストアフロントがエディタに読み込まれた場合には、trueに設定され、読み込まれなかった場合には、falseに設定されます。

コードのエラーメッセージ

テーマコードに構文エラーがある場合は、テーマエディタに「HTML error found」または「Theme error」という警告メッセージが表示されます。 エラーメッセージには、エラーのあるLiquidファイルが表示されます。

壊れたHTMLがある場合、「The theme you're looking for couldn't be found」という警告メッセージが表示されることがあります。次のような多くの理由により、テーマエディタでページの読み込みに失敗する可能性があります。

• ネットワーク接続に関する問題
• テーマに無効なLiquidコードが含まれている

テーマコードのコードの変更点を特定して修正するか、コードを変更する前の状態にファイルを戻します。

手順

1. エラーメッセージでリンクされている.liquidセクションファイルをクリックするか、ファイルの最近の変更について確認します。これにより、[HTML/CSSの編集ページ] へと移動し、ファイルがコードエディタで開きます。

2. ファイルのコードを確認して、無効なHTMLまたはLiquidを探します。コードエディタでは、構文エラーの可能性のある箇所が赤色で表示されます。エラーの原因になることが多い誤りとして、以下が挙げられます。

   • 余分なHTML終了タグ (例: 開始タグなしの</div>終了タグ) <div>
   • 余分なHTML開始タグ (例: 終了タグなしの<div>開始タグ) </div>
   • 不正な形式のHTMLタグ (例: クラスなしの<div class="my-class") >
   • 不正な形式のLiquidコード
   • 含まれたテーマスニペットファイルの壊れたHTML

3. 問題を特定したら、テーマファイルのコードを修正するか、[最近の変更] で以前のバージョンを選択してコードを元に戻します。

4. [保存] をクリックします。

5. [カスタマイズ] をクリックしてテーマエディタに戻り、エラーメッセージがなくなったことを確認します。

6. ストアフロントに移動して、想定通り表示されていることを確認します。