Shopifyでまずは管理画面上からTOPページデザインをカスタマイズ。

Shopifyのカスタマイズをこれからやっていきたいが、操作方法がわからない!という人も多いと思います。
僕も正直、最初はさっぱりわかりませんでした。検索してもまだチュートリアル系の記事があまりないのです。Wordpressのチュートリアルの記事のようにブロガーさんやオウンドメディアの記事がまだ乱立していないので、Shopifyの公式サポートサイトか、限られた情報を頼りにやる、なければ自分で色々触ってみる、ということになります。
なので、今回から、Shopifyのカスタマイズの情報を少しずつ書いて行こうと思いますので、参考にしていただければ幸いです。

まずは、TOPページを触ってみよう。

まず最初に、なんとなく慣れるために、TOPページからみてみたいと思います。
(説明の画像はすでに少しカスタマイズしてしまっていますが)
今回は、公式の無料テーマ「Debut」でカスタマイズしてきます。
管理画面の、左メニュー「テーマ」をクリックすると、画面の右側に、「カスタマイズ」ボタンが出てくるので、こちらをクリックします。

画面左のメニューから、パーツを編集できる。

「カスタマイズ」ボタンを押すと、こちらのTOPページの編集画面が現れます。
左のメニューがTOPに表示するパーツになります。
削除したり、増やしたり、編集したりできます。様々なパーツが用意されています。

パーツを新規作成するときは、「セクションを追加」

パーツの新規作成をしてみましょう。
左メニュー下の方にある、「セクションを追加」を押すと、何のパーツを追加するのかをまず選ぶ画面になります。
複数のメニューができてますので、追加したいパーツを選択し、編集していきましょう。 例えば、下記は、「コレクションリスト」パーツを追加した場合の画面です。
見出しのテキスト入れ替え、1列に何個並べるか、ということが選択でき、どのコレクションを表示するかを選択する機能があります。
(「コレクション」というのはいわゆる商品カテゴリのことになります。アパレルでいうと例えば、「OUTER」「T-Shirts」「Pants」のようなカテゴリわけが該当します。コレクションの項目は別画面(「商品管理」>「コレクション」)で登録する必要があります。) コレクションを選択すると、下記のように反映されます。 (画像はコレクションの編集画面(「商品管理」>「コレクション」)の方でアップロードをしておく必要があります)

「セクションを追加」で追加できるパーツ一覧

下記が、セクションを追加で追加できるパーツのリストです。 今回は一つ一つにパーツの編集方法については、省略させていただきますが、画像のアップロードや、テキスト入力、商品を何列配置にするか等の整列の仕方等の項目が設定できます。実際に入力してみて色々試していただければと思います。
追加したパーツをドラッグアンドドロップすることで、パーツの上下位置も入れ替え可能になります。


★コレクション
・コレクションリスト
・特集コレクション

★ストア情報
・マップ

★テキスト
・お客様の声
・リッチテキスト
・画像付きテキスト列

★ブログ
・ブログ記事

★プロモーション用
・メールマガジン

★動画
・動画

★商品
・おすすめ商品

★画像
・ギャラリー
・スライドショー
・テキストオーバーレイ付き画像
・テキスト付き画像
・ロゴリスト

★高度なレイアウト
・コンテンツをカスタムする

まとめ

今回はTOPページの編集方法でした。
次回は、ヘッダー・フッター(HEADER・FOOTER)の編集方法を書いていきたいと思います。

WEB制作についてのご相談はお気軽にどうぞ。

WEBデザイン制作、ブランディング、Wordpress構築・カスタマイズ、
WEBサイトに関するお見積もり・不明点やご相談等、お気軽にお問い合わせください。

この記事を書いた人
KEiSoN★
スカイゴールド株式会社 代表取締役 / クリエイティブディレクター/フルスタックwebデザイナー

2009年1月よりフリーランスのディレクター/フルスタックWebデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、 タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。

アーカイブ