Shopifyショップへの設置
ShopifyショップへReselfitの設置手順を説明します。
Shopifyショップに Reselfit Plugin を追加する際は、Shopifyアプリ、「Reselfit: AI Fitting Room」を利用します。
前提条件
- レセルフィットの登録し、コンソール画面 でサイトを作成ずみである。
- レセルフィットサイトの「管理者」権限であること。
- Shopifyショップが作成ずみである。
- Shopifyショップテーマの「編集」権限がある。
1. アプリのインストール
Shopifyアプリをインストールすると。Plugin Loader Scriptが自動で挿入されます。以下の手順でアプリを設置してください。
Shopifyアプリをインストール
Shopifyショップに「Reselfit: AI Fitting Room」Shopifyアプリをインストールします。
Shopifyショップと連携画面
アプリインストールが完了したら、「Shopifyショップと連携画面」へ画面が遷移します。
ログアウト状態の場合には「ログイン」ボタンが表示されます。「レセルフィットコンソール」へログインしてください。
Shopifyショップと、レセルフィットサイトを接続する
「サイトを接続する」ボタンをクリックし、連携したいレセルフィットサイトを選択し、「保存」をクリックします。
連携の保存が完了すると、連携画面に戻ります。
アプリを有効にする
連携後に「アプリを有効にする」ボタンが表示されます。クリックするとShopifyテーマ編集画面に遷移します。
遷移先のShopifyテーマ編集画面で「Reselfit loader」がONになっていることを確認してください。
「Reselfit plugin config」は自動でONになりませんが、こちらは後述の手順のためONにしてテーマー編集を保存してください。
2. フィティング開始ボタンの設置
Shopifyテーマ編集から、商品詳細画面を開きます。 商品詳細画面で「フィティング開始ボタン」を表示したい場所に「Reselfit placeholder」を追加してください。
3. テストと公開
- プレビューまたはパスワード保護されたストアでページを開き、ブラウザの開発者ツールで
#reselfit-plugin-script-loaderが読み込まれているか確認します。 - 商品詳細ページにある
<reselfit-plugin-placeholder>上へ Plugin ボタンが描画され、クリックでモーダルが起動することを確認します。 - 期待どおりに動作したらShopifyテーマを公開してください。
上記でShopify テーマ専用の導入が完了します。Loader Script や JSON データ構造の詳細は、Pluginの設置 も併せてご確認ください。