Online Merchandising: How to Layout your Products

Online Merchandising: How to Layout Products in Online Store

15 min read

食料品店が牛乳を店の奥に置き、チョコレートをチェックアウトカウンターの近くに置く理由を考えたことはありますか??

単純: 必需品を店の後ろに置くことで、買い物客が歩き回り、他の製品を閲覧するようになります. 小物を置く (チョコレートのように) 衝動買いを促すレジカウンター付近.

これはすべて店舗デザインの科学の一部です. の右の店舗レイアウト売り上げを伸ばすことができます, ロイヤルティを向上させ、顧客が欲しいものをより早く見つけられるようにします.

あなたのオンラインストアも例外ではありません. 製品の構成とレイアウトは、何に大きな影響を与えますか (そしてどうやって) 顧客はあなたから購入します.

記事上で, 売上とコンバージョンを最大化するために製品をレイアウトする方法を紹介します.

3 製品レイアウトを選択する際の考慮事項

製品のレイアウトは、最初に取り組むときは単純な問題のように聞こえるかもしれません. でも, eコマースのほとんどのものと同じように, 詳細に飛び込むと、複雑さが明らかになります. 製品レイアウトを選択する際に考慮しなければならない 3 つの点があります。:

1. 選択

選択は、e コマースストアにとって両刃の剣です。. 選択の欠如は、機会を制限することを意味します. 選択肢が多すぎる, でも, 訪問者を混乱させてしまいます.

スーパーマーケットの商品

効果的な製品レイアウトは、本質的にこの二面性のバランスをとるプロセスです. あれは: 豊富な選択肢の印象を与える, サイトの使いやすさとナビゲートしやすさを維持しながら.

科学は言うその意思決定は精神的に負担がかかる. 買い物客に選択肢が多すぎる場合, 彼らはまったく選択をしない傾向があります.

では、店舗のレイアウトでこの問題をどのように克服しますか?

解決策の 1 つは、追加の商品につながるアイキャッチ画像を使用することです。. 例えば, 方法に注意してくださいメイドドットコム製品カテゴリ全体に個別の画像を使用 (「ガーデン家具」など):

作った家具

これは、買い物客を引き付けるティーザーと考えてください。.

理想的には, ベストセラーまたは最も望まれる製品を前面と中央に維持したい場合.

したがって, レイアウトプロセスを開始する前に, 以下を列挙する:

商品範囲全体とそれぞれのカテゴリとサブカテゴリ
「ベストセラー商品」などの機能カテゴリ, "おすすめ商品", 等. とその中の製品.

次のステップは、この情報を使用して、よく整理されたナビゲーションメニューを作成することです。. Amazon がメニューで製品をカテゴリに分類する方法に注目してください.

これを行うことで、買い物客は選択肢が多すぎて圧倒されることなく、欲しいものを見つけることができます。.

Ecwid ストアが Web サイトに追加されている場合, コードを追加してナビゲーションメニューを追加できます:

for a horizontal layout
垂直レイアウトの場合.

Ecwid の垂直カテゴリ Ecwid の水平カテゴリ

Here are the instructions for Ecwid stores added on ワードプレスとウィックスウェブサイト, それも. Ecwidインスタントサイトで, 水平メニューのみが利用可能です.

2. 商品情報

店舗のレイアウトを選択する際に実行する必要があるもう 1 つのバランスをとる行為は次のとおりです。: 製品情報の表示.

顧客がクリックして購入するために必要な情報を提供したい. 同時に, you don’t want to overwhelm them with too many details – at least not before they are on the actual product page.

Your mental model in this situation should be to ease decision making and pique customer interest. Ask yourself: what minimum information do my customers need to click through on a product?

You’ll find that this answer varies from store to store and product to product.

例えば, notice how Amazon gives you just four information points on the category page: product name, 価格 (including discount), rating and Prime availability:

Amazon product info

In Ecwid, you can add similar ratings and reviews with the help of the Stampled.io app.

Though this information is necessary for a large retailer like Amazon, for smaller businesses like Sand & Stone Jewelry, ratings aren’t as important. Hence, the category pages only show product name and price.

Sand & Stone Jewelry

It’s easy to fall into the trap of giving away too little information in category pages. The best way to avoid this is to interview your customers and ask them what information they use to make purchase decisions.

3. Store design

How you’ve designed your store will have a big impact on your product layout.

An e-commerce store will typically have three key pages:

ホームページ
Category and search pages
Individual product pages

What products you choose to showcase on each page-type will decide what products your customers end up buying.

