スマホでのネットショッピングが増えている今、見やすさや使いやすさが売上に直結しています。
「Simple Plus Vertical」は、商品をダイナミックに魅せてユーザーの購買意欲を高め、売上アップをサポートするテーマです。
あなたもこのテーマで、魅力的なECサイトを作りませんか？
▼▼▼商品ページを見る▼▼▼
Welcart公式ECテーマ 「Simple Plus Vertical」
目次
簡単2ステップ！メインビジュアルに商品を並べる方法
Simple Plus Vertical（バーティカル）は、メインビジュアルの代わりに商品画像をページのトップに載せ購買意欲を高めるテーマです。
まず初めに、メインビジュアルに商品画像を載せる方法をお伝えします。
ステップ1：ヘッダーの画像を非表示にする
| 管理画面 | 外観 > カスタマイズ > ヘッダー画像 |
テーマをインストールした状態だと、デフォルトでメインビジュアルにヘッダー画像が設定されていますので非表示にします。
カスタマイズページのヘッダー画像設定画面で、「画像を非表示」をクリックし公開ボタンをクリックすると、ヘッダー画像の非表示ができます。
※ヘッダー画像が設定されていない場合は、ステップ1を飛ばしてステップ2に進んでください。
ステップ2：先頭固定表示でメインビジュアルに商品を並べる
| 管理画面 | Welcart Shop > 商品マスター > 商品編集画面 |
メインビジュアルに商品画像を載せるには、先頭固定表示という機能を使います。
先頭固定表示は商品詳細ページにあるので、任意の商品の詳細ページを開きます。
商品詳細ページの右上にあるチェックボックスにチェックを入れて保存ボタンをクリックすると先頭固定表示ができます。
トップのフロントページを確認してみてください。
メインビジュアル部分に商品が配置されているはずです。
先頭固定表示の件数で広がる表現方法
先頭固定表示は何件でも登録できます。
登録件数によって、メインビジュアルの見え方が変わりますので、それぞれの見え方を画像でご紹介します。
先頭固定表示件数が1件の見え方
先頭固定表示が1件の場合、登録した商品の画像が全画面に表示されます。
スマホもパソコンも同じ表示です。
先頭固定表示件数が2件の見え方
パソコンの場合、画面が左右で半分にわかれ、それぞれの商品が画面の半分ずつに表示されます。
スマホの場合は、先頭固定表示が1件の場合と同様に、各商品の画像が全画面に表示されます。
先頭固定表示件数が3件の見え方
パソコンの場合、画面が1/3にわかれ、それぞれの商品が画面全体を3つのエリアに分けて表示されます。
スマホの場合は、先頭固定表示が1件の場合と同様に、各商品の画像が全画面に表示されます。
先頭固定表示件数が4件以上の見え方
パソコンの場合、画像が2段表示になります。
1段目は先頭固定表示が登録されている件数によって、全画面表示・1/2・1/3のように表示が変わります。
2段目は先頭固定表示が3件の場合と同様、画面が1/3にわかれ、それぞれの商品が画面全体を3つのエリアに分けて表示されます。
スマホの場合は、先頭固定表示が1件の場合と同様に、各商品の画像が全画面に表示されます。
バランス重視なら登録は3の倍数で
パソコンでのレイアウトを美しく見せるためには、先頭固定表示を1件ではなく、3件、6件、9件、…といった3の倍数で登録することを推奨します。
3の倍数で登録することにより、画面全体をバランスよく活用し、商品がより視覚的に美しく配置されます。
あえて画面いっぱいに商品画像を配置するのも素敵なアイデアだと思いますので、自分なりのカスタマイズを楽しんでみてください！
商品画像トリミングの仕組み
商品画像に縦長・横長画像を登録すると、自動的にトリミングされてサイトに表示されます。
トリミングの仕組みを理解することで、より魅力的なサイトを作ることができます。
縦長画像を商品画像に登録した場合
商品画像に縦長の画像を設定した場合、スマホでは推奨している比率を元に表示されます。
パソコンでは画面に収まるように上下がトリミングされ表示されます。
横長画像を商品画像に登録した場合
商品画像に横長画像を設定した場合、パソコンでは推奨している比率を元に表示されます。
スマホでは画面に収まるように左右がトリミングされ表示されます。
以上、2点を踏まえて商品画像を登録し、思い通りに画像を表現してみましょう。
商品画像の推奨比率とサイズ
先ほどお伝えした推奨比率と画像サイズについては、こちらを参考にしてください。
| 縦長画像 | ・画像比率：9:16 ・解像度：1080px (幅) x 1920px (高さ) または 750px (幅) x 1334px (高さ) |
| 横長画像 | ・画像比率：16:9 ・解像度：1920px (幅) × 1080px (高さ) または 2560px (幅) × 1440px (高さ) |
「Simple Plus Vertical」を活用し、商品の魅力を視覚的に際立たせる、今までにない魅力的なサイトを構築しましょう！
▼▼▼商品ページを見る▼▼▼
Welcart公式ECテーマ 「Simple Plus Vertical」
この記事は役に立ちましたか？
0
PAGE TOP