この記事でわかること
- Custom Product Optionsがどういうアプリか
- Custom Product Optionsで利用できる機能について
- Custom Product Optionsの実際の設定方法
Custom Product Optionsってどんなアプリ？
Custom Product OptionsはShopifyアプリストア上で☆4.7と高評価がついている「マーチャンダイジング」アプリです。Shopifyストア上にあるさまざまなマーチャンダイジングアプリの中でも、特にレベルの高いCustom Product Optionsの特徴を3つご紹介します。
消費者の希望や要求に合致する商品を、適切な価格・数量・カラー等オプションを用意し、適切に提供すること
①最大10個のオプションを設定できる
Custom Product Optionsでは、最大10個のオプションを各商品に設定できます。一般的に多く使われる数量設定やラジオボタン設定はもちろん、ファイルアップローダーやカラーピッカー、テキストボックスなどを設定することも可能です。
Custom Product Optionsで利用できるオプション項目
- テキストボックス
- テキストエリア
- 数量ボックス
- ラジオボタン
- チェックボックス
- ドロップダウンリスト
- ファイルアップロード
- カラーピッカー
- イメージピッカー
- 幅と高さ指定
各オプションは設定すればすぐに使えますが、外装にこだわりたい場合にはliquidファイルを編集することで、CSSを使った装飾を行えます。選択されたオプションそれぞれによって、異なる選択肢を発生させる条件分岐も行うことができるため、よりユーザーのニーズに合った商品提供が可能です。
②直感的でわかりやすい操作で設定可能
Custom Product Optionsはインストール後、直感的に操作・編集できるアプリです。インストールから初期設定までは、長くとも3分で設定が完了します。ダッシュボードはシンプルに4つのメニューから構成されているため、設定したい情報をどのメニューから設定すればいいのかと悩む必要がありません。
日本語対応していないのが難点ではありますが、あまり難しい英語は使われていないため、本記事を読んだ後であれば、操作も簡単に行えます。
③プランは有料プラン2種類のみ
Custom Product Optionsで用意されているプランはクラシックプランとプロプランの2つのみです。無料プランはないものの、7日間の無料トライアル期間が設けられているため、実際に自分のストアに導入するかどうかはトライアル期間で見定められます。
| 使えない機能 | 価格(月額) | |
|---|---|---|
| クラシックプラン |
|
$8.99 |
| プロプラン | 機能制限なし | $18.99 |
クラシックプランとプロプランの違いは月額の利用料金と、一部の利用機能を利用可能かどうかです。プロプランでCustom Product Optionsを利用する場合のみ、画像カスタマイザーや画像ピッカー、商品の幅・高さ・長さなどのオプション設定を利用できます。
商品購入ページで設定する各商品で選択されたオプション情報に合わせて、商品画像がオプション情報を模したサンプル画像に切り替わる機能
Custom Product Optionsの使い方
初期設定方法
- Custom Product OptionsのShopifyアプリストアからインストールする。
- アプリのインストールを承認する
- ダッシュボードを確認できれば初期設定完了！
初期設定方法（自動）
Custom Product Optionsがインストールできたら、次は初期設定を行います。Custom Product Optionsは自動での初期設定とカスタマイズできる初期設定がありますが、利用しているShopifyテーマが自動設定の対象となっている場合、特に問題なければ自動での初期設定がおすすめです。今回は自動での初期設定3ステップをご紹介します。
- Custom Product Optionsのダッシュボードから【Use Auto Theme Installer】をクリックする。
- アプリのインストールするShopifyテーマを選択して【install】をクリックする。
- 緑枠に囲まれたテキストを確認できれば初期設定完了！
フィールドグループの設定方法
- Custom Product Optionsのダッシュボードから【Use Auto Theme Installer】をクリックする。
- アプリのインストールするShopifyテーマを選択して【install】をクリックする。
- 緑枠に囲まれたテキストを確認できれば初期設定完了！
基本の設定方法
- Custom Product OptionsのField Editor画面に移動し、【Toolbox】から【追加したいオプション】をドラッグ＆ドロップして配置する。
- 【Clikc to edit name】をクリックしてオプション名を変更する。
各オプションの回答を強制にしたい場合
歯車マークをクリックして【Required】を選択する。
ラジオボタン・チェックボックス・ドロップダウンの選択項目設定方法
- フォームにある選択項目を編集したいオプションをクリックし、【Edit options】を表示させて更にクリックする。
- 各選択肢を改行して入力して【Save】を押し保存する。
カラーピッカーの設定方法
カラーピッカーも他オプション同様に、ドラッグ＆ドロップで追加することができます。カラーピッカーでは色の数の増減・色の配置順・色名・選択する色を編集可能です。
- Custom Product OptionsのField Editor画面【Toolbox】から【Color Picker】をドラッグ＆ドロップして配置し、色を編集する場合は【Edit Colors】をクリックする。
- 設定したい各項目をクリックする。
説明文・CSS class・ツールチップ等の追加方法
基本的な説明文・CSSクラス・ツールチップ・プレースホルダー等の追加は下記の手順で行えば設定できます。ただし、各オプションによって、設定できる項目と設定できない項目があるため、各オプションで何が設定できるのかを確認しておきましょう。
選択・記入等を依頼する質問文の横に配置される、各質問項目の詳細文表示機能のこと
- Custom Product OptionsのField Editorから歯車マークをクリックし、表示された【setting】を更にクリックする。
- 設定したい各項目を入力する。
各オプションで設定できる項目
- 共通：ディスクリプション・グループ・ツールチップ・CSS class
- テキストエリア・テキストボックス・数量ボックス：最大文字数・プレースホルダー
- ラジオボタン・チェックボックス：水平に並べるかどうか
- ドロップダウンリスト：プレースホルダー
- ファイルアップローダー：複数ファイルアップロードの許可
- カラーピッカー：複数選択の許可
条件付きロジックの設定方法
条件付きロジックとは、Custom Product Optionsで設定したオプションをユーザーが選択したかどうかに応じて異なる表示をする機能です。条件付きロジックを追加することにより、追加料金やポップウィンドウの表示ができるようになります。今回は、ギフトラッピングの希望有無による追加料金を発生させる方法をご紹介します。
- 条件付きロジックのトリガーにしたいオプション（例：ラジオボタン「ギフトラッピングの希望:希望するor希望しない」）と、選択によって表示したいオプション（例：カラーピッカー「ギフトラッピングの色：3色」）条件を追加する。
- トリガーになるオプションの歯車マークをクリックして【Confitional Logic】をクリックし、表示されるポップアップの【Add New】を更にクリックして新しく条件付きロジックを作成する。
- 条件付きロジックのルールを決定する
条件付きロジックにおけるルールの組み合わせ
- Is Equal To ⇔希望する → 「希望する」と一致する場合というルール設定
- Is Equal To ⇔希望しない → 「希望しない」と一致する場合というルール設定
- Is Not Equal To ⇔希望しない → 「希望する」と一致する場合というルール設定
- Is Not Equal To ⇔希望する → 「希望しない」と一致する場合というルール設定
- Any → 「いずれかの条件」が満たされている場合にアクションが発生する
- All → 「すべての条件」が満たされている場合にアクションが発生
- （任意）「〇〇という条件」が発生している場合の「条件」と「〇〇という条件」が「全てもしくは一部」成立している場合に「表示するオプション」を指定する。
条件付きロジックで複数の条件を設定する際の各オプション説明
- Show Field → 「条件が一致する時のみ」指定したフィールドを表示する。
- Hide Field → 「条件が一致する時のみ」指定したフィールドを非表示にする。
- Show Field Group → 「条件が一致する時のみ」他のフィールドグループを表示する。
- Add Product → 「条件が一致する時のみ」ギフトラッピングや追加配送料などを追加する。
- Show Customizer → 「条件が一致する時のみ」イメージカスタマイザーをロードする。
- Show popup Window With Info → 「条件が一致する時のみ」ポップアップを表示する。
まとめ
本記事のポイント
- マーチャンダイジングに必要な基本機能はCustom Product Optionsクラシックプランで十分利用できる。
- ユーザーの条件に合った商品をストレスなく提供できる条件分岐機能も搭載
- CSSを当てるためのclassも追加できるため、自身で装飾を調整できる。
Custom Product Optionsというマーチャンダイジングアプリをご紹介しました。よりユーザーのニーズに合った商品を提供したいと考えた時、マーチャンダイジングアプリは欠かせません。Shopifyではさまざまなマーチャンダイジングアプリがありますが、Custom Product Optionsはその中でも多くのオプションを実装できるアプリです。基本的なオプションのみ追加したい場合には、月額約900円程で利用できるリーズナブルなアプリですので、無料トライアル期間で気に入ったらぜひ導入してみてください。
Custom Product Optionsアプリストアへ本記事でご紹介したShopifyアプリの性能やプラン料金、無料プランでの制限などは記事公開時の情報となっております。本記事公開後、アプリ運営会社がアップデートや方針変更をした場合には本記事の情報の限りではございません。最新のアプリ情報は、各Shopifyアプリストアページをご参照ください。
Shopifyアプリの開発、承ります。
SlashApp運営チームは、アプリ開発も行っております。開発したいアプリの概要を教えていただければ、仕様設計から細かくサポートいたします。 ぜひお問い合わせください。
