ショップの商品バリエーションの設定方法
Table of Contents
- 商品バリエーションの設定について
- 商品バリエーションの表示確認
- テーマカスタマイズ画面への移動
- 基本設定の変更方法
- オプションタイプの設定方法
- オプションカラーブロックの設定
- オプション画像ブロックの設定
- オプション設定ブロックの設定
- テーマ設定の商品バリエーションの説明
- 商品バリエーションの表示形式の変更方法
- 保存して設定を反映させる方法
- 表示確認
商品バリエーションの設定について
この動画では、商品バリエーションに関する設定について解説していきます。商品を販売する際、同じ商品でも色やサイズなどそれぞれ違いを作って販売することが多々あると思います。これらの違いのことを商品バリエーションと呼びます。商品バリエーションは管理画面の商品管理の場所から商品編集画面に遷移し、こちらのオプションの箇所から設定が可能です。
商品バリエーションの表示確認
まずは、商品バリエーションがストア上でどのように表示されているかを確認してみましょう。ストアのプレビューからコレクションページを開きました。こちらを見てもらうと分かるように、商品バリエーションはストア上ではデフォルトで質素な見た目になっています。このようなテキストが表示されているだけの質素な見た目をカスタマイズするには、テーマカスタマイズ画面にある商品バリエーションセクションとテーマ設定の商品バリエーションの箇所を設定する必要があります。
テーマカスタマイズ画面への移動
これらの商品バリエーションの設定方法を解説する前に、まずはテーマカスタマイズ画面に移動しましょう。管理画面のオンラインストアのテーマからカスタマイズをクリックしてください。テーマカスタマイズ画面が開きましたら、まずは任意のコレクションページに移動しましょう。コレクションページが開きましたら、ヘッダーセクションの上に何もセクションがないことを確認してください。
基本設定の変更方法
それでは、テーマ設定の商品バリエーションを開いてください。ここの一般設定の細かいオプション設定のためのグローバルセクションのバリエーションを有効にするにチェックを入れてみてください。こちらにチェックを入れた状態で一度戻ってみると、ヘッダーの上に商品バリエーションというセクションが現れたことが確認できると思います。こちらは後ほど操作していきます。では、再度テーマ設定の商品バリエーションを開いてください。今度はこちらのさらに下の方にあるオプションタイプのサークルからのオプションタイプのところに、バリエーションに設定した名目を入力してください。今回の例ではオプション名は色としていますので、こちらには色と入力しています。以上の操作でバリエーションの見た目が変更されたことが確認できると思います。こちらの設定については後ほど触れますが、バリエーションの表示形式をどうするのかを初めに設定する箇所になります。
オプションタイプの設定方法
オプションタイプの設定方法について説明していきます。オプションタイプでは、各バリエーションの表示形式を変更することが可能です。例えばサークルカラーのオプションタイプにオプション名を入力すると、バリエーションはサークルカラーで表示されるようになります。注意点ですが、ここで表示される色はバリエーションに設定されているカラー名をもとに自動で表示されるようになっています。その際に、赤のように日本語でカラーメンを指定しても、コンピューターは認識しない仕様ですので、CSSカラー名に基づいてカラー名を設定していただく必要があります。これらを参考にして、バリエーションのカラー設定を進めてみてください。
オプションカラーブロックの設定
オプションカラーブロックは商品バリエーションとして表示されている色の詳細なカスタマイズが可能です。実際に設定をしていきましょう。オプションカラーブロックをクリックしてください。設定エリアが表示されると思います。こちらの商品では、変更適用させたい商品を選択します。ここで何も選択しない場合には、全商品に適用されますので、特に希望がなければ設定は不要です。続いてカスタムしたいオプションと値をこちらに入力します。今回の例では、こちらの色というオプションのホワイトに対してカスタムを加えていきたいと思います。管理画面で設定している通り、漢字で色とアルファベットでホワイトという風に入力をしていきます。以上でオプションカラーブロックの設定が完了しました。
オプション画像ブロックの設定
オプション画像ブロックでは商品バリエーションとして表示される画像を設定することができます。実際に設定をしていきましょう。オプション画像ブロックをクリックします。基本的な設定方法はオプションカラーブロックとほとんど同じになります。今回はこちらのホワイトのバリエーションに対して、少し柄のある画像を設定したいというような状況を考えます。オプションカラーブロックと同じように、こちらに色と縦棒とアルファベットでホワイトを入力します。その後こちらから表示させたい画像を選択します。今回はこちらの画像を表示させてみます。選択した画像がバリエーションとして表示されていることを確認できると思います。オプション画像ブロックの設定方法については以上です。
オプション設定ブロックの設定
最後にオプション設定ブロックについて説明していきます。このブロックを使用すると、各商品のバリエーションだけでなくサイドバージョンのバリエーションにもカスタムが適用されてしまっていることが確認できると思います。こちらとこちらの画像がなんとなく同じになっていることがわかると思います。これらを切り離してサイドバーだけに設定を適用させたいというような場合には、次に設定するオプション設定ブロックが役立ちます。まずは商品バリエーションセクションにオプション設定ブロックを追加してください。今回は、商品のバリエーション表示は先ほど設定した画像のままにした状態でサイドバージョンのホワイトのバリエーション表示に対してカスタムの画像を設定したいという状況を考えます。つまりこちらの画像とこちらの画像、それぞれを別々の画像を設定するといったことを考えます。オプション設定をクリックして、設定エリアを開いてください。まずはプロパティにオプション名を入力します。その後、値の入力欄にアルファベットでホワイトと入力をします。こちらの入力方法が先ほどのオプションカラーブロックやオプション画像ブロックとは少し違うので注意をしてください。入力ができましたら次に、適用先でフィルターを選択してください。最後にこちらの画像から表示させたい画像を選択します。今回はこちらを選択します。こちらで設定が完了しました。サイドバーを確認してみると、同じ色というオプションのホワイトに対して、別々の画像を設定することができました。商品バリエーションセクションの設定については以上です。
テーマ設定の商品バリエーションの説明
次に、テーマ設定の商品バリエーションについて解説をしていきます。商品バリエーションセクションと同様ここの設定でもバリエーションの表示形式を変更することが可能です。たくさんの設定変更が可能ですがここでは、代表的なものを順番に説明していきます。それではこちらのテーマ設定の商品バリエーションを開いてください。
商品バリエーションの表示形式の変更方法
商品バリエーションの表示形式の変更方法について説明します。購入不可の商品バリエーションは隠すノープションではこちらを有効にすると、在庫が0のバリエーションに関しては選択肢が表示されなくなります。バリエーションの自動選択のオプションで、デフォルトでバリエーションを選択状態にするのかどうかというものを変更できます。ホバーで画像を切り替えを有効にするノープションを有効にするとこちらのバリエーションをホバーするだけで、選択した状態にすることができます。こちらのオプションタイプは、先ほども少し触れましたがバリエーションの表示形式を変更することが可能です。例えば、サークルカラーのオプションタイプにオプション名を入力するとバリエーションはサークルカラーで表示されるようになります。ここで表示される色は、バリエーションに設定されているカラー名をもとに自動で表示されるようになっています。その際に、赤のように日本語でカラーメンを指定しても、コンピューターは認識しませんので、CSSカラー名に基づいてカラー名を設定していただく必要があります。これらを参考にして、バリエーションの表示形式の変更を進めてみてください。
保存して設定を反映させる方法
編集が終わったら画面右上の保存するボタンをクリックして、設定内容を反映させることを忘れないようにお願いします。設定が反映されるまで少しの時間がかかる場合もありますので、しばらくお待ちください。
表示確認
最後に実際のストアの表示を確認してみましょう。こちらからプレビューもしくは表示と書いてある目のアイコンのオプションをクリックします。任意のコレクションをクリックして、コレクションページの表示を確認してみましょう。先ほど設定した商品バリエーションがきちんと表示されていることがわかると思います。
以上で商品バリエーションについての解説を終わります。
【FAQ】
Q: 商品バリエーションの設定方法は難しいですか？
A: 初めての方でも分かりやすいように解説していますので、簡単に設定できます。
Q: 複数のバリエーションを設定したい場合はどうすればいいですか？
A: 商品編集画面から設定を進めていくことで、複数のバリエーションを設定することができます。
Q: バリエーションごとに画像を設定することはできますか？
A: はい、オプション画像ブロックを使用することで、バリエーションごとに画像を設定することができます。
Q: バリエーションの表示形式を変更することはできますか？
A: はい、テーマ設定の商品バリエーションから表示形式を変更することができます。
Q: 保存ボタンをクリックしても設定が反映されない場合はどうすればいいですか？
A: 設定が反映されるまで少しの時間がかかる場合もありますので、しばらくお待ちいただくか、ページをリロードしてみてください。
