【図解・Shopify(ショッピファイ)基礎編】ページデザインの編集方法を解説。テーマのインストール～設定・編集

この記事は「shopifyカリキュラム基礎編 -Day3-」となり、Shopifyテーマの設定・変更方法やデザインを編集する基本的な方法を初心者向けに解説いたします。

■あわせてよく読まれている記事：shopifyカリキュラム基礎編 - Day1～Day2 -

→【Day1】Shopifyの始め方や基本を解説
→【Day2】商品登録方法を解説

テーマを選択

無料のテーマであるDawnを選択

Shopify(ショッピファイ)ではTOPページや商品ページのデザインは
「テーマ」と呼ばれるテンプレートを主に活用して制作していきます。
テーマを切り替える事で簡単にTOPや商品詳細ページのデザインを変更する事が出来ます。

無料で利用できるテーマは、
Dawn、Taste、Ride、Studio、Refresh、Craft、Sense、Crave、Colorblock、Origin、Publisher
の11種類が用意されています。

このセクションからは、メインデザインであるテーマの設定を行っていきます。
今回は家具の専門店を作成していきます。（今回はDawnを利用します）
まずはテーマの設定から行っていきましょう。

Shopifyテーマのインストール

Shopifyのテーマはデザインや特徴も様々なので、
クライアント様のイメージに合ったものを選びましょう。

使用メニュー　オンラインストア＞テーマ
※初期設定ではDawnテーマがインストールされていますが、他のテーマを利用したい場合は、以下の方法で変更することが出来ます。

オンラインストア　→　テーマ
「人気のある無料のテーマを探す」から使用したいテーマを追加します。ここではCraftを選択します。

「メインテーマとして設定」を選択します。

確認画面で「公開する」を選択する事で追加したテーマに入れ替える事が出来ます。

ShopifyのTOPページを作成する方法

続いてTOPページの編集に入っていきます。
Shopifyではそのテーマのデザインに最適な「セクション」のテンプレートが
既に作成されており、セクションを配置する事でレイアウトを編集する事が出来ます。

TOPページのデザインを編集する方法

Shopifyのレイアウト変更は手軽に行えます。
セクションを活用しレイアウトを設定していきましょう。

使用メニュー　オンラインストア＞テーマ＞・・・ボタン

テーマの編集を行う前にバックアップ（複製）をしておきます。
テーマ　→　・・・ボタン　→　複製
を選択します。

複製されたテーマの名前を変更します。
テーマ　→　・・・ボタン　→　名前の変更
を選択します。
名前は「(テーマ名)_年月日」等にしておくと分かりやすいです。

名前を変更したテーマの「メインテーマとして設定」を選択します。

確認画面で「公開する」を選択します。

これで複製したテーマに入れ替える事が出来ました。

テーマのカスタマイズを行っていきます。
現在のテーマ　→　カスタマイズ
を選択します。

テーマエディターの画面が表示されます。

①戻るボタン…管理画面に戻ります。
②セクション設定…メインレイアウトはここで作成します。
③テーマ設定…背景色やヘッダー、フッターカラー、文字色やフォントの変更を行えます。
④ヘッダー・告知バー…デフォルトでヘッダーと告知バーが配置されています。
　表示項目は後述のメニューの作成で行います。
⑤セクション…この領域は「セクション」と呼ばれます。ページ内に自由に配置、
　追加、表示・非表示、削除が出来るので、メインレイアウトはここで作成します。
⑥フッター…デフォルトでフッターが配置されています。
　表示項目は後述のメニューの作成で行います。
⑦表示・非表示…目のマークを押すとセクションの表示・非表示の切り替えが出来ます。
⑧場所移動…クリックしたままカーソルを動かすと好きな位置にセクションを移動出来ます。

セクションを編集してベースとなるレイアウトを作ります。
まずは現在配置されているセクションを一旦削除します。
削除するセクションを選択して下さい。

セクションを選択すると画面右側に編集画面が表示されます。編集画面の一番下にある「セクションを削除する」を選択してセクションを削除して下さい。
※ヘッダーの上にある告知バーも今回使用しないので削除します。

全てのセクションが削除出来たら次のスライドに移動して下さい。
※ヘッダー、フッター、マルチカラムは削除出来ません。

デモページに沿ってレイアウトを作っていきます。
以下の指定通り、セクションを並べましょう。

①スライドショー…画像コンテンツ内から選択します。
②特集コレクション…コレクションコンテンツ内から選択します。
③コレクションリスト…コレクションコンテンツ内から選択します。
④テキスト付き画像…画像コンテンツ内から選択します。
⑤テキスト付き画像…画像コンテンツ内から選択します。
　※画像の位置の入れ替えは各セクションの設定項目で解説します。

