プレビューの表示方法とプレビュー機能について

コマースクリエイター利用時（コマースクリエイター有効化・切替後）でのプレビュー方法と仕様についてご説明します。

＜目次＞

• プレビューに必要なhosts設定について（ショップの引っ越しや移行中（有効化済み）店舗様のみ
• ［運用］メニューからの、商品グループ・商品詳細のプレビュー方法と機能について
• ［commerce creator］メニューからの、各画面のプレビュー方法と機能について
  • プレビュー可能な画面とプレビュー機能について
    • テーマ（commerce creator）
    • レイアウト（commerce creator）
      • 「レイアウト一覧」からのプレビューで表示されるページ
    • カラー・サイズ（commerce creator）
    • ページ（commerce creator）
    • フリーページ（commerce creator）
  • プレビューモード選択モーダル（コマースクリエイター）
  • プレビューモードの機能別動作について
• プレビューヘッダを非表示にするCSS記述について
• プレビューの解除方法

2024.01.24「配送・送料機能（upgrade版）」リリースに伴うプレビュー方法の一部変更について

※　2024.01.24以前からfutureshopをご利用の店舗様のみの機能となります。

同じドメインで稼働中のECサイトがある場合や、コマースクリエイター有効化の状態では、店舗ドメインは稼働中のECサイトに適用されています。

店舗ドメインでコマースクリエイター側のECサイトを閲覧するには、hosts設定が必要となります。
host設定に必要なIPアドレスは、フューチャーショップサポートからのご案内に記載されています。

hosts設定の手順については以下をご参照ください。 DNS切り替え前に利用予定のドメインで構築や表示確認をすることはできますか？（hosts設定）をご覧ください。

• なお、スマートフォン（Android/iPhoneなど）には、標準ではhosts設定機能がないため、閲覧できません。 プレビューでも同様となります。PCブラウザなどでシミュレータにてご確認ください。（Google ChromeのChrome DevTools等）

※　コマースクリエイター利用時（コマースクリエイター有効化・切替後）の説明です。

プレビュー方法

コマースクリエイター有効後に以下の画面上の［プレビュー］ボタンを押下すると、該当のグループや商品詳細のプレビューページを表示できます。

押下すると、「商品グループ」「商品詳細」画面専用の、プレビューモード選択モーダル（コマースクリエイター）が開きます。

「モード」を選択する

いずれかの動作モードを選んでプレビューを表示できます。

デザイン確認

管理画面の設定にかかわらず、ECサイトで各オプション機能を利用する設定として表示されます。
オプション機能のデザイン調整にご利用いただけます。
また、非公開の商品や商品グループが表示されます。

動作確認

管理画面の設定にしたがって、ECサイトが表示されます。非公開の商品や商品グループは表示されません。

「テーマ」を選択する

選択したテーマでプレビューを表示できます。
デバイス設定で選択されていないテーマでもプレビューを表示できます。

＜プルダウンメニュー（テーマ）の表示順について＞

コマースクリエイター＞テーマのID昇順（テーマの登録順） で表示されます。

特定のテーマをプルダウンメニューで一番上に表示したいなど、表示順を変更する場合は、コマースクリエイター＞テーマにて を押下し、表示したい順にテーマを複製してください。その後、コピー元のテーマを削除してください。

削除する場合、コマースクリエイター＞テーマ一覧＞テーマ設定内の［テーマを削除する］ボタンを押下します。

［プレビューを表示する］ボタン

「モード」、「テーマ」を選択後、押下してください。
別タブで、コマースクリエイターのユーザー画面のプレビューが表示されます。

プレビュー用URLとQRコード

スマートフォンからテーマをプレビューする場合に利用してください。
表示されたQRコードをQRコード読取機能があるアプリで読み取るか、併記されたURLをメールなどで共有してください。

プレビュー機能

• 商品グループや商品が登録されていれば、商品ページをプレビューでご覧いただけます。
• プレビューモードでも、カートに商品を入れて、購入を行えますが、受注データは作成されません。在庫数も減りません。
• 商品・商品グループは、それぞれ別のレイアウトを適用できます。（レイアウト割当機能利用）
• 運用＞商品管理＞レイアウト・SEO設定-レイアウトにて割当されたレイアウトで表示されます。
• 割当されていなければ、デフォルトレイアウトで表示されます。