例えば, note how Amazon promotes its own products on its homepage if you haven’t signed in:

Amazonで宣伝されている商品

店舗がホームページで最新のオファーを宣伝するのは一般的です. これらのオファーをターゲットオーディエンスに合わせるようにしてください. ベストメイドコー, 例えば, 男性顧客が多いことを念頭に置いて、父の日のプロモーションを実施します.

ベストメイドコー

焦点を合わせる:

お客様に買ってもらいたい商品を考える (理想的にはあなたのベストセラー, および/または最高利益率の製品)
異なるページタイプ間でデザインの統一性を維持する.

ベストセラーや新着商品を強調するかどうか, Ecwid を使用すると、次のカテゴリを作成できますホームページのおすすめ商品必要に応じて名前を付けます.

Ecwidのホームページの注目製品

6 e コマースの商品レイアウトのベストプラクティス

確かに、e コマースストアに独自のレイアウトスキームを作成できますが、, いくつかのベストプラクティスに従うと役立ちます.

1. スクロールせずに見える範囲でトップの商品とオファーをプッシュする

「アバブザフォールド」領域は、顧客が最初にサイトにアクセスしたときに表示される画面領域です。. 実際には, この領域は 80% ほとんどのサイトでのすべての視聴者の注目の.

Given the kind of attention this space gets, it’s a good idea to place your top products above the fold. This can include:

Latest offers, sales and discounts
Best selling product or product categories
Recently launched products (works best at the start of a shopping season)

の上 Target.com, 例えば, you’ll see the latest offers at the top of the page:

If you have a lot of offers, consider adding a slider, like this example from Walmart. Also note the promotions running below the navigation menu:

ウォルマート

一部のファッション小売業者は、ブランドイメージを促進するために、従来のレイアウトを避けています。. の上 ASOS, 例えば, 「Shop Men」または「Shop Women」のオプションを使用してブランドイメージを取得します。.

ASOS

この戦術は、ルックブックでブランドのビジョンを宣伝しようとしているときに機能します. ほとんどの小売業者, でも, 従来の商品優先のレイアウトのほうがうまくいく.

カテゴリページでも同じ考えに従ってください: ベストセラー商品や評価の高い商品をスクロールせずに表示する. 例えば, Amazonのカテゴリーページをチェック:

アマゾンのカテゴリーページ

2. 水平レイアウトと垂直レイアウトを混在させる

任意のページに商品をレイアウトするには、基本的に 2 つの方法があります: 水平または垂直.

水平レイアウトは静的なままです. ページの端に、リストをさらにスクロールするためのボタンがあります.

Amazon のこの例は、物事をよりよく示しています:

Amazon でのショッピングトレンドに触発されて

In Ecwid, 最近見た製品横向きにも表示されます. ストアフロントの上または下に表示するアイテムの数を選択できます.

ecwid で最近見た製品

関連製品別の水平方向のセクションです. このグループの製品は、製品ページごとに個別に設定され、注文に関連性の高い追加で顧客をターゲットにすることができます. 商品ページとカートページに表示できます.

あなたも好きかもしれません Ecwidのセクション

対照的に, 垂直レイアウトにはこれらのスクロールボタンがありません. その代わり, 下にスクロールすると、グリッドのような配置でより多くの製品が表示されます. このような:

Amazonの縦型レイアウト

理想的には, これらの両方のレイアウトを組み合わせて使用する必要があります:

たくさんのカテゴリからいくつかの製品を表示したい場合は、横方向のレイアウト, 最近見た商品など
同じカテゴリーの商品をたくさん見せたいときの縦型レイアウト, ワンサーチやカテゴリーページなど

3. 慣習とユーザーの期待に従う

型にはまらないデザインにしたい場合があります. 製品レイアウトはそれらの 1 つではありません.

製品レイアウトは、ユーザーがサイトにアクセスしたときにユーザーを誘導することを目的としています. A conventional layout ensures that they find what they want and don’t get disoriented.

Conventions, もちろん, vary from sector to sector. でも, there are a few things you must consider:

Use a grid layout

In a grid layout, products are arranged in equally-sized rectangular boxes, like this:

Grid Layout

This layout has long been the convention for e-commerce sites. Not only would your customers already be familiar with it, it is also good for displaying products. Further, it scales well – you can display just one box on small screens, または、より大きなボックスでいくつかのボックスに展開します.

このレイアウトを使用する場合, ボックスのサイズを同じに保つようにしてください. このケーススタディが示すように, 同じサイズのボックスを使用すると、訪問者あたりの収益を 17%.

同じサイズのグリッド