⑥ブログ記事…ブログコンテンツ内から選択します。
⑦動画…ビデオコンテンツ内から選択します。
⑧特集商品…商品についてコンテンツ内から選択します。

これで全てのセクションの配置が完了しました。
必ず右上の「保存する」をしておきましょう。

セクションに要素を追加しよう

TOPレイアウトの大枠が完成した所で、各セクションに要素を追加したり、
カラーを調整したりしてサイトの見た目を整えていきます。
細かい設定も多く大変ですが、大切な部分です。

各セクションを編集する

ページ全体のセクションの編集を行います。

使用メニュー　オンラインストア＞テーマ＞カスタマイズ

※テーマの編集を行う前にバックアップ（複製）をしておきましょう。

ヘッダーの編集から行っていきます。

テーマエディターの画面からヘッダーを選択して下さい。

①ロゴ…サイトロゴをアップします。
　ファイル名：trans_logo1.jpeg
②ロゴのサイズ…ロゴのサイズを160ピクセルに変更します。
③レイアウト調整…以下の項目にチェックを入れます。
・デスクトップのロゴ位置を中央とする
・ヘッダーに区切り線を表示する
・常時表示のヘッダーを有効にする

これでヘッダーの設定は完了です。

スライドショーの編集をしていきます。

①スライドショー…編集したいスライドを選択します。選択すると右の画面に推移します。
②画像のアップ…表示したい画像をアップし、表示位置の調整を行います。
　1. orange-cat-guards-kitchen.jpg
　2. houseware-home-and-kitchen-décor.jpg
　3. coffee-pours-from-a-french-press.jpg
　4. livingroom-rainbows.jpg
③オーバーレイ不透明率…オーバーレイ時の不透明率を設定します。
　不透明率・・・0％
④スライドの高さ…スライドショー全体の高さを指定します。
　今回は「大」で設定を行います。
⑤スライドの自動切り替え…スライドを自動で切り替えるかどうかの設定を行います。
　自動でスライダーが流れるようにしたいのでチェックをして下さい。

これでスライドショーの設定は完了です。

特集コレクションの編集をしていきます。

①見出し…コレクション上部の見出しを記述します。
　見出し：New Items
②コレクションの指定…
　このエリアに表示したいアイテムを内包するコレクションを指定します。
　「変更」を選択すると次の画面に推移します。
③コレクションの選択…作成したコレクションの一覧が表示されます。
　今回は「テーブルウェア」を選び、右下の「選択」を押して下さい。
④表示数…1行の表示商品数と何行表示するかを設定します。
　今回の設定は「表示する最大の商品：4」「デスクトップの列数：4」
⑤販売元情報の表示…商品登録時に設定した販売元の表示・非表示を切り替えます。
　今回は「表示する」にします。

これで特集コレクションの設定は完了です。

コレクションリストの編集をしていきます。

①コレクションリスト…どのコレクションを表示させるかを設定します。
　選択すると次の画面に推移します。
②コレクションの選択…
　「コレクションを選択する」を選択すると次の画面に推移します。
　先程の特集コレクションの時と同じようにコレクションを選びます。
③表示するコレクションの指定…
　今回は、
　・テーブルウェア
　・ファブリック
　 ・プレート、お皿
　の3つのコレクションを表示させたいので各々選択して下さい。
　選択したら右下の「選択」を押して下さい。
④見出し…コレクション上部の見出しを記述します。
　見出し：Pick Up Collection

これでコレクションリストの設定は完了です。

テキスト付き画像の編集をしていきます。

2つ同じセクションがあるので、一緒に解説します。

①画像…表示させたい画像を選択します。
　上：morning-sun-bathes-the-room-in-light.jpg
　下：copper-light-in-bedroom.jpg
②デスクトップ画像の配置…選択した画像を左右どちらに表示させるかを選べます。
　上側に表示させるコンテンツの方は「右」
　下側に表示させるコンテンツの方は「左」
③見出し…見出しテキストを記述します。
　上側：フィットする暮らし、つくろう
　下側：自分にフィットするものを捜し、それに出会う
④テキスト…表示するテキストを記述します。
　（下記の記載テキストを記述して下さい）
---------
上側テキスト
Transcosmosは、オーダーメイドなライフスタイルを求めるお客様を、
様々なWEBサービスの提供を通して、お手伝いすることを目的に設立されました。

