# Dawnの商品詳細ページのレイアウトを変更したい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [September 23, 2021, 2:54pm UTC](https://community.shopify.com/t/dawn/67568 "2021-09-23T14:54:19Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary 主題: ShopifyのDawnテーマで、商品詳細ページをデフォルトの2カラムから「上: タイトル/価格/ボタン → 中: 画像 → 下: エディタ内容」の1カラム3段構成に変更したい。 提案された方法: - コード編集: テーマのカスタマイズ＞コード編集でSections/main-product.liquidを開く。
付近のHTMLをまるごとコピーし、商品メディアのdivより上に移動する。HTMLの理解が前提。 - 制約: Online Store 2.0のテーマはドラッグ&ドロップでの移動は上下方向のみ。左右レイアウトや骨組みはHTMLで決まるため、単なるセクション移動では対応不可。 - 代替案: Dawnを改造するより、希望レイアウトに近いOnline Store 2.0対応の別テーマをテーマストアから検討する。 - 作業のコツ: 実ページをブラウザの検証ツールでDOMを確認し、id/classでコードを特定する。 結論・状況: 提案内容を基に「確認できました」との返信あり。解決済みの可能性が高く、未解決の大きな論点はなし。
**Author:** ![mimi6520](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@mimi6520](https://community.shopify.com/u/mimi6520)\ **Post date:** [September 23, 2021, 2:54pm UTC](https://community.shopify.com/t/dawn/67568/1 "2021-09-23T14:54:19Z")
表題の通りですが。 Dawnの商品詳細ページが デフォルト（商品画像がある時）では左に商品画像、右に文字群（管理画面でカスタマイズできる範囲）の2カラム構造ですが、 最初にタイトル、値段、ボタンなどなど 下に画像、 その下にエディタ部分の表示 の1カラムの3段構成にしたいのですができますでしょうか？ よろしくお願いします。 ---
**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\ **Post date:** [October 4, 2021, 3:20pm UTC](https://community.shopify.com/t/dawn/67568/2 "2021-10-04T15:20:21Z")
テーマのカスタマイズ＞コードの編集でファイル構成を表示して、Sections\>main-product.liquidのコード内の、 辺りのHTMLをまるまるコピーして、商品データのdivの上に持って来れば可能かなと思いますが、HTMLのコーディングがある程度わかる人ではないとお勧めしません。Dawnに代表されるOnline Store 2.0のテーマはドラッグ&ドロップで部品の移動ができますが、基本的に上下方向だけです。左右の配置や、divなどの骨子の構成はHTMLで記述されているので、Dawnのソースをいじるよりかは、テーマストアで自分のテイストに合うものを試してみる方が早いかもしれません（Dawn同様のOnline Store 2.0に対応しているものは、そのラベルが表示されています） [https://themes.shopify.com/](https://themes.shopify.com/) なお、テーマのコードの構成を知りたいときは、そのページ（上記だと商品ページ）をオンラインストアで実際に見て、ブラウザのinspectメニューでHTML要素を把握して、idやclass名で検索するのが基本的なやり方です。 ---
**Author:** ![mimi6520](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@mimi6520](https://community.shopify.com/u/mimi6520)\ **Post date:** [October 8, 2021, 7:14am UTC](https://community.shopify.com/t/dawn/67568/3 "2021-10-08T07:14:39Z")
ありがとうございます！ 確認できました！