Shopifyではページをデザインする方法がいくつかあります。 その中でも、最もベーシックなのが「テーマカスタマイズ」の画面を開いての編集。Shopifyデフォルト機能ですし、ノーコードで感覚的に編集が可能です。
ストア運営者の方も、使用する機会の多い部分です。 簡単にテーマカスタマイズ画面を使ってみましょう。
テーマカスタマイズの準備
テーマをカスタマイズしたい時は、念のためにテーマを複製して、複製した方のテーマを触っていきましょう。カスタマイズ画面を使う場合も、コードを編集する場合も、複製での作業をオススメします。
テーマを複製する
ストアダッシュボードの左メニューから、オンラインストアを開きます。 現在のテーマの「アクション」をクリックして、メニューの中から複製を選びます。
スクロールダウンしていくと、ページ下部にテーマライブラリーがあります。
「Dawnのコピー」というテーマが追加されています。 アクションから、メインテーマとして設定をクリック。
公開ボタンを押して、複製したテーマを適用します。
テーマのカスタマイズ画面を開く
「Dawnのコピー」が現在のテーマに反映されたら、カスタマイズをクリック。
ページビルダーのような画面が表示されます。
こちらがShopifyのテーマカスタマイズ画面。 ノーコードで、ストアのデザインを変更することが出来る画面です。
テーマをカスタマイズしてみよう
ページテンプレートを切り替える
テーマカスタマイズ画面で、最初に表示されているのはホームページ。 確認したい商品ページに切り替えてみましょう。
ページテンプレートの切り替えは、カスタマイズ画面最上部のプルダウンから行います。
商品 > デフォルトの商品を選択。
見覚えのある、商品ページが表示されました。
テンプレートにカスタマイズ画面の概要
カスタマイズ画面は以下のような3カラム構成になっています。 （※画面幅が小さい時は1と3が合体し、2カラムになります）
1：ページ内で表示するブロック
2：テンプレートのプレビュー
3：各パーツのカスタマイズ
１のサイドバーでは、ページを構成しているパーツ（セクション、ブロック）の追加や削除、並べ替えができます。
３のサイドバーでは、固定パーツのカスタマイズが出来ます。 例えば、先程商品プレビューで見た箇所にテキストを入れたり、その下のダミー画像を差し替えたりすることができます。
なお、商品登録の方から入力している、商品タイトルや説明文などは打ち替えることが出来ません。出来るのは表示位置の移動や、非表示、削除の設定だけです。
商品固有の情報は商品登録から、商品ページ（同じテンプレートを使うページ）に共通で表示させたいものはテンプレートから、とそれぞれの入力内容や設定を組み合わせて、1つのページを作っているイメージです。 また、商品ページのテンプレートは増やすこともできます。
ブロックの非表示
アパレルの場合、素材やサイズは商品によって違いますね。
このカスタマイズ画面上で打ち込むと、どの商品も同じ表記になってしまいます。 ですので、“折りたたみ可能な行”を、一旦、非表示に変更してみましょう。
左側のブロック並びにある、目のアイコンをクリックすると早いです。
画面右上の「保存する」ボタンをクリックして、変更を保存してください。 左上にあるアイコン（閉じる）で、カスタマイズ画面を終了します。
このように、ブロックを組み合わせるようなかたちで各ページをレイアウト・カスタマイズ出来るのもShopifyの特徴です。コーディングスキルが無い方でも、文言や画像の変更が簡単にできるので良いですね。
ただし、ノーコードでのカスタマイズには、まず、プレビューに使われるものを登録する必要があります。商品やブログ記事などは、1件も登録されていない状態だとカスタマイズ画面を開けません。ここだけ注意しましょう。
