Labo一覧

shopify 3分で分かる運用設定 #006 トップページの構造と見せ方①

shopify 3分で分かる運用設定 #006 トップページの構造と見せ方①

shopify 3分で分かる運用設定 #006 トップページの構造と見せ方①

ECサイトのトップページは、お店にとっての顔です。Shopify では、簡単にトップページの構成を変えることができますので、季節や新製品の販売、その他のトピックスに応じて柔軟に構成を変え、顧客に訴求することができます。

今回は、トップページの構造と変更の仕方を見ていき、あなたのお店を魅力的に見せる方法を探っていきます。

1.トップページを編集する

まず、Shopifyの管理画面の左メニューにある「オンラインストア」をクリックします。画面には、テーマというタイトルの設定画面が表示されます。

現在のテーマから「カスタマイズ」ボタンをクリックすると、テーマのカスタマイズ画面(編集)が表示されます。

これで、トップページを編集する準備が整いましたので、トップページの構成を見ていきましょう。

2.トップページの構成

前出のスクリーンショットは、Shopifyを始めたときのデフォルトテーマ「Debut」です。その他の無料のテーマ、または有料のテーマ、はたまたオリジナルで一から作成した場合においても、基本的な構造は変わりません。

左メニューにあるのが、トップページを構成するセクションの一覧です。このセクション順に右のライブビューが構成されており、左のセクション項目を変更することでリアルタイムに右側のライブビューが変更されます。

(※今回は、トップページの構成に関することをテーマに取り上げているため、セクションタブの隣にあるテーマ設定は取り扱いません)

2−1.ヘッダー

この項目は、サイト全体のヘッダーセクションを変更するためのものです。サイトのロゴやメニューなどを取り扱いますが、今回はトップページ構成をテーマとして取り扱っておりますので、ここでは詳しくは述べません。

2−2.テキストオーバーレイ付き画像

このセクションは、トップページのヒーローエリア(一番上にある大きな画像エリア)を編集するセクションです。「テキストオーバーレイ付き画像」セクションをクリックすると編集メニューが表示されます。

「画像」項目には、表示させたい画像をアップロードするか、Shopifyの無料画像から選択することができます。

「画像アライメント」項目は、画像の縦方向の表示位置を選択します。

「レイアウト」項目は、画像の横幅をレイアウトサイズに応じてサイズ変更する「全幅」か、サイズ変更しない「固定幅」を選択します。

「セクションの高さ」項目は、セクションの高さを調整します。「特大」から「極小」までの5段階の中から選ぶか、設定した画像の高さ「画像に適応する」を選択します。

「文字サイズ」項目は、「大」「中」のいずれかを選択します。

「見出し」項目は、画像にオーバーレイ表示させるタイトルを入力します。

「テキスト」項目は、見出しの下に表示する説明文を入力します。

「ボタンラベル」項目は、見出しの下にボタンを表示させ、顧客にアクションさせたい場合に登録します。また、次項目であるボタンリンクでボタンをクリックした後のアクションを設定できます。

「ボタンリンク」項目は、ボタンをクリックされたときに遷移する先を設定します。ページのURLか、Shopifyのコレクションや商品、またはブログ記事などへのリンクなどへの設定ができます。

2−3.特集コレクション

特集コレクションは、あなたの取り扱っている商品をコレクションという単位で括っているものの中から選択し、登録されている商品を表示するためのセクションです。

例えば、季節ものであれば、スプリングコレクションという名前のコレクションを作成し、春先に販売を強化したい商品を登録しておくことで、簡単にセクションへ商品を並べることができます。また、逆にスプリングコレクションに後から商品を追加した場合も、トップ画面に自動的に反映されます。

「見出し」項目には、このセクションのタイトルを入力します。例えば「2020年 最新スプリングコレクション」といった感じで、顧客に訴求ポイントを加味したタイトルを考えて入力してください。

「コレクション」項目には、Shopifyのコレクション機能で作成したコレクションを選択します。まだ、コレクションを作成していない場合は、「Edit collection」というアンカーをクリックして、コレクションを作成してください。

「行あたりの商品数」項目は、横に並べる商品数を指定します。2から5の範囲で選択することができますので、変更したときの商品画像の大きさから適切な商品数を選択してください。

「行」項目は、縦に並べる商品数を指定します。1から5までの範囲で、並べたい商品数を選択してください。

「商品の販売元を表示する」項目は、各商品の販売元を表示するか、しないかの選択をします。自社販売の商品だけであれば不要ですので、チェックしなくて構いません。

「「すべて表示」ボタンを表示する」項目は、先ほどの商品表示数(横2〜5、縦1〜5)で表示しきれない商品を表示するためのボタンを表示するための項目です。この「すべて表示」ボタンをクリックすると、このセクションで表示しているコレクションページに遷移します。

さいごに

トップページの構成についてご説明してきましたが、項目数が多いので複数回に分けてご紹介していきます。テーマによって、見え方は異なりますが、基本的な項目は変わりませんので、デフォルトのテーマ「Debut」で操作を慣れて頂き、他のテーマを選択してみることをお勧めいたします。

また、gootboxでは、これからECを事業として取り組まれる予定の企業様に向けて、相談会を随時開催させて頂いておりますので、下記のフォームにてお問い合わせください。

無料相談お申し込みフォーム

執筆者
gootbox
デジタルマーケティングアーキテクト
渡部 知記