はじめる前に
DecorViz Storefrontは対応する商品ページにプレビューボタンを追加します。お客様は掲載されている商品写真とご自身の部屋の写真を使って、DecorVizアカウントを作成せずにプレビューを生成できます。
- 鮮明な商品写真を掲載した、公開済みのSquarespaceストア。
- Storefrontを利用でき、クレジットが残っているDecorVizアカウント。
- Squarespaceのコードインジェクション設定へのアクセス権限。
コードインジェクションはCore、Plus、Advancedと、対応する旧Business、Commerce Basic、Commerce Advancedプランで利用できます。Basicと旧Personalプランでは、この設置方法を利用できません。
1. DecorVizでSquarespaceを選ぶ
ストアフロントを作成する
ログインしてDecorViz ストアフロントのダッシュボードを開きます。初めて開くとストアフロントを作成が表示されます。
ストアのドメインを入力する
yourstore.comのように、サイトのドメインだけを入力します。https://や、/shop/blue-rug/のような商品ページのパスは含めないでください。
プラットフォームでSquarespaceを選ぶ
ストアフロントを作成画面のプラットフォーム欄でSquarespaceを選択します。公開ストアのドメインを入力し、ホスト名が1つの場合はドメインの完全一致を使用して、ストアフロントを作成をクリックしてください。
「ストアフロントを作成」をクリックする
これでストアフロントがそのドメインに接続されました。すでにストアフロントがある場合は、設定を開いてこれらの値を確認してください。
すでにストアフロントを作成している場合
Storefront → 設定 → 検出を開き、プラットフォームモードをSquarespaceに変更して、変更を保存をクリックします。新しいストアフロントを作成したり、設置済みのコードを差し替えたりする必要はありません。
ショップがshop.yourstore.comにある場合は、そのホスト名を入力します。ほかのサブドメインにも商品ページがある場合は、ドメインの照合の設定を見直してください。
ストアフロントを有効にしてコードをコピーする
設定ページを開き、ストアフロントを有効にするがオンになっていることを確認して変更を保存をクリックします。下にスクロールしてインストールコードのカードでコピーをクリックします。
このガイドからではなく、ダッシュボードからコピーしてください。ダッシュボードのコードには、正しいインストールキーが自動で入っています。下の例は形式を示すだけのものです。
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>必要なのはコピーだけです。キーを更新を選ぶとキーが置き換わり、以前のコードは動かなくなります。
2. Squarespaceのコードインジェクションで設置
コードインジェクションを開く
Squarespaceの管理画面でページ → カスタムコード → コードインジェクションを開きます。バージョン7.0ではウェブサイトツール内を確認してください。表示名はサイトのバージョンによって異なる場合があります。
フッターにコードを貼り付ける
サイト全体に適用されるフッター（Footer）欄を使用します。DecorVizでコピーしたコードを、<script>タグも含めて貼り付けてください。既存のコードを残し、新しい行に追加して保存します。
Code Injection
<script
src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
data-key="YOUR_INSTALL_KEY"
async
></script>入力欄の説明図です。実際の画面構成とは異なる場合があります。
商品ごとの説明欄やコードブロックに貼り付ける必要はありません。チェックアウトページはコードインジェクションに対応していません。プレビューは購入前の商品ページで利用します。
保存後はSquarespaceの編集画面を閉じ、プライベートブラウズで公開済みの商品ページを開いて確認してください。
3. 部屋でのプレビューボタンをカスタマイズする
DecorVizのダッシュボードで外観ページを開きます。ボタンのテキスト、スタイル、角の形、色、位置を選び、変更を保存をクリックします。お客様に内容が伝わるよう、「自分の部屋で見る」のような言葉を使いましょう。
最初のテストでは：まずカート追加ボタンの上から始めます。テーマによってその位置が使いにくい場合は、商品画像の下を試してください。保存して商品ページを再読み込みすると、変更を確認できます。
商品ページで、カテゴリーのスイッチと商品の一覧を確認します。部屋でのプレビューを出したくない商品があれば、そこでボタンをオフにします。まずは検出の初期設定のままテストし、そのあとで必要に応じて設定ページの最小信頼度を調整してください。
商品ページで、ラグのカテゴリーのスイッチがオンになっていることを確認してください。スイッチがオフのカテゴリーの商品には、ボタンが表示されません。
木の色、カラー、生地などが選べる商品は、商品ページでその商品の写真の下にあるオプションを追加をクリックし、それぞれの写真を追加します。お客様はプレビュー画面で切り替えて確認できます。詳しくはストアフロントガイドの商品オプションをご覧ください。
Squarespaceのカスタムギャラリーやページビルダーを使っていると、ボタンの位置や検出される画像が変わることがあります。スマートフォン表示も含め、ご自身のテーマで位置を確認してください。
4. 公開済みの商品ページをテスト
お客様がアクセスする公開URLを使い、取り扱う各商品タイプをパソコンとスマートフォンで確認してください。
- 選択した位置にボタンが表示され、プレビューを開けることを確認します。
- 商品写真とDecorVizに追加した写真オプションを確認します。Squarespaceのバリエーション選択と、DecorVizの写真オプションは別々に設定します。
- 部屋の写真をアップロードし、プレビューを生成します。クレジットを1回分使用します。
- 商品ギャラリー、バリエーション選択、カートに追加する操作が正常に動くことを確認します。
- DecorVizの商品ページで、カテゴリーと壁・床・台の上などの配置先を確認します。ホームや商品一覧にはプレビューボタンが表示されないことも確認してください。
トラブルシューティング
コードインジェクションが見つからない
Squarespaceの契約プランとサイトのアクセス権限を確認してください。設定を開けない場合はサイトの管理者に依頼してください。
ボタンが表示されない
サイト共通のフッターにコード全文と現在の設置キーが保存されているか確認します。DecorVizの設定でSquarespaceを選び、Storefrontを有効にして保存してください。公開ドメインが一致しているか、商品やカテゴリーのスイッチがオフになっていないかも確認し、編集画面の外でテストします。
写真・カテゴリー・ボタンの位置が違う
商品ページで適切なカテゴリーと写真を選び、必要に応じて仕上げごとの写真オプションを追加してください。外観ページでボタン位置を変更したら保存し、スマートフォンでも確認します。
プレビューを生成できない
Storefrontの利用状況と残りのクレジットを確認してください。解決しない場合は商品URLと表示されたエラーメッセージをサポートにお送りください。
よくある質問
すべての商品にコードを貼り付ける必要がありますか？
いいえ。サイト共通のフッターに1回設置します。その後、DecorVizで検出された商品を確認してください。
Squarespaceの拡張機能や3Dモデルは必要ですか？
必要ありません。DecorVizの設置コードと、既存の商品写真を使用します。
異なる仕上げの写真を選べますか？
はい。DecorVizの商品ページで「オプションを追加」から仕上げごとの写真を登録します。お客様はプレビュー画面で写真を切り替えられます。
編集画面でテストすればよいですか？
公開済みの商品ページをプライベートブラウズで確認してください。編集画面ではカスタムスクリプトの動作が異なる場合があります。
Storefrontを削除するには？
フッター欄からDecorVizのコードだけを削除して保存します。他のコードは残してください。設置キーを更新した場合は、新しいコードにすぐ差し替えます。
Squarespaceストアを接続しましょう
インストールコードを取得して、商品ページにお客様向けの部屋でのプレビューを追加しましょう。