FROM CACHE - jp_header
解決済

Dawnの商品詳細ページのレイアウトを変更したい

mimi6520
探検家
48 0 5

表題の通りですが。

Dawnの商品詳細ページが

デフォルト(商品画像がある時)では左に商品画像、右に文字群(管理画面でカスタマイズできる範囲)の2カラム構造ですが、

最初にタイトル、値段、ボタンなどなど

下に画像、

その下にエディタ部分の表示

の1カラムの3段構成にしたいのですができますでしょうか?

よろしくお願いします。

1 件の受理された解決策

junichiokamura
Community Manager
1200 280 506

成功

テーマのカスタマイズ>コードの編集でファイル構成を表示して、Sections>main-product.liquidのコード内の、<div class="product__info-wrapper grid__item"> 辺りのHTMLをまるまるコピーして、商品データのdivの上に持って来れば可能かなと思いますが、HTMLのコーディングがある程度わかる人ではないとお勧めしません。Dawnに代表されるOnline Store 2.0のテーマはドラッグ&ドロップで部品の移動ができますが、基本的に上下方向だけです。左右の配置や、divなどの骨子の構成はHTMLで記述されているので、Dawnのソースをいじるよりかは、テーマストアで自分のテイストに合うものを試してみる方が早いかもしれません(Dawn同様のOnline Store 2.0に対応しているものは、そのラベルが表示されています)

https://themes.shopify.com/

なお、テーマのコードの構成を知りたいときは、そのページ(上記だと商品ページ)をオンラインストアで実際に見て、ブラウザのinspectメニューでHTML要素を把握して、idやclass名で検索するのが基本的なやり方です。

Senior Partner Solutions Engineer

元の投稿で解決策を見る

2件の返信2

junichiokamura
Community Manager
1200 280 506

成功

テーマのカスタマイズ>コードの編集でファイル構成を表示して、Sections>main-product.liquidのコード内の、<div class="product__info-wrapper grid__item"> 辺りのHTMLをまるまるコピーして、商品データのdivの上に持って来れば可能かなと思いますが、HTMLのコーディングがある程度わかる人ではないとお勧めしません。Dawnに代表されるOnline Store 2.0のテーマはドラッグ&ドロップで部品の移動ができますが、基本的に上下方向だけです。左右の配置や、divなどの骨子の構成はHTMLで記述されているので、Dawnのソースをいじるよりかは、テーマストアで自分のテイストに合うものを試してみる方が早いかもしれません(Dawn同様のOnline Store 2.0に対応しているものは、そのラベルが表示されています)

https://themes.shopify.com/

なお、テーマのコードの構成を知りたいときは、そのページ(上記だと商品ページ)をオンラインストアで実際に見て、ブラウザのinspectメニューでHTML要素を把握して、idやclass名で検索するのが基本的なやり方です。

Senior Partner Solutions Engineer
mimi6520
探検家
48 0 5

ありがとうございます!
確認できました!