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

**URL:** <https://community.shopify.com/t/topic/266502>\
**Category:** 技術的なQ＆A\
**Created:** [November 8, 2023, 10:07am UTC](https://community.shopify.com/t/topic/266502 "2023-11-08T10:07:10Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated 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の適用経験はあるものの、このようなスタイルを編集した覚えがなく、原因・解決方法ともに不明で困っている状態です。どこを編集したのかも分からず、修正方法も不明とのことです。

<div class="post-metadata">

**Author:** ![tm\_106](https://avatars.discourse-cdn.com/v4/letter/t/7ea924/32.png) [@tm\_106](https://community.shopify.com/u/tm_106)\
**Post date:** [November 8, 2023, 10:07am UTC](https://community.shopify.com/t/topic/266502/1 "2023-11-08T10:07:10Z")

</div>

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

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

該当URL：[https://gift-the-connrod.jp/](https://gift-the-connrod.jp/)

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

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

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

 ![スクリーンショット 2023-11-08 18.42.22.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/7/17832505b84c905171eebbbfaee13769d5ff9bca.png)

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

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

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

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

 ![スクリーンショット 2023-11-08 19.00.30.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/6/26505477e9b5e4ec243dc6ba63aecafab68f9b44.png)

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

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

 ![スクリーンショット 2023-11-08 19.02.44.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/e/0e1032894b0c502e5b8748a5f63676bc9c002d51.png)

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

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

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