同じドメインで稼働中の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をメールなどで共有してください。

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

下記の画面にて、プレビューできます。

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

テーマ（commerce creator）

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

「モード」を選択すると、選択したテーマを適用したECサイトをプレビュー表示できます。
詳しくは、コマースクリエイター＞テーマ-プレビューをご覧ください。

レイアウト（commerce creator）

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

「モード」を選択すると、選択したレイアウトをプレビュー表示できます。
レイアウトによりプレビューボタンを押下時の表示画面が異なります。
詳しくは、「レイアウト一覧」からのプレビューで表示されるページについてをご覧ください。

商品レイアウトであれば、すべての商品がプレビュー中レイアウトで表示されます。
未保存の作業内容がある場合は、未保存の作業内容を適用してプレビュー表示をできます。

カラー・サイズ（commerce creator）

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

「モード」を選択すると、選択したカラー・サイズを適用したECサイトをプレビュー表示できます。
詳しくは、コマースクリエイター＞カラー・サイズ一覧-プレビューをご覧ください。

ページ（commerce creator）

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

「モード」を選択すると、該当ページを閲覧デバイス（デバイス設定）に従ってプレビュー表示します。
デフォルトレイアウトで表示されます。

詳しくは、コマースクリエイター＞ページ一覧-プレビューをご覧ください。

フリーページ（commerce creator）

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

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

詳しくは、コマースクリエイター＞フリーページ一覧-プレビューをご覧ください。

商品管理・商品グループ管理（classic）

運用＞商品管理＞商品グループ管理（新規登録・編集）/運用＞商品管理＞商品新規登録・商品基本情報編集のプレビューボタンを押下します。
押下すると、プレビューモード（コマースクリエイター）を選択するモーダルが開きます。

移行中（有効済み）店舗は、以前からのユーザー画面のプレビュー・コマースクリエイター用ユーザー画面のプレビューを選べます。

商品グループや商品が登録されていれば、商品ページをプレビューでご覧いただけます。
プレビューモードでも、カートに商品を入れて、購入を行えますが、受注データは作成されません。
また在庫数は減りません。

商品・商品グループは、それぞれ別のレイアウトを適用できます。
運用＞商品管理＞レイアウト・SEO設定-レイアウトにて割当されたレイアウトで表示されます。
割当されなければ、デフォルトレイアウトで表示されます。

詳しくは、商品グループ・商品詳細ページのプレビューをご覧ください。

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

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

デザイン確認モード

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

動作確認モード

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

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

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

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

プレビューヘッダを非表示にするCSS記述について

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

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

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

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

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





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