スマートフォンでプレビューを確認する方法

スマートフォン用のスタートアップテーマについて

1. スタートアップテーマについて

   コマースクリエイターでは、ショップ開店のベースにしていただける初期テーマとして、［スタートアップテーマ（PC/タブレット）］と［スタートアップテーマ(レスポンシブ/スマートフォン)］が用意されています。

   「レスポンシブデザイン」「アダプティブデザイン（デバイス最適化）」のどちらでショップを作るかによって、どのテーマをベースにするかが異なります。

   まず、［スタートアップテーマ（PC/タブレット）］に対して、これまでのSTEPで変更・追加してきた内容が、［スタートアップテーマ(レスポンシブ/スマートフォン)］にどのように表示されているかを見てみましょう。

   「スマートフォンにも反映されているもの」＝「テーマに共通で表示される項目」と「スマートフォンには反映されていないもの」＝「テーマごとに設定が必要な個別の項目」を確認します。

   構築中（hosts設定中）のプレビュー方法

   スマートフォン（Android/iPhoneなど）にはhosts設定機能がないため、実際の端末では閲覧ができません。PCブラウザなどでシミュレータにてご確認ください。（参照：Google Chromeの解説ページ）

   ※hosts設定について不明な場合は、構築中の店舗を表示するためにhosts設定をするをご覧ください。

※「レスポンシブデザイン」「アダプティブデザイン（デバイス最適化）」の特徴などについては、本STEPの最終パートPCとスマートフォンの表示を分けるべきかにて説明します。

スマートフォン用の［テーマ］を開く

1. commerce creator＞テーマを開きます。

   

プレビューする

1. ［スタートアップテーマ(レスポンシブ/スマートフォン)］のをクリックします。

   

2. モーダルが開きます。
   ［プレビューを表示する］ボタンをクリックすると、別タブでショップのトップページが表示されます。

   

3. PCブラウザのシミュレータ機能を利用します。
   Chromeをお使いの場合は、［F12］を押下し、 をクリックすると、スマートフォンの画面サイズになります。

   

ショップ開店後のプレビュー方法

スマートフォンにてプレビューする場合は、表示されたQRコードをQRコード読取機能があるアプリで読み取るか、記載されているURLをスマートフォンへメールなどで送信し、URLをタップします。

※開店前にはDNS切り替えなどの必要な作業がありますので、開店するをご覧ください。

表示されているコンテンツを確認する

1. さて、プレビューを見てみましょう。
   PCとスマートフォンでは表示されているコンテンツが異なっていることがわかるでしょうか。

   

   

• ［カルーセルパーツ］で作成したトップページのメイン画像のカルーセル

• ［コラムパーツ］で作成したトップページのコラム

• コピーして新たに作成した［トップページコラム02］

• ［パーツ］の内容はテーマ共通
• ［パーツ］の［レイアウト］配置はテーマ別

• テーマ一覧-プレビュー
• デバイス設定