[Shopifyアプリ]商品詳細ページで好きな写真・画像をアップロード可能にする方法

今回紹介するのは、商品詳細ページでファイルのアップロードを可能にする方法です。

昨今では自分専用に商品をカスタマイズするパーソナライズ化の熱が高まってきています。自分の好きな画像を商品に組み込むなどの需要があり、自分だけの商品が欲しいという人が増えている印象です。

そこで今回は、商品詳細ページにてjpgやpngなどの画像ファイルをアップロード可能にし、パーソナライズ商品を販売可能にするアプリを紹介してみます。

Bold Product Optionsアプリ

Shopify App Store （Product Options アプリ）

アプリ開発会社の「Bold」はShopify界隈の中でも有名で、非常に多くのアプリを提供しています。Product OptionsのアプリもBoldによって、開発されたもので、執筆時点で2208レビュー（星4.6）の高評価アプリです。

• 商品詳細ページに色々な条件ロジックを組み込みたい
• 他商品とのセットで販売したい
• お客さんにファイルをアップロードしてもらいたい

など非常に多くのことが可能となっています。

有料のアプリとなっていますが、商品詳細ページ周りを調整するなら「Product Options」でほとんどのことが事足りるといっても過言ではない気がしています。一応YouTubeの紹介動画も貼っておきます。

商品ページで画像をアップロードしてもらえる仕様にする方法

数ある機能がある中でも今回紹介するのは『商品詳細ページにて、お客さん側で画像ファイルのアップロードを可能にする方法』です。

流れとしては下記のような形になります。

1. 商品詳細ページにたどり着く
2. 商品詳細ページにて、画像をアップロード
3. カートに進んでチェックアウト
4. 管理画面→注文管理からアップロードされた画像が閲覧できる

①商品ページにたどり着き、②画像をアップロード

③カートでのチェックアウトと見え方

④管理画面での見え方

最後に管理画面での見え方は下記のようになっています。アップロード用のオプションという部分をクリックするとアップロードされた写真（画像）がダウンロード可能になります。

（ちなみに、格納場所としては自分のストア内での設定→ファイル管理にはアップロードされていなかったので、Bold側のShopifyストアかどこかにアップロードされてリンクのみ取得しているのかなぁという印象です。）

画像のアップロードを設定する具体的な方法

上記で画像のアップロードの流れ等が分かりましたので、実際に設定も含め具体的な手順を見ていきます。

①アプリのインストール

下記リンクからBoldの「Product Options」アプリを自分のShopifyストアにインストールする。

Shopify App Store （Product Options アプリ）

②テーマへのアプリ用Liquidインストール

アプリ画面にいき「Need Help?」の一番右の要素をクリックし「Liquid Installation」を選択しましょう。

そして「Begin Automatic Update」ボタンを押して、インストールしたいテーマを選択し、テーマへのインストールを開始します。

※その際は、必ずBackupテーマを作成した後にコードインストールを行ってください。またDawnテーマなど、テーマによっては適切にインストールできない場合があるかも知れません。その際はサポートまで問い合わせで解決できます。

③Product Option Setを設定する

次に「Options」タブで「Create your first option set」を選択し、新しいおオプションセット（商品に適用する条件）を作成します。

適用する商品を選び、ファイルアップロードを選択します。

商品を選択した後は「画像アップロード(File Upload)」の項目を作成しましょう。

これで設定をSaveして、少し設定の更新されるまで待つと、、、下記のように商品詳細ページに項目が表示されるようになりました！

[Shopifyアプリ]商品詳細で好きな写真・画像をアップロード可能にする方法　まとめ 

以上、商品詳細ページにてお客様側で画像のアップロードを可能にする方法でした。画像のアップロードだけでなく、条件ごとに選択可能な項目の表示を変える等、非常に色々な機能を持つアプリで重宝しています。

また昨今の商品パーソナライズの需要は高まってきておりますので、今後より注目されていくアプリの一つになるのかなぁという印象でした。

それでは、最後までお読みいただき、ありがとうございました！本日も良い1日を！