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

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

• ヘッダーが想定より大きく表示され、ロゴ画像が想定より小さく表示される場合、ロゴ画像ファイル内の空白が原因である可能性があります。ロゴ画像ファイルに空白があると、その空白が原因でロゴが小さく表示されたり、ヘッダーが大きく表示されたりする場合があります。画像ファイルを編集して、ロゴの周りで切り抜かれ、空白がないことを確認してください。
• スライドショーの画像が切り抜かれる場合、これはモバイルとデスクトップで同じように画像が表示されるようにするための仕様です。モバイル画面ではコンテンツがはるかに小さく表示されるため、コンテンツを縮小すると多くの詳細が失われる可能性があります。代わりに、詳細が失われないようにコンテンツが切り抜かれます。横幅よりも縦の長さが長い縦向きの画像は、デスクトップ上でかなりのスペースを占める可能性もあります。このため、スライドショーの画像には最大の高さが設定されています。スライドショーの画像に フォーカルポイントを追加 することで、フォーカルポイントが常にスライドショー画像の中心になるようにすることができます。

  アダプティブハイトオプション：多くの Shopify テーマには、スライドショーのアダプティブハイト設定が含まれています。この設定では、最初の画像スライドに合わせてスライドショーの高さを調整することで、さまざまな画面サイズでの切り抜きを減らします。この機能は、Shoify が開発した現在サポートされているすべてのテーマで利用できます。

• GIF 画像が正しく表示されず、商品説明やブログ記事などでリッチテキストエディタを使用してストアフロントに追加されている場合、画像のサイズが原因である可能性があります。これを修正するには、リッチテキストエディタで GIF をクリックし、[画像を編集] をクリックします。[画像サイズ] ドロップダウンメニューで、[オリジナル] を選択します。その後、画像の角をクリックして内側にドラッグして縮小したり、外側にドラッグして拡大したりすることで、GIF のサイズを変更できます。
• ストアフロントで元の画像から色が大幅に変化する場合、その画像は標準の赤緑青 (sRBG) カラーではない可能性があります。この色の変化を修正するには、写真編集アプリケーションでファイルを sRBG として保存します。これに対する一般的な用語は、「Web 用に最適化」、「Web 用に画像を調整」、または「Web 用に保存」です。カラープロファイルについて、詳しくはこちら。
• コレクションページの商品画像が揃っていない場合は、商品画像ファイルのアスペクト比を調整して、縦横比が同じになるようにしてから、商品画像を再度アップロードする必要がある場合があります。Shopify App Storeの画像編集アプリを使用することもできます。

特定の問題とトラブルシューティングに役立つ手順について、以下の問題を確認してください。

• 商品が見つからない：ストアフロントに商品が表示されない場合は、管理画面で商品の [公開] セクションにある [ステータス] と [販売チャネル] を確認する必要があります。商品のステータスが [有効] であり、商品が [オンラインストア] で販売可能であることを確認してください。
• コレクションが見つからない：ストアフロントにコレクションが表示されない場合は、管理画面でコレクションの [公開] セクションにある [販売チャネル] を確認する必要があります。コレクションが [オンラインストア] で販売可能であり、コレクションがメニューに追加されていることを確認してください。
• コレクションは表示されるが、商品が見つからない：コレクションは表示されるものの商品が表示されない場合は、[メニュー] 設定でコレクションのタグフィルターを確認する必要があります。[タグでコレクションを絞り込む] フィールドに、商品が表示されなくなる原因となるタグがないことを確認してください。
• 通貨が正しくない：商品やコレクションで通貨が正しく表示されない場合は、[設定] > [一般] の [ストアのデフォルト] セクションにある [通貨の表示] を確認し、追加のコードがないことを確かめてください。お客様への通貨の表示形式を設定する方法について、詳しくはこちら。
• 一部の商品の表示が異なる：一部の商品やコレクションが他のものと異なる表示になっている場合は、管理画面でその商品やコレクションに割り当てられている [テーマテンプレート] を確認してください。
• 商品テンプレートやコレクションテンプレートを編集できない: テーマエディタでデフォルトの商品テンプレートやコレクションテンプレートがグレーアウトして選択できない場合、少なくとも 1 つの商品またはコレクションをオンラインストアの販売チャネルで利用可能にする必要があります。変更をプレビューできる商品またはコレクションがないと、これらのデフォルトのテンプレートを編集することはできません。コレクションの出品状況の変更、および販売チャネルでの商品の出品状況の設定について詳細をご確認ください。

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

翻訳済みのコンテンツには、以下のステータスが適用されます。

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

翻訳済みのコンテンツを確認する際に、未翻訳または未更新のコンテンツを更新すると、翻訳済みのコンテンツが正しく表示されるようになります。

ストアを翻訳してローカライズする方法について、詳しくはこちら。

ストアフロントとテーマエディタで表示される情報が異なる場合は、編集中のテーマテンプレートを確認してください。テーマテンプレートを編集して、正しい情報が表示されるように更新する必要がある場合があります。

マーケットの上書き機能を使用すると、さまざまなマーケットに合わせて異なるストアフロントを作成し、翻訳されたコンテンツを表示できます。更新を行った際に、意図せず特定のマーケットや B2B で作業していた可能性があります。テーマエディタの [マーケット] ドロップダウンメニューを使用してコンテンツを見つけ、それが正しいマーケットにあることを確認してください。

マーケットの上書きについて詳しくはこちら。

Shopify テーマストアで利用できるテーマはすべてレスポンシブテーマです。つまり、テーマは画面サイズに適応します。テーマエディタでは、テーマの編集中に画面サイズのビューを切り替えて、ページや画像が正しく表示されることを確認できます。テーマエディタでさまざまな画面サイズを表示する方法について詳しくはこちら。

多くのセクションとブロックには、カスタマイズ可能なモバイル設定があります。たとえば、[関連商品] セクションで [モバイルでの列数] を設定できます。各テンプレートのモバイル関連のセクション設定を確認して、モバイル画面サイズでの表示に関する問題をトラブルシューティングできます。

テーマがすべての画面サイズでアクセス可能であることを確認するために、一部のテーマ機能はモバイルとデスクトップで表示が異なる場合があります。たとえば、デスクトップ画面サイズでは、スライドショーにテキストオーバーレイが表示され、画像の色や不透明度、テキストの影が調整されて画像の上にテキストが表示されることがあります。しかし、モバイル画面サイズでは、テキストがスライドショーの下に表示される場合があります。これは、どの画面サイズでもテキストが読みやすくなるように設計されたアクセシビリティ機能です。テキストがオーバーレイのままだと、モバイルでは非常に小さく表示され、読みにくくなります。

モバイルでストアフロントを表示したときに、特集コレクションセクションまたはコレクションページで画像のサイズがまちまちだったり、配置がずれたりする場合は、アスペクト比が一定でないことが原因である可能性があります。コレクションまたは特集コレクション内に表示される商品画像などの画像グリッドは、画面サイズに合わせてレスポンシブになるように構築されています。画像グリッド内の画像のアスペクト比が一定でない場合、画面サイズによって表示が異なることがあります。通常、2048 x 2048 ピクセルの正方形の商品画像が、商品グリッドで最適に機能します。すべての画面サイズで最適化されるように、画像のアスペクト比が一定になるように更新してください。画像のアスペクト比について詳しくはこちら。

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

HTMLコードを確認する

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

手順：

1. 管理画面でそのページに移動します。
2. [HTML を表示] ボタンをクリックして、HTML コードを確認します。
3. 表示の問題を引き起こす可能性のある HTML コードを見つけて削除します。
4. [保存] をクリックします。

フォーマットをクリアする

テキストの一部をハイライト表示して、HTML フォーマットをクリアできます。

手順：

1. 管理画面でそのページに移動します。
2. フォーマットに問題があるテキストをハイライト表示します。
3. [🚫] ボタンをクリックします。
4. [保存] をクリックします。

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

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

たとえば、このタイプのリダイレクトは、ロケーションに応じてお客様を別の Shopify ストアに誘導するためにストアフロントに追加される場合があります。このタイプのリダイレクトコードは、テーマまたはインストールしたアプリのいずれかに存在する可能性があります。

リダイレクトがエディタの使用感を妨げないようにするには、JavaScript で window.Shopify.designMode 変数への参照を使用して、テーマエディタにアクセスする際にリダイレクトを無効にします。この変数は、ストアフロントがエディタで読み込まれると true に設定され、それ以外の場合は false に設定されます。

折りたたみ可能なブロックやその他のテーマブロックですべての商品ページに同じコンテンツが表示される場合は、メタフィールドを使用して動的ソースを設定する必要があります。これは、マーチャントが原材料やお手入れ方法などの商品固有の情報を 1 つの商品に追加したものの、それがすべての商品に表示されてしまう場合によく発生します。

折りたたみ可能なブロックですべての商品に同じテキストが表示される

テーマエディタで折りたたみ可能なブロックに直接コンテンツを追加すると、そのコンテンツはすべての商品ページに表示されます。商品固有のコンテンツを表示するには、メタフィールドを持つ動的ソースを使用する必要があります。

1. 管理画面で、[設定] > [メタフィールド] > [商品] に移動します。
2. [定義を追加] をクリックします。
3. メタフィールドの名前を入力し、[コンテンツタイプを選択] をクリックします。
4. [テキスト] と [複数行のテキスト] を選択します。
5. [保存] をクリックします。
6. 管理画面で商品ページに移動し、ページ下部にあるメタフィールドのセクションまでスクロールします。
7. 作成したメタフィールドに、商品固有のコンテンツを追加します。
8. テーマエディタで商品テンプレートに移動し、[折りたたみ可能な行] セクションを見つけます。
9. [行のコンテンツ] 設定で、 ボタンをクリックします。
10. 利用可能なオプションからメタフィールドを選択します。
11. 変更を保存します。

これで、メタフィールドが入力されている各商品に固有のコンテンツが表示され、その商品のメタフィールドが空の場合は何も表示されなくなります。

オンラインストアにメタフィールドを表示する方法と、メタフィールドとメタオブジェクトを動的ソースで使用する方法について詳しくはこちら。

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

HTML が破損している場合、The theme you're looking for couldn't be found という警告メッセージが表示されることがあります。テーマエディタでページが読み込めない原因は、以下のような多くの理由が考えられます。

• ネットワーク接続の問題
• テーマ内の無効な Liquid コード

テーマコード内でコードの変更箇所を特定し、コードを修正することができます。影響を受ける既存のファイルを特定できる場合は、コードエディタのタイムラインビューで、利用できる以前のバージョンに復元できます。

手順：

1. エラーメッセージにリンクされている .liquid セクションファイルをクリックするか、最近変更されたファイルを確認します。これにより、[HTML/Cascading Style Sheets (CSS) を編集する] ページに移動し、ファイルがコードエディタで開きます。
2. ファイル内のコードを確認し、無効な HTML または Liquid を見つけます。コードエディタでは、構文エラーの可能性がある箇所が赤で表示されます。一般的な問題には、以下のようなものがあります。
   • 余分な HTML 終了タグ (例：開始 <div> がないのに終了 </div> がある)
   • 余分な未終了の HTML タグ (例：終了 </div> がないのに開始 <div> がある)
   • 不正な形式の HTML タグ (例：> のない <div class="my-class")
   • 不正な形式の Liquid コード
   • インクルードされたテーマのスニペットファイル内にある破損した HTML
3. 問題箇所が見つかったら、テーマファイル内のコードを修正します。コードエディタのタイムラインビューを使用して以前のバージョンを選択し、コンテンツを復元を実行すると、ファイルのコンテンツ全体が置き換えられます。変更を保持したい場合は、まず現在のファイルのコンテンツを安全な場所にコピーしてください。
4. [保存] をクリックします。
5. [テーマを編集する] をクリックしてテーマエディタに戻り、エラーメッセージが表示されなくなったことを確認します。
6. ストアフロントに移動して、想定どおりに表示されることを確認します。

「Exceeded maximum number of unique handles」エラー

ホームページに「Exceeded maximum number of unique handles for all_products」のような Liquid のエラーメッセージが表示される場合、それは通常、ホームページに特集商品セクションを追加しすぎていることが原因です (ほとんどのテーマでは 20 セクションが上限の目安です)。

この問題を解決するには、以下の手順を実行します。

1. 管理画面で、[オンラインストア] > [テーマ] の順に移動します。
2. 現在のテーマを見つけて、[テーマを編集する] をクリックします。
3. ホームページに移動します。
4. テーマの制限内に収まるように、いくつかの特集商品セクションを削除します。
5. 代わりに特集コレクションセクションを使用することもご検討ください。複数の商品をより効率的に表示でき、ストアのパフォーマンス向上につながります。

ほとんどのテーマのフッターには、お客様が利用できる決済方法を表示するため、決済アイコンがデフォルトで含まれています。テーマのフッターに決済アイコンが表示されない場合は、以下の点を確認してください。

1. テーマエディタで [フッター] セクションに移動し、[決済アイコンを表示する] の設定が有効になっていることを確認します。
2. 管理画面で、[設定] > [決済] に移動し、有効な決済方法が少なくとも1つあることを確認します。決済方法によっては、アイコンが表示される前にアカウント設定の完了が必要な場合があります。
3. 外部サービスの決済ゲートウェイサービスを使用している場合、プラットフォームの制限により、決済アイコンが表示されないことがあります。

これらの設定を確認しても決済アイコンがまだ表示されない場合は、テーマのサポートを受ける必要があるかもしれません。