Shopifyでネットショップを運営していると、「同じ商品でサイズ違いやカラー違いを販売したい」という場面が出てきます。
たとえば:
- Tシャツの「S / M / L / XL」サイズ
- スマホケースの「ブラック / ホワイト / ネイビー」カラー
- 浄水器カートリッジの「標準タイプ / 高除去タイプ」
これらを別々の商品として登録すると、商品一覧が煩雑になり、お客様も選びにくくなってしまいます。
そこで活用したいのが 「バリエーション(商品オプション)」 機能です。
この記事では、Shopifyでバリエーションを設定する方法を、実際の画面を使いながら初心者向けにわかりやすく解説します。
バリエーション設定の完成イメージ
設定が完了すると、商品ページにオプション選択ボタンが表示されます。
お客様は1つの商品ページ内で、希望のタイプを選んで購入できるようになります。
バリエーション設定の手順
ステップ1:商品編集画面を開く
- Shopify管理画面にログイン
- 左メニューから 「商品管理」 をクリック
- バリエーションを追加したい商品をクリック
ステップ2:バリエーションセクションを見つける
商品編集画面を下にスクロールすると、「バリエーション」 というセクションがあります。
「⊕ サイズや色などのオプションを追加」 をクリックしてください。
ステップ3:オプションの種類を選択
クリックすると、以下のような選択肢が表示されます:
- おすすめ(プリセット)
- 色
- 素材
- ⊕ カスタムオプションを作成
「サイズ」や「色」など一般的なオプションはプリセットを使えますが、今回は 「カートリッジタイプ」 という独自のオプションを作りたいので、「カスタムオプションを作成」 を選択します。
ステップ4:オプション名と値を入力
カスタムオプションの設定画面が開きます。
| 項目 | 入力例 |
|---|---|
| オプション名 | カートリッジタイプ |
| オプション値1 | 標準タイプ |
| オプション値2 | 高除去タイプ |
オプション値は、Enterキーまたは「,」(カンマ)で区切って複数追加できます。
ステップ5:バリエーションごとの価格を設定
オプションを追加すると、バリエーション一覧が表示されます。
ここで、各バリエーションの 価格 と 在庫数 を設定できます。
| バリエーション | 価格 | 在庫 |
|---|---|---|
| 標準タイプ | ¥2,680 | 10 |
| 高除去タイプ | ¥2,980 | 10 |
ステップ6:バリエーションごとの画像を設定(任意)
バリエーションによって商品画像を切り替えたい場合は、画像の紐付けを行います。
- まず、商品編集画面上部の 「メディア」 セクションに、各バリエーション用の画像をアップロード
- バリエーション一覧で、各行の 画像アイコン をクリック
- 該当する画像を選択
これで、お客様がオプションを切り替えると、商品画像も自動で切り替わるようになります。
ステップ7:保存
設定が完了したら、右上の 「保存」 ボタンをクリックして完了です。
動作確認
フロントエンド(実際の商品ページ)で、バリエーションが正しく表示されているか確認しましょう。
- オプション選択ボタンが表示されている
- 選択に応じて価格が変わる
- 画像も切り替わる(設定した場合)
これらが確認できれば設定完了です。
よくある質問
Q. オプションは何個まで追加できますか?
Shopifyでは、1つの商品に対して 最大3つのオプション(サイズ、色、素材など)を設定でき、バリエーションの組み合わせは 最大100パターン まで作成できます。
Q. バリエーションごとにSKU(商品コード)を設定できますか?
はい、可能です。バリエーション一覧の各行で、SKUを個別に設定できます。在庫管理や分析に活用しましょう。
Q. 後からバリエーションを追加・削除できますか?
はい、いつでも追加・削除・編集が可能です。ただし、すでに注文が入っているバリエーションを削除すると、注文履歴との整合性に影響が出る場合があるので注意してください。
まとめ
Shopifyのバリエーション機能を使えば、サイズ違いやカラー違いの商品を1つの商品ページにまとめて管理できます。
設定のポイント
- 標準的なオプション(サイズ、色)はプリセットを活用
- 独自のオプションは「カスタムオプションを作成」
- バリエーションごとに価格・在庫・画像を個別設定可能
商品一覧がすっきりし、お客様にとっても選びやすいショップになります。ぜひ活用してみてください。
この記事は CODE PLUS が運営するWeb制作・技術ブログです。Shopifyのカスタマイズでお困りの方はお気軽にご相談ください。
