クイックビューが正しく表示されない。

Topic summary

「Featured collection」セクションで商品リストを表示する際、「クイックショップ」ボタンをクリックするとモーダルが正しく表示されない問題が発生しています。

使用環境:

  • テーマ: Empire (Pixel Union製)
  • 外部に依頼せず非エンジニアが自社で制作

確認された問題点:

  1. <modal-inner>クラスのdivにstyle="margin-top: 370.875px"という謎のインラインスタイルが直接記述されている
  2. コンテンツを含むdivのpositionが988.875pxになっており、検証ツールで1640pxに修正すると正常表示に戻る
  3. コンテンツ本体のポジションがずれている
  4. 同じdivのheightが0pxになっている

現状:
投稿者はカスタムCSSの適用経験はあるものの、このようなスタイルを編集した覚えがなく、原因・解決方法ともに不明で困っている状態です。どこを編集したのかも分からず、修正方法も不明とのことです。

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.

「Featured collection」というセクションを用いて、コレクション内の商品をリスト表示しています。

商品カード内に「クイックショップ」ボタンがあり、これをクリックすると添付1枚目のような表示になってしまいます。

該当URL:https://gift-the-connrod.jp/

使用テーマ:Empire (https://pixelunion.net/products/empire)

以下、検証ツールにて調査した内容になります。

①モーダルに謎のスタイルが適用されていた。

というクラスのdivに、直接<style=“margin-top: 370.875px”>と記述されていました。

これまで特定のセクションに対するカスタムCSSの適用はしたことがありますが、今回のようなスタイル適用はしたことがないので、なぜ入っているのか原因が分からないですし、消し方も分かっていません。

また、同じdivのheightも0pxになっており、これも原因・解消法ともに分かっていません。

②コンテンツ自体のポジションがズレている。

①で確認できたスタイルを検証ツール内で修正したところ、中のコンテンツのdivにも異変が見られました。

divのpositionが889.875となっており、これを1460pxにしたらようやく通常の表示に戻りました。

①と同様、ここもイジったことがない(そもそもイジり方が分からない…)ので原因が分からず、どうすれば修正できるのかも分かっていません。

外部に頼らずに非エンジニアのみで内製して作っており、困っております…。

原因や解決方法についてご助言いただけると大変ありがたいです。