最近Shopifyを利用したECサイトの案件を多く担当させていただき、さまざまなアプリを使用する機会が多くありました。
その中でも便利かつ日本語での情報が少なかった
ものを随時ご紹介していこうと思います!


ECサイトでは、商品詳細ページでサイズやカラーの選択をすることはよくありますよね?

また、オーダーシャツやユニフォームなど、購入前に詳細な設定が必要な商品を扱うECサイトもあるかもしれません。

今回は、そんなオプション追加をより便利に実現できる、Product Personalizerというオプション追加アプリについてご紹介します。


そもそもなぜこのアプリが必要なのか
Shopifyのデフォルト機能にも、「バリエーション追加」というものがあります。

サイズやカラーなどの”オプション”を設定し、オプションの掛け合わせとしての”バリエーション”ごとに値段を設定できる機能です。

例えばこのオプションを追加すると



このようなバリエーションが作成されます。


このように、ECサイトでは必要不可欠なオプション追加機能ですが、Shopifyデフォルトの機能のみでは、いくつか制限があります。

・1商品につきオプションは最大3つまでしか設定できない
・1商品につきバリエーションは最大100までしか設定できない
・1商品ずつバリエーションを設定する必要がある

例えば、オーダーシャツのように、衿周り・袖丈・着丈・肩幅etc..など、詳細なサイズを指定したい場合などは、デフォルトのオプション数、バリエーション数では補えない場合があります。また、バリエーションの設定は、各商品ページで1つずつ設定しなければいけないため、商品数が多い場合、登録に工数がかかってしまいます。
ですので、もっとオプションを増やしたい、バリエーションを一括で管理して複数の商品に反映させたい場合には、有料のアプリを追加することをオススメします。


Product Personalizerの概要
数あるオプション追加アプリの中でも、詳細な設定ができるproduct personalizerというアプリをご紹介します。

このアプリでは主に下記のようなことができます。
・オプション数の追加
・オプション選択時の金額プレビュー
・オプション選択時の画像プレビュー
・刻印

この中でも、特に「刻印」が搭載されているオプション追加アプリはあまりなく、フォントごとにもプレビューできるのでとても重宝します。

シャツや指輪など、セミオーダーのECサイトにはあると便利な機能です。

●基本的な使い方
1. アプリをインストール
2. オプションを設定
3. 設定したオプションをマスターとして保存
4 他の商品にもマスターを反映

1. アプリをインストール
まずはShopifyのアプリケーションストアから、product personalizerをインストールします。
https://apps.shopify.com/product-personalizer?locale=ja
そのあと、アプリケーションに移動し、「
Automatic Install」を実行します。
Themeをカスタマイズしている場合や、他にもアプリを入れている場合、「Automatic Install」が使用できない場合があります。その場合は「Request Expert Install」を実行し、サポートセンターにインストールを依頼します。

2. オプションを設定
適応する商品の「Configure」ボタンを選択し、オプションを設定していきます。
右上のField Typeから追加したいオプションのタイプを選択し、項目名などを設定していきます。
オプションメニューを追加する場合は、レフトメニューの「Add Field」をクリックすると、オプションのタイプを選択することで追加できます。

3. 設定したオプションをテンプレートとして保存
左下のSave As Templateをクリックすると、設定したオプションをテンプレートとして保存できます。テンプレートとして保存することで、簡単に他の商品へ同じオプションを追加することができ、さらにはオプションに変更を加えた場合も一括で他の商品に反映することも可能です。

4. 他の商品にもテンプレートを反映
他の商品にオプションを追加する場合、「Apply Template」ボタンをクリックすると、前回テンプレートとして保存したオプションが設定されます。


いかがでしたでしょうか?
管理画面を見ると、設定項目が多く、とっつきにくい印象のあるアプリですが、他のオプションアプリに比べても詳細な設定ができ、使いこなせると重宝するアプリです。ぜひ、実際に試してみてください!

この他にも、オプション追加アプリにはさまざまな種類があります。
よくまとまっているオプション追加アプリについては、下記参考サイトをご参考ください。

Shopifyの商品オプションの幅を広げる機能を実装できるおすすめアプリ5選
https://www.shop-cre.com/shopify-option-implementation/

PREV
2021.08.01
ユーザーを迷わせない視線誘導を意識したデザイン
NEXT
2021.08.02
ユーザーに優しい入力フォーム3つのポイント