この記事では、Zakeke製品カスタマイザとPageFlyでその使用方法について学びます。
この要素を使用するために、Zakeke製品カスタマイザアプリがあなたのShopifyストアにインストールされル必要があります。
このビデオチュートリアルを参照してください。
Zakeke製品カスタマイザについて
この要素を使用すると、お客様がどの製品でもパーソナライズしたり、（服、プロモーションギフト、紙製品、靴、ジュエリー、時計）チェックアウトする前に視覚化したりすることができます。
PageFlyページにZakeke製品カスタマイザを適用する前に、このアプリをインストールして、設定を全て構成する必要があります。
PageFlyページにZakeke製品カスタマイザを適用する方法
ステップ１：ボタン要素をドラッグしてドロップします。
ボタン要素を使用する前に、製品の詳細の要素がある必要があります。
そして、製品の詳細内でボタン要素をドラッグしてドロップします。
自由にボタンを構成することができます。ボタン要素の詳細についてはこちらでご覧ください。
この場合、ボタンの名前をZakekeカスタマイズボタンに変更します。
ステップ２：ボタンにURLバーを追加します。
- 一般タブで、アクションパラメータまで下にスクロールします。
- ［アクションをクリック］のオプションで、URLに移動という最初のアイコンを選択して、URLバーに入力します。
/apps/zakeke?pid={{product.id}}
注意：URL列を“/”まで選択する必要があります。
- ［URLボタンを選択］ボタンをクリックします。
ステップ３：クラスを更新してJavascriptコードを追加します。
- 一般タブで、ボタンに対して zakeke-buttonというクラスを属性パラメータで追加する必要があります。
- そして、カスタムコードエディターを開いて、Javascriptコードを追加することができます。
- 最後に、［公開］をクリックします。結果がライブページで表示されルようになります。
訪問者はZakekeカスタマイズボタンをクリックして、カスタマイズページに移動します。
