サイト制作・WEBコンサルティング

商品オプションを自由に設置可能なShopifyアプリ『G‑Variants: Product Options』

商品オプションを自由に設置可能なShopifyアプリ『G‑Variants: Product Options』

Shopifyでは100個のバリエーション(色やサイズなど)を追加できますが、デフォルトだと最大3つのオプションとそれに伴うバリエーションしか追加出来ません。
『G‑Variants: Product Options』アプリでは、その制限を超えて商品オプションを色々な形式で作成出来ます。
作成した商品オプションは、簡単に表示させたい商品と紐づけて表示させることが可能です。
顧客は、商品をカートに入れる前に希望のオプションを選択出来る事で、スムーズに迷いなく購入する事が出来ます。

目次

  1. 『G‑Variants: Product Options』の特徴
  2. 『G‑Variants: Product Options』の導入方法
  3. アプリの詳細
  4. Shopify制作承ります

『G‑Variants: Product Optionse』の特徴

★このアプリでできる事

  • 月額無料でShopifyデフォルト数を超えたオプション項目を設置(※2022年3月時点)
  • さまざまなオプションタイプが用意されています。
  • 有料のオプションを追加出来ます。
  • コレクションや、タグなどで選択した商品グループ毎に表示を選択出来ます。
  • オプションの色や表示をカスタマイズ出来ます。
  • 条件付きロジックオプション
  • 事前に選択した項目条件によって、他のオプションを表示/非表示にします。

★こんな使い方ができます

下記のようなカスタマイズをしたい際にアプリの導入をおすすめします。

  • 色やサイズなど3つ以上の詳細なバリエーションがある商品でも、項目を追加して選択させる事が可能。
  • 購入時に合わせてギフトラッピングなどの追加オプションを設定する事が可能。
  • 商品に名入れなどが出来るオプションがあった際に、選択肢と合わせて名前を記載できるテキストエリアを作成可能。
  • 事前に選択したオプションに合わせて追加の選択肢やテキストエリアを表示させる事が可能。

★アプリ機能詳細

100個のバリエーションを項目を設置

アプリがShopifyの制限を超えて商品オプションの追加設定が出来ます。

さまざまなオプションタイプ

テキスト」「テキストエリア」「数字」「日付時刻」「ファイルのアップロード」「チェックボックス」「ドロップダウン」「ラジオボタン」「ボタン」「色見本」「画像見本」など

アドオン価格(価格調整)

製品オプションの選択肢に合わせて追加費用を設定する事が可能です。たとえば、サイズの選択肢で大きくなる事に追加費用を設定出来ます。

条件付きロジックオプション

ひとつ前に選択したオプションに応じて、関連するオプションを表示/非表示にします。ロジックオプションは、効果を高めるだけでなく、顧客体験を向上させるのに役立ちます。

オプションセットを一括で適用する

すべての商品またはグループ商品(コレクション、タグ、ベンダー、タイプなど)または選択した商品のみに、作成したオプションセットを適用します。

カスタマイズ可能なオプションの外観

オプション要素の色、フォントファミリ、フォントサイズをカスタマイズし、テーマの外観に合わせて使用​​可能なスタイルで1つを選択できます。

『G‑Variants: Product Optionse』の導入方法

商品詳細ページにギフトサービスオプションを表示し、選択出来るようにする

アプリ導入対応

▼インストール

アプリの表示通りにインストールしてください。
詳細は後で再設定する事が可能です。

▼アプリの基本設定

Settingより各種設定を行います。
(管理画面でGoogle翻訳が利用出来るので便利です。)

  • General- オプションの位置や購入ボタンなど基本の設定
  • Design- オプションのボタンの色や背景色などを設定
  • Add-on price- オプションの追加料金の金額表示に関して設定
  • Translation- デフォルト表示の日本語翻訳を設定。

オプションセットを作成する

▼新規オプションを作成

・「Option sets」を選択。
・「Create option set」より新規オプションを作成出来ます。

▼オプション項目を追加

・「Elements」の「Add element」よりオプション項目を選択肢して追加していきます。

▼オプション項目を設定:ドロップダウン例

・選択したオプションの詳細を設定していきます。

・オプション選択肢に追加金額を設定するには、予めオプション商品を登録しておき、選択肢に紐づける事で設定出来ます。

▼オプション項目を設定:テキストエリア例

・ドロップダウンと同様に各欄を設定していきます。

オプションセットを商品に紐づける

▼オプションセットの紐づけをおこなう

・「Products」の「Select products」にて作成したオプションセットを表示させたい商品と紐づけます。

▼オプションセット紐づけの選択肢

・オプションセットを条件させる条件を選択肢、商品とも紐づけを行います。

  • Manual- 表示させたい個別の商品を選択
  • Autimate- 「コレクション」「商品タグ」「金額」などによって表示させるかを選択します
  • All- 全商品に表示させます

アプリ導入表示イメージ

▼商品詳細画面

・カートに追加するボタンの上にオプションセットが表示されます。

・追加料金を設定してるオプションの選択肢を選ぶと、追加金額が表示されます。

▼カート画面

・オプションで選択した項目や記載したテキスト情報と、追加金額が表示されます。

▼注文管理画面

・注文管理画面で選択されたオプション情報を確認出来ます。

・注文通知メールにもオプション情報を出力する事が可能です。
 設定はこちらの公式説明よりテンプレートをダウンロードしてメールテンプレートをカスタマイズしてください。

アプリの詳細

G‑Variants: Product Options

App store
https://apps.shopify.com/product-options-pro?locale=ja

プラン

  • 月額無料(※2022年3月時点)

ShopifyでのECサイト制作承ります

Shopify(ショッピファイ)は初期費用無しの低コストで導入可能なECサイト構築ツールです。
多様な決済方法も用意されており、デザイン性も高くシンプルな構成で、今回ご紹介した『G‑Variants: Product Options』など色々なアプリを随時追加する事で、ユーザーのニーズに合ったECサイトをオープンできます。

チームNext!ではShopifyでのECサイト制作を随時受け付けております。
相談無料ですので、お気軽にお問い合わせください。

■おすすめの関連記事