Labo一覧

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

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

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

前回「トップページの構造と見せ方」の2回目です。2回目では、残りの各セクションをご説明していきます。

1.テキスト付き画像

テキスト付き画像では、左右どちらかに画像を表示し、横にテキストを表示します。画面幅が小さくなったときや、スマートフォンで表示したときには、上に画像、下にテキストが表示されるセクションです。

「画像」項目では、表示した画像をアップロードするか、Shopifyの無料画像ライブラリから選択します。

「画像アライメント」項目は、画像を表示する位置を左右どちらかを指定します。表示幅が小さいときは、自動で上下に構成されます。この場合、指定した位置に関係なく、上に画像、下にテキストとなります。

「見出し」項目は、テキストエリアのタイトルを入力します。

「テキスト」項目は、テキストエリアの本文を入力します。

「ボタンラベル」項目は、テキストエリアにボタンを表示したい場合に入力します。

「ボタンリンク」項目は、ボタンをクリックしたときの飛び先を指定します。

2.画像スライド

画像スライドは、複数枚の画像をルールに従って表示するセクションです。

2−1.設定

「スライドの高さ」項目は、画像表示エリアの高さを指定します。「最初の画像に適応する」を選択すると、最初の画像の高さに調整され、その他の画像も最初の画像の高さに調整されます。「大」、「中」、「小」は、画像スライドで定義された高さで設定されます。

「文字サイズ」は、画像にオーバーレイ表示するテキストのサイズを指定します。

「テキストアライメント」項目は、画像にオーバレイ表示するテキストの表示位置を指定します。

「オーバーレイを表示する」チェックボックスは、オーバーレイ表示をするかしないかを指定します。

「スライドの自動切り替え」チェックボックスは、複数の画像を自動で切り替えるかを指定します。指定しない場合は、画像下部にある切り替えボタンによる手動となります。

「スライドを変更する間隔」は、スライドの自動切り替えを選択した場合、画像を何秒おきに切り替えるかを指定します。切り替え間隔は、3、5、7、9秒の中から選択します。

2−1.CONTENT

表示したい画像をCONTENTセクションに追加していきます。

「画像」項目では、表示した画像をアップロードするか、Shopifyの無料画像ライブラリから選択します。

「画像アライメント」項目は、画像を表示する位置を指定します。

「見出し」項目では、オーバーレイ表示するテキストの見出しを入力します。

「小見出し」項目は、オーバーレイ表示するテキストの小見出しを入力します。

「ボタンラベル」項目は、オーバーレイ表示するテキストの下にボタンを表示したい場合に入力します。

「スライドリンク」は、ボタンをクリックした際に表示したいページの遷移先を指定します。

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

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

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

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

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

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

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

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

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

さいごに

前回に引き続き、トップページの構成を説明いたしました。デフォルトのテーマ「Debut」をカスタマイズする際に表示される項目は、全て説明いたしましたが、コレクションには、他にも種類がありますので、それらを次回以降に説明していきます。

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

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