導入ガイド
このページは WooCommerce プラグイン版の手順です。プラグインを入れて商品で試着をONにするだけ、 コーディングは不要です。所要時間の目安は約5分です。
WooCommerce 以外のサイトをお使いの場合は、コードを貼るだけの手順をご覧ください。
- 1
プラグインをインストール
WordPress 管理画面の「プラグイン」→「新規追加」で「DokimiAI」を検索し、「今すぐインストール」→「有効化」をクリックします。
※ 有料プラン用プラグインはZIPファイルをアップロードして導入します。
- 2
APIキーを設定
管理画面に追加された「DokimiAI 設定」を開き、発行された APIキーを入力して保存します。これでプランが認証されます。
- 3
商品で試着をON
試着させたい商品の編集画面で「試着を有効化」にチェックを入れて更新します。色・サイズは商品情報から自動で取り込まれます。※overlay画像のURLは https:// を使用してください（http:// は表示されません）。
- 4
完了：商品ページで試着できます
商品ページに「Try On」ボタンが表示され、お客様がその場で試着できるようになります。
試着するとこうなります
- 5
SNSでシェアされて拡散
試着した姿はワンタップでSNSへ。投稿に Powered by DokimiAI が付き、新しいお客様を連れてきます。
試着ボタンの置き場所
試着は「買うかどうか迷っている瞬間」に使われます。ボタンをどこに置くかで使われる回数が変わるので、次の3点を目安にしてください。
- ・サイズ・色の選択のすぐ横に置く 購入操作がある場所が、試着がいちばん使われる場所です。
- ・スマホでスクロールせずに見える位置に 商品画像と価格のすぐ下まで。指を動かさずに見つけられることが大事です。
- ・商品説明の最下部は避ける そこまで読み進むお客様は多くありません。買う直前より後ろに置かないでください。
プラットフォーム別の置き方
- WooCommerce（プラグイン版）
- 何もしなくても、カート投入フォーム（バリエーション選択）のすぐ上に出ます（
woocommerce_single_product_summaryの優先度 25）。 位置を変えたいときは、テーマのfunctions.phpでこのフックをremove_actionし、別の優先度でadd_actionし直してください。 - PrestaShop（モジュール版）
- こちらも自動で、購入フォームの中・カートに追加ボタンの直後に出ます（フック
displayProductAdditionalInfo）。 動かすときは［デザイン］→［ポジション］でモジュールを別のフックへ移設するか、テーマのproduct.tplの出したい場所にフック呼び出しを書いてください。 - カスタム構築（コードを貼る方式）
- 自動では挿入されません。
<button data-dokimiai-sku="...">を置いた場所にそのまま出るので、サイズ・色のセレクトの直後、カートボタンの隣に貼ってください。<script src=".../widget.js">のほうは位置を問いません（</body>の直前で十分です）。
※ 貼り付け方式では、ボタンがページ読み込み完了の時点で HTML の中にある必要があります。あとから JavaScript で差し込んだボタンは反応しません。
WooCommerce 以外のサイトの場合
プラグインが用意されていないサイト（EC-CUBE、BASE、STORES、自作サイトなど）でも、 商品ページにコードを貼るだけで試着を追加できます。プラグインのインストールは不要です。
- 1. 無料登録 メールアドレスを入れるだけ。パスワードは不要です。
- 2. 商品を登録 SKU・カラー・サイズと、試着に使う透過PNGのURLをコンソールで登録します。
- 3. コードを貼る 商品ごとに発行されるコードを、商品ページのHTMLに貼り付けます。
試着が動くのは、登録したドメインのページだけです（1契約につき1ドメイン・www の有無は同一サイト）。