プレビュー機能については、商品グループ・商品詳細ページのプレビューもご覧ください。

プレビュー可能な画面とプレビュー機能について

下記の画面にて、プレビューできます。
各画面ごとにプレビューの機能が違います。説明をご覧ください。

テーマ（commerce creator）

コマースクリエイター＞テーマのプレビューボタンを押下します。
押下すると、プレビューモード選択モーダル（コマースクリエイター）が開きます。

プレビュー機能については、コマースクリエイター＞テーマ-プレビューもご覧ください。

レイアウト（commerce creator）

コマースクリエイター＞テーマ＞レイアウト一覧のプレビューボタンを押下します。
押下すると、プレビューモード選択モーダル（コマースクリエイター）が開きます。

• 商品レイアウトであれば、すべての商品がプレビュー中レイアウトで表示されます。
• 未保存の作業内容がある場合は、未保存の作業内容を適用してプレビュー表示をできます。
• レイアウトによりプレビューボタンを押下時の表示画面が異なります。
  詳しくは、「レイアウト一覧」からのプレビューで表示されるページについてをご覧ください。

カラー・サイズ（commerce creator）

コマースクリエイター＞テーマ＞カラー・サイズ一覧のプレビューボタンを押下します。
押下すると、プレビューモード選択モーダル（コマースクリエイター）が開きます。

• 選択したカラー・サイズを適用したECサイトをプレビュー表示できます。

プレビュー機能については、コマースクリエイター＞カラー・サイズ一覧-プレビューもご覧ください。

ページ（commerce creator）

コマースクリエイター＞ページ一覧のプレビューボタンを押下します。
押下すると、プレビューモード選択モーダル（コマースクリエイター）が開きます。

• 該当ページを閲覧デバイス（デバイス設定）に従ってプレビュー表示します。
• デフォルトレイアウトで表示されます。

プレビュー機能については、コマースクリエイター＞ページ一覧-プレビューもご覧ください。

フリーページ（commerce creator）

コマースクリエイター＞フリーページ一覧のプレビューボタンを押下します。
押下すると、プレビューモード選択モーダル（コマースクリエイター）が開きます。

• 該当ページを閲覧デバイス（デバイス設定）に従ってプレビュー表示します。
• フリーページはページごとにレイアウトを割当できます。
• プレビューでは、割当されたレイアウトで表示されます。
• 割当がなければ、有効なレイアウトで表示されます。

プレビュー機能については、コマースクリエイター＞ページ一覧-プレビューもご覧ください。

プレビューモード選択モーダル（コマースクリエイター）

プレビュー可能な画面にてプレビューボタンを押下すると、プレビューモードを選択するモーダルが開きます。

デザイン確認モード

管理画面の設定にかかわらず、ECサイトで各オプション機能を利用する設定として表示されます。
オプション機能のデザイン調整にご利用いただけます。
また、非公開の商品や商品グループが表示されます。
なお、プレビューモードでは非公開商品をカートに入れることはできません。

動作確認モード

管理画面の設定にしたがって、ECサイトが表示されます。
非公開の商品や商品グループは表示されません。

プレビュー用URL・QRコード

スマートフォンからテーマをプレビューする場合に、表示されたQRコードを、QRコード読取機能があるアプリで読み取ってください。
または併記されたURLをメールなどで共有してください。
プレビューを表示するボタンを押下すると、別タブで表示されます。

「プレビュー用URL」横の を押下すると、URLをクリップボードにコピーできます。

プレビューモードの機能別動作について

各機能ごとに動作確認モード・デザイン確認モードのそれぞれでの表示は以下となります。

プレビュー表示をすると、下図（赤枠）のようにプレビューヘッダーが表示されます。

非表示にするには、下記の記述をご利用のテーマのオリジナルCSSに記述してください。

.fs-preview-header { display: none; }

プレビューモードでECサイトを閲覧後、再度ECサイトを開くと、キャッシュの影響によりプレビューモードがそのまま表示されることがあります。
その場合は、以下の方法でプレビューを解除してください。

1. ［運用］［管理］メニューの管理画面右上の「ショップを見る」を押下
   もしくは、［commerce creator］［システム］［設定］メニューの画面右上の「店舗名」を押下

2. 一度管理画面からログアウトし、再ログインしてからECサイトを開く