ShopifyでECサイトを運用する際に初期に直面するのがサイトデザインです
Shopifyはノーコード（本来であれば専門的な知識を必要とするサイト構築に必要なコードを書かなくてもサイトの動きや表示を再現できる）でサイトを構築するのに大変優れています
Shopifyも数々の改善を重ね、サイト構築初心者でもデザイン変更が容易なように直感的なカスタマイズ画面になってきています
今回はShopifyをノーコードでカスタマイズするために事前に知っておきたい基本的な知識をまとめています
Shopifyのテーマのカスタマイズとは
今回説明するために利用したテーマはShopifyの無料テーマ「Dawn」使用しています
基本の基！テーマカスタマイズの概要説明
Shopifyのテーマカスタマイズの大枠の説明から行います
カスタマイズページはざっくり下図のような機能があります
①三点リーダーのアイコン：テーマのバージョン確認やコード編集・文言編集を行える
②マーケット別の切り替え：海外での販売やB2Bを別途設定している場合に利用（特に使用しない場合はデフォルトでOK）
③ページ切り替え：「ホームページ」がサイトのトップ、ここを切り替えることで商品ページやコレクションページのデザイン変更を適用できる。カートやチェックアウト画面、お客様アカウント（会員ログイン後）の簡単な変更も可能
④インスペクター：カスタマイズ時にどの部分を変更するか、より直感的に編集しやすくする機能。インスペクターを有効にすることで変更したいエリアをクリックすると設定エリアが出現する。詳しくはこちら
⑤デバイスごとの表示：デスクトップ表示・モバイル表示・フルスクリーンに切替可能。見た目のチェックに役立つ
⑥セクション：⑦のテーマ設定よりも落とし込んだデザインの設定編集を行える
⑦テーマ設定：テーマの大枠の基本となるところの設定（色・フォント・余白などすべてのページの肝となる設定）
⑧埋め込みアプリ：アプリインストール後に適用したり適用を外したりする
カスタマイズというと基本的に⑥もしくは⑦を設定編集することで独自のデザインに置き換えることができます
適宜④、⑤を使用したり、TOPページ以外の変更は③を切り替えたりしてデザインの設定をしていきます（③を使用せずに、ページ遷移で自動的に編集ページも切り替わるのでその方法で進めてもOK）
基本の基！テーマカスタマイズの「セクション」の仕組み
「ヘッダー」「フッター」「テンプレート」について
セクション設定のホームページ（サイトのTOPページ）を見てみましょう
編集の設定は大きく3つのエリアから成り立っています
- ヘッダー
- テンプレート
- フッター
これら3つのエリアでデザインや表示内容を設定していきますが、ヘッダーとフッターは全ページ共通の内容となり、例えば商品ページだけヘッダーの内容を変更したい！という要望はこれだけでは叶いません（別途アプリやコードカスタマイズの知識が必要）
テンプレートの箇所がここの③で説明したページの切り替えに応じて編集が可能な箇所となります
「テンプレート」などのカスタマイズでの構造の深掘り
テンプレートに限らず、Shopifyのカスタマイズページは「セクション」「ブロック」というパーツを追加・編集しサイトの見た目を調整していきます
セクションには後ほど紹介する17パターンの見せ方があり、セクションによってはその内部に「ブロック」というパーツが存在します
それらを組み合わせたり編集したりすることで店舗独自のデザインを作ることができます
上図は動画なのでわかりやすいかと思うのですが、「セクション」パーツに「ブロック」というパーツが内包されて（折りたたまれて）いることがわかります
画像バナーというセクションの中に、テキストとボタンというブロックパーツが存在することを意味しています
それぞれのパーツをクリックしてみてください
そうすることでそれぞれの詳細な設定をすることができます
セクション内にブロックが存在する場合でもそのセクションの設定編集をすることができます
まれにこの箇所から設定ができないと思いこんでいるケースもありますので、抜けなく設定を行いましょう
「テンプレート」にセクションを追加する
セクションの追加方法は簡単です
下図のように「セクションを追加」から最適なセクションを追加します
Shopifyの改変で、どのセクションがどのような見た目となるのか適用前からわかりやすい仕組みになっています
それらを参考に追加を行っていきましょう
セクションの種類については以下の記事に詳細をまとめています
まとめ
Shopifyのテーマをノーコードで行うことは比較的容易に行なえます
前提条件や基本知識を備えてスピーディーに変更が行えるようになると幸いです