私たちは、人生が自分用にあつらえられたかのように、「フィットしている」と
感じられる事こそ、本当の意味で豊かで幸せなことだと考えています。

下側テキスト
その過程で誰かと比較する必要も無い、自分用のフィットする暮し方をつくって行く。

そうやって多くの人々が、自分の人生をお気に入りの着心地抜群のシャツのように
感じるようになったなら、自由で、多様で、寛容で、ハッピーな世の中に
なるんじゃないか。そんなことを夢見ています。
---------

これでテキスト付き画像の設定は完了です。

ブログ記事の編集をしていきます。

①見出し…TOPページに表示されるタイトルを入力します。
　今回は新着記事を主に表示させたいので「News」とします。
②表示記事…表示させたいブログのカテゴリーを選択します。
　変更を選択し、次の画面で選びます。
③ブログを選択する…既に作成されているブログ記事のカテゴリーが
表示されますので選択します。
　今回は「ニュース」を表示させたいので選択します。
　選択したら右下の「選択」を押して保存します。
④投稿…横一列に何個のブログ記事を表示させるかを設定します。
　今回は「4」にします。
⑤表示項目…サムネイルや記事へのリンクを設定します。今回は
　・日付を表示する
　・記事のサムネイルを表示する
　・「すべて表示」ボタンを表示する
　にチェックを入れて下さい。（それ以外の項目のチェックは外してください）

これでブログ記事の設定は完了です。

動画の編集をしていきます。

①見出し…タイトルの設定を行います。今回は空欄にして下さい。
②カバー画像…画像の選択をする
③URL…ビデオのURLを貼り付けます。
　https://www.youtube.com/watch?v=QDuMgTI2Kj4

これでビデオの設定は完了です。

特集商品の編集をしていきます。

①商品選択…表示したい商品を選択します。
　変更を選択すると次の画面で商品を選択することが出来ます。
　今回は「お皿」を選択して下さい。
　選択したら右下の「選択」を押します。
②メディア…表示の仕方を選択します。
　デスクトップのメディア位置は、「左」を選択します。
　選択したら右下の「選択」を押して保存します。
③テキスト…販売元を表示させます。
④購入ボタン…ボタンの表示、非表示を行います。
　「動的チェックアウトボタンを表示」にチェックします。

これで特集商品の設定は完了です。

フッターの編集をしていきます。

今回は

・フッターメニュー　・ニュースレターの登録　・ソーシャルアイコン
の3つを表示させます。
セクションの編集と同じ要領で場所を入れ替えたりしてください。

①フッター…フッターに表示するメインメニューを選択します。
　見出し：Service
②決済方法…利用可能な決済一覧の表示・非表示を設定します。
　「決済アイコンを表示する」にチェックします。

これでフッターの設定は完了です。

テーマの設定をしよう

次に、サイト全体のカラーや文字の色などを細かく設定していきます。
Shopifyでは、特にCSSを編集する事無く設定が可能です。

テーマの設定を行う

デモページのと同じ見た目にする為に設定していきます。

使用メニュー　オンラインストア＞テーマ＞カスタマイズ

「レイアウト」を選択し、ページの幅を1600pxに設定します。これでワイド画面で見た際に、ページ内のコンテンツが均等に配置されるようになります。

「レイアウト」を選択し、「ワイドレイアウトを有効にする」
にチェックを入れます。

これでワイド画面で見た際に、ページ内のコンテンツが
均等に配置されるようになります。

ファビコンの設定を行います。

ファイル名：trans_logo1.jpeg

SNSの設定を行います。

ここで設定したSNSのアイコンがフッターに表示されます。

Twitter… https://twitter.com/transcosmos_pr
Facebook… https://www.facebook.com/transcosmos
Instagram… https://www.instagram.com/transcosmos_fuk/?hl=ja
Youtube… https://www.youtube.com/channel/UC0arTSNRU_3Lx-rlo22N63w

また、Shopifyのデザインのカスタマイズや、コード編集・使い方を追加で参考したい方は、ニュートラルワークスのこちらの記事もご参考にしてみてください。

■「shopifyカリキュラム基礎編」その他の記事はこちら↓です。併せてご覧ください。

前の記事↓
【Day1】Shopifyの始め方や基本を解説
【Day2】商品登録方法を解説

次の記事↓
【Day4】ヘッダー・フッタのメニュー作成・編集方法を解説
【Day5】配送設定と決済テスト方法を解説
【Day6】アプリのインストールと設定、liquidコード編集方法を解説
【Day7】いろいろなページの作成方法PageFlyの使い方を解説