makeshopのバリエーション機能を使いこなそう！商品ページに色・サイズの選択肢をつける方法

ECサイトの商品登録で、意外と悩むのが「色違い」や「サイズ違い」、それに「セット販売」など、同じ商品で選べるパターンがいくつもある場合です。
ページを分けると見づらくなるし、まとめると管理が大変…そんな時に便利なのが、makeshopのバリエーション機能です。
この機能を使えば、1つの商品ページにカラーやサイズの選択肢をスッキリまとめて表示できるので、ユーザーも選びやすくなります。

今回は、makeshopのバリエーション機能の基本から、活用のポイントや設定方法までまとめてご紹介します。

makeshopのバリエーション機能とは？

バリエーション機能とは、1つの商品ページの中で、ユーザーが色・サイズ・セット数などを選べる機能です。
例えば、Tシャツなら「ホワイト／M」「ブラック／L」など、選択肢をひとまとめに表示できます。
makeshopのバリエーション機能を活用すれば、商品ページがすっきり整理され、ユーザーも選びやすくなるというメリットがあります。

バリエーション機能でできること

2種類の項目を設定可能

「カラー」「サイズ」など、最大2つの項目を自由に組み合わせて設定できます。
シンプルなTシャツなら「カラー×サイズ」、ギフトなら「ラッピングあり／なし」といった設定が可能です。

画像もバリエーションごとに登録可能

色違いやデザイン違いの商品画像を、バリエーションに連動して切り替えることもできます。
ユーザーが画像を見て決められるので、一目で分かりやすく、購入率アップにつながります。
テンプレートによってはユーザーがバリエーションを変更するたびに画像が変わるようにもできます。

価格や在庫もバリエーションごとに設定

カラーごとに価格が異なる場合や、サイズごとに在庫数が違う場合も、バリエーションごとに個別設定できます。
一部カラーを割引価格にする、といった柔軟な販売戦略も簡単に実現できます。

選択肢の表示形式は2種類から選べる

バリエーションの表示形式は「プルダウン」と「項目ごとに買い物かごを表示する」の２種類あり、商品によって適切な方から選ぶことができます。

makeshopのバリエーション機能を使うメリット

ユーザーが選びやすく、購入率アップ！

複数の商品ページに分けると、欲しい商品にたどり着きにくいという課題があります。
バリエーション機能を使えば1ぺージに選択肢をまとめて表示できるので、ユーザーはよりスムーズにお買い物ができます。

SEO対策にも効果的

バリエーションごとにページを分けるより、1ページにまとめる方がSEO評価が集中します。
特に人気商品ほどバリエーション機能を使ってまとめるのがおすすめです。

在庫管理がラクになる

makeshopでは、バリエーションごとに在庫を個別管理できるので、「ブラックMだけ売り切れ」「ホワイトLは在庫あり」といった細かな対応も可能。無駄な在庫を抱えるリスクも軽減できます。

バリエーションの設定方法

ここからはバリエーションの実際の設定方法について解説します。

まずはmakeshopへログインし、商品一覧から任意の商品編集ページへ行きましょう。
商品編集画面の「バリエーション」より、「変更する」をONにして設定を行います。（ここをONにしないと編集ができません）
その後「バリエーション設定」の「項目を編集する」をクリックします。

モーダルウィンドウが出てくるので、ここから設定を行います。
カラーやサイズなどのバリエーションを追加し、設定が終わったら「この内容で決定」をクリック。

バリエーション画像を設定する

画像はなくても使えますが、パターン別に画像を表示することもできます。

画像は商品画像の「サブ画像」として登録しておき、バリエーション画像は「サブ画像」から選択します。

価格や在庫をバリエーションごとに設定

バリエーションよって異なる価格・在庫を設定する場合は、バリエーションの特定の価格・在庫数を入力しましょう。
※バリエーションに「販売価格」を設定した場合、商品に設定した「販売価格」より優先されます。

ここで一部バリエーションを「品切れ」などの設定もできます。

表示形式の選択

バリエーションの表示形式は「プルダウン」と「項目ごとに買い物かごを表示する」の２種類ありますので、どちらかを選択しましょう。
表示形式は商品によって変えることができます。

「項目をもっと追加したい」「複数商品にまとめて設定したい」場合はオプショングループを使おう

オプショングループは事前に「ラッピング」などバリエーションのグループを作成し、複数商品に設定できます。
上記で説明した「バリエーション」は、バリエーション項目を2個までしか設定できませんが、オプショングループを使うと最大20 項目まで表示することができます。

オプショングループの設定

「商品管理」の中の「オプショングループ」へ行き、「新規作成」でグループを作成します。

詳細オプションを入力し、「項目追加」で追加します。
項目により価格を変更することもできます。
設定が終わると画面下の「保存する」で保存し、オプショングループ作成は完了です。

オプショングループ作成が終わったら商品編集画面に戻り、「オプショングループ」を選択し、任意のグループを選択します。設定はこれでOKです。

オプショングループを選ぶとこのように表示されます。「バリエーション」では2個まででしたがオプショングループでは2個以上でも表示させることができていますね。

まとめ

makeshopのバリエーション機能を上手に活用すれば、商品の魅力をわかりやすく伝え、購入率アップにつなげることができます。

ただし、「最適な設定方法がわからない」「デザインをもっと見やすくしたい」「スマホでも快適に操作できるようにしたい」など、実際の運用では様々な課題も出てきます。

猫の手では、makeshopの機能を熟知したプロとして、お店ごとの商品特性に合わせた最適なバリエーション設計＆デザインをご提案いたします。

makeshopでのECサイト構築・リニューアルをお考えの方は、ぜひお気軽にご相談ください！

株式会社猫の手はmakeshop認定パートナーとして、お客様のECサイト運営をサポートしています！
もし、商品グループの設定やその他の機能についてお困りのことがあれば、経験豊富なプロフェッショナルがしっかりとお手伝いさせていただきます。
お客様のネットショップの売上アップにつながるよう、全力でサポートいたしますのでどうぞお気軽にお問い合わせください。
ネットショップの成功を一緒にサポートさせていただければ嬉しいです！