Shopifyでコレクションページの商品一覧の行数・列数の設定変更をする。

2019.07.16

2020.08.17

今回は、Shopifyでコレクションページの商品一覧の行数・列数の設定変更をしてみます。
こちらもCSSをカスタマイズする必要がなく、管理画面上から簡単に設定変更ができます。

まずは、カスタマイズ画面へアクセス

管理画面の、左メニュー「テーマ」をクリックすると、画面の右側に、「カスタマイズ」ボタンが出てくるので、こちらをクリックします。

Screen Shot 2019 07 07 at 14.37.18

コレクションページで編集

次に、画面の上部に、「ページを選択」というプルダウンメニューがありますので、こちらの「コレクションページ」を選択すると、コレクションページ(商品一覧)の設定画面になります。

Screen Shot 2019 07 16 at 13.19.38

左メニュー「コレクションページ」で設定変更

左メニュー「コレクションページ」をクリック。

Screen Shot 2019 07 16 at 13.28.53

スライダーで数値を変更

左メニュー「コレクションページ」をクリックすると、編集画面が出てくるので、こちらの、数値をスライダーで変更しましょう。

Screen Shot 2019 07 16 at 13.28.29

3列に変更しました。綺麗に変更されますね。
Screen Shot 2019 07 16 at 13.33.10

とっても簡単です。

1列のリスト表示

また、レイアウトのプルダウンを、「リスト表示」することで、一列のレイアウトに変更することも可能です。

Screen Shot 2019 07 16 at 13.34.52

まとめ

最初「ページを選択」のメニューの存在自体に気がつかなかったので、どこで設定するんだろうと、少しだけ考えましたが、見つけた時は、「ここなんだ!」とちょっと感動しました。
微妙にわかりづらい場所にあったので、紹介させていただきました。
この調子で他の画面も紹介していきたいと思います。

KEiSoN★

デジタルハリウッドオンラインスクールで、webデザインの基本を学ぶ。
2007年よりECカート開発会社にてwebディレクター/webデザイナーとして従事。マネージャー職も務める。
2009年1月よりフリーランスのwebディレクター/Webデザイナーとして独立。2015年11月にスカイゴールド株式会社として法人化。
中小企業向けのWebブランディング・デザイン、Wordpressのオリジナルテーマ開発が得意。
国内外の様々な価値観・クリエイティブに接触することで、幅広いクリエイティブや臨機応変にアイデアを提供する。