WooCommerce ストアフロント設定ガイド

始める前に

DecorViz Storefrontは、対応する商品ページを検出して商品画像を読み取り、部屋でのプレビューボタンを追加します。お客様はウィジェットを開いて部屋の写真をアップロードするだけで、DecorVizのアカウントを作らずにプレビューを生成できます。

• 商品写真が鮮明な、公開中のWooCommerceストア。
• ストアフロントを利用でき、プレビュー用のクレジットが残っているDecorVizアカウント。状況はストアフロントのダッシュボードで確認できます。
• WordPressの管理者権限、またはサイトのスクリプトを管理している方の協力。

WooCommerceとの連携には、DecorVizのダッシュボードで発行するスクリプトを使います。サイト全体のフッターにコードを入れるための既存ツールや、HTMLスクリプトを入れられるWordPressプラグインで設置できます。

1. WooCommerceストアを接続する

ストアフロントを作成する

ログインしてDecorViz ストアフロントのダッシュボードを開きます。初めて開くとストアフロントを作成が表示されます。

ストアフロントを有効にしてコードをコピーする

設定ページを開き、ストアフロントを有効にするがオンになっていることを確認して変更を保存をクリックします。下にスクロールしてインストールコードのカードでコピーをクリックします。

このガイドからではなく、ダッシュボードからコピーしてください。ダッシュボードのコードには、正しいインストールキーが自動で入っています。下の例は形式を示すだけのものです。

<script
  src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
  data-key="YOUR_INSTALL_KEY"
  async
></script>

2. WordPressにコードを設置する

商品ページでスクリプトが読み込まれるよう、サイト全体に適用されるフッター用のコード欄を使います。そのためのツールがすでにサイトにある場合は、コード全体をそこに貼り付けて保存してください。

フッター用コードのプラグインを追加する

コードをFooterに貼り付ける

<script
  src="https://decorviz.ai/runtime/storefront/v2/auto-inject.js"
  data-key="YOUR_INSTALL_KEY"
  async
></script>

サイトのキャッシュをクリアする

WordPressのキャッシュプラグインを使っている場合は、キャッシュをクリアしてください。サーバーやCDNでもページをキャッシュしている場合は、そちらもクリアします。その後、プライベートウィンドウで公開中の商品ページを開き、更新されたページを確認します。

WPCodeには、このためのサイト全体用のスクリプト欄があります。最新の画面については、WPCodeのHeader & Footerの公式説明をご覧ください。

開発者が設置を担当している場合

サイト共通のフッター、またはWordPressのフッターフックからダッシュボードのコードを追加してもらい、商品ページで読み込まれるようにしてください。プラグインで追加したコードはテーマを変えても残ります。テーマにスクリプトを入れている場合は、テーマを変更したときにもう一度設置を確認してください。

3. 部屋でのプレビューボタンをカスタマイズする

DecorVizのダッシュボードで外観ページを開きます。ボタンのテキスト、スタイル、角の形、色、位置を選び、変更を保存をクリックします。お客様に内容が伝わるよう、「自分の部屋で見る」のような言葉を使いましょう。

最初のテストでは：まずカート追加ボタンの上から始めます。テーマによってその位置が使いにくい場合は、商品画像の下を試してください。保存して商品ページを再読み込みすると、変更を確認できます。

商品ページで、カテゴリーのスイッチと商品の一覧を確認します。部屋でのプレビューを出したくない商品があれば、そこでボタンをオフにします。まずは検出の初期設定のままテストし、そのあとで必要に応じて設定ページの最小信頼度を調整してください。

WooCommerceのカスタムギャラリーやページビルダーを使っていると、ボタンの位置や検出される画像が変わることがあります。スマートフォン表示も含め、ご自身のテーマで位置を確認してください。

4. 公開中の商品ページで確認する

ラグ、ソファ、椅子など、メイン写真が鮮明な商品を使います。WordPressの編集画面やプレビューのリンクではなく、お客様が見る公開中の商品URLを開いてください。

1. DecorVizに保存したホスト名で、公開中の家具の商品ページをプライベートウィンドウで開きます。
2. 選んだ位置にプレビューボタンが表示されることを、パソコンとスマートフォンの両方で確認します。
3. ウィジェットを開き、想定どおりの商品写真が使われていることを確認します。バリエーションのある商品では、選択を変えて画像を確認してから生成してください。
4. 部屋の写真をアップロードしてプレビューを生成します。プレビューのクレジットを1つ使います。
5. ギャラリー、バリエーションの選択、カートに追加ボタンが引き続き動くことを確認します。
6. DecorVizの商品ページを開き、アクセスしたページが一覧にあることを確認します。トップページやブログページも開き、そこにはプレビューボタンが表示されないことを確認してください。

うまくいかないとき

ボタンが表示されない

• サイト全体のフッターにコードが保存され、実際のインストールキーが入っていることを確認します。
• DecorVizの設定でストアフロントを有効にするがオンになっていることを確認し、変更を保存をクリックします。
• 公開中のホスト名が、ストアフロントの設定と一致していることを確認します。
• ページとCDNのキャッシュをクリアし、プライベートウィンドウで再読み込みします。
• 商品ページで、その商品またはカテゴリーのボタンがオフになっていないか確認します。
• 商品名、短い説明、または商品カテゴリーに、ラグ、ソファ、ランプなど商品の種類を表す言葉が入っているか確認してください。DecorVizはこれらの言葉で商品を認識します。どこにも入っていない場合は、短い説明かカテゴリーに追加してください。
• 表示速度のプラグインが、操作されるまでJavaScriptの読み込みを遅らせている場合は、DecorVizのスクリプトをその対象から外して、もう一度テストしてください。

違う画像が選ばれる、またはボタンの位置がおかしい

プラットフォームがWooCommerceに設定されていることを確認し、別の商品ページでも試してください。ボタンの位置の設定も見直します。カスタムギャラリーやページビルダーが原因で解決しない場合は、公開中の商品URL、テーマ名、使っているギャラリーやビルダーを添えてDecorVizにお問い合わせください。

ウィジェットは開くが、プレビューに失敗する

ストアフロントの利用状況と残りのクレジットを確認してください。鮮明な部屋の写真で試し、商品画像が読み込まれることを確認します。それでも解決しない場合は、商品URLとエラーメッセージをサポートまでお送りください。

ボタンが2つ表示される

WPCodeとテーマのフッターのように、コードが2か所に追加されていないか確認してください。設置は1つだけ残して重複を削除し、キャッシュをクリアして再読み込みします。

テーマについて相談したい

公開中の商品ページのURL、WordPressのテーマ名、問題のスクリーンショットを添えてお問い合わせください。ページビルダーや商品ギャラリーのプラグインを使っている場合は、正しいレイアウトを確認できるよう、それもお知らせください。

よくある質問

そのほかのダッシュボードの設定は、ストアフロント設定ガイドをご覧ください。Shopifyの場合はShopifyアプリガイドをご利用ください。