今回はClickFunnelsで商品のバリエーションを作っていきます。商品のバリエーションがなにかというと、例えばTシャツの商品を用意したときに、Tシャツにはいろいろなデザインがあるじゃないですか。赤、緑、青と3色用意したいと思ったときに3色のプロダクトを作るのは面倒くさいですよね。1つのプロダクトの中に3つのバリエーションを作り込むことができる方法があるのでやっていきましょう。
今回お届けするノウハウはこちら
Step1. Add Product を設定する
今オーダーフォームのステップのところに来ています。Productsのタブに行き、＋Add Productをクリックしましょう。stripeでOne-Timeの決済を選択して次に行きます。CurrencyはJPYでProduct NameはT shirtにしましょうか。Product Priceは2,000円くらいがいいかなと思います。次に行きましょう。
そうするとPRODUCT VARIATIONS(Optional)とあります。Optionalなので必須ではないのですが、ここにチェックを入れると下にVariation Type、Variation Valuesという項目が追加されます。どういうものか少しわかりにくいですが、整理するとVariation Typeはどういうバリエーションの分け方にするかという話ですね。先ほどのTシャツの場合でいうと色で分けていましたね。色別の商品のバリエーションなので今回はcolorと入れましょう。ここは日本語を使いたいと思っても、英語でないと受け付けてくれないので英語を入れてください。
Step2. 商品バリエーションを設定する
次にVariation Valuesですね。拡大します。ここはひとつひとつ追加していきます。例えばREDと打ったら下にAdd REDと表示されるので、ここをクリックするとREDが確定します。そして次BLUEと打って確定、GREENと打って確定します。
SaveとSave & Add Anotherというのがありますが、セーブして他のものを追加していく場合はSave & Add Anotherをクリックしてください。今回は3色すべて入れて追加する必要がないので、Saveをクリックします。
そうするとProduct Variationsが表示され、それぞれの画像を追加できるようになっています。画像はあとで用意するので、とりあえずSave and Closeをクリックします。これで商品が3つできました。商品バリエーションを作ると、ProductsのT shirtのところにvariationsというタグのようなものができますね。
Step3. ADD NEW ELEMENTを設定する
やらなければならないことはあと2つあります。1つはオーダーフォームのページの中にどの色にするかを選ぶエレメントを追加することです。もう1つはOrder Confirmationページの注文確認のところに、あなたが買ったのはこの色のTシャツですと画像付きで注文確認するエレメントを追加することです。その2つを今から追加していきますね。
まずはオーダーフォームのほうにいきましょう。EDIT PAGEで中に入っていくとこのような感じになっています。ADD NEW ELEMENTをクリックします。ここを見てください。バリエーションを作ると、RODUCT W/ VAR SELECTORとPROD W/ VAR ORDER SUMMARYという2つの項目が出てくるんですよね。
RODUCT W/ VAR SELECTORはセレクトするほうで、入れてみるとよく分かるのでまずはこちらを入れます。そしてこの下にPROD W/ VAR ORDER SUMMARYを入れます。動きを見てほしいので、セーブしてプレビューしてみましょうか。これだとイメージが湧きにくいですが、動作画面を見るとすぐわかると思います。例えばREDを1つ欲しいとしたらREDを選択してAdd to Orderをクリックします。そうすると下にオーダーがどんどん溜まっていくんですよね。Sub Totalはおかしいのですが気にしないでください。BLUEを2つ追加、GREENを追加していくとこのように動いていきます。
Step4. Order Confirmationページにエレメントを追加する
戻ってもう1つのところをやっていきましょうか。Order Confirmationページ、注文確認ページですね。EDIT PAGEから中に入って設定していきましょう。元々あるエレメントを見てください。プロダクトの名前やプライスは出ていますが、画像は出ていませんね。ADD NEW ELEMENTをクリックするとPRODUCT W/ VAR ORDER CONFIRMというエレメントがあるのでこれを配置してください。そうすると、今はデモなので画像は出ていませんが、ここのところに画像が出て、プロダクトの名前が出て、合計金額が出るようなOrder Confirmationページができます。
ということでデジタル商品ではなく、Tシャツのようにタンジブルなモノを発送するような場合でも使えるのでやってみてください。今回は以上です。
