Liquid、JavaScriptなどに関する質問
表題の通りですが。
Dawnの商品詳細ページが
デフォルト(商品画像がある時)では左に商品画像、右に文字群(管理画面でカスタマイズできる範囲)の2カラム構造ですが、
最初にタイトル、値段、ボタンなどなど
下に画像、
その下にエディタ部分の表示
の1カラムの3段構成にしたいのですができますでしょうか?
よろしくお願いします。
解決済! ベストソリューションを見る。
成功
テーマのカスタマイズ>コードの編集でファイル構成を表示して、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に対応しているものは、そのラベルが表示されています)
なお、テーマのコードの構成を知りたいときは、そのページ(上記だと商品ページ)をオンラインストアで実際に見て、ブラウザのinspectメニューでHTML要素を把握して、idやclass名で検索するのが基本的なやり方です。
成功
テーマのカスタマイズ>コードの編集でファイル構成を表示して、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に対応しているものは、そのラベルが表示されています)
なお、テーマのコードの構成を知りたいときは、そのページ(上記だと商品ページ)をオンラインストアで実際に見て、ブラウザのinspectメニューでHTML要素を把握して、idやclass名で検索するのが基本的なやり方です。
ありがとうございます!
確認できました!
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023