Skip to main content

​
概要

無効または壊れた HTML が Cart Editor の Custom HTML フィールドに追加されると、レイアウトが崩れてエディターのインターフェースが使用できなくなることがあります。このガイドでは、レイアウトを一時的に修正して、壊れたコードを安全に削除し、完全な機能を復元する方法を順を追って説明します。

​
問題の原因

この問題は通常、マーチャントが次のような操作をした場合に発生します:
  • <style> タグや <script> タグを適切な構造なしで挿入する
  • HTML タグを閉じ忘れる、または対応が取れていない
  • レイアウトを崩すコンテンツを Custom HTML フィールドに追加する
その結果、Cart Editor が読み取り不能または使用不能になり、編集やページのスクロールすらできなくなることがあります。

​
デベロッパーツールを使用した一時的な修正

ブラウザーのデベロッパーツールを使用してレイアウトを一時的に修正し、Custom HTML フィールドにアクセスできるようにするには、次の手順に従ってください。

​
ステップ 1: DevTools を開く

  1. Upcart アプリで Cart Editor を開きます
  2. ページ上の任意の場所を右クリックして検証を選択するか、次のキーを押します:
    • Cmd + Option + I(Mac)
    • Ctrl + Shift + I(Windows)

​
ステップ 2: 壊れたレイアウトコンテナを見つける

  1. DevTools の Elements タブで、セレクターツール(DevTools の左上隅)をクリックします
  2. Cart Editor のレイアウトにカーソルを合わせ、設定パネルの左側にある緑色でハイライトされたセクションを見つけます。次のようなラベルが付いているはずです:
  3. 階層を 6 レベル上にたどり、次の要素に到達します:

​
ステップ 3: 固定ポジションを無効にする

  1. .Polaris-Frame__Content を選択した状態で、Styles タブを確認します
  2. position: fixed プロパティを見つけて、チェックを外します
これでページのロックが解除され、レイアウトを再びスクロールできるようになるはずです。

​
無効な HTML を削除する

レイアウトに再びアクセスできるようになったら:
  1. Custom HTML フィールドまでスクロールします
  2. 問題の原因となった可能性のある壊れた HTML や埋め込み CSS を探します
レイアウトを崩す典型的な例:
  1. 内容をバックアップとして別の場所にコピーしてから、削除します
  2. 変更を保存します

​
修正されたことを確認する

保存後、Cart Editor は再び正常に読み込まれるはずです。問題が解決しない場合は、無効なタグが残っていないか再度確認するか、マーチャントに連絡して何が追加されたかを確認してください。

​
この問題を防ぐためのベストプラクティス

  • 完全で有効な HTML のみを挿入する
  • HTML の挿入場所にインラインの <style> ブロックを直接追加しない
  • HTML フィールドに CSS を追加する代わりに、Custom CSS セクションを使用する
  • 不明な点がある場合は、必ず Sandbox モードで変更をプレビューする