開店ガイド
運用サポート(平日10:00~17:00) 06-6485-6485

変更した内容をプレビューしてみよう

このパートでは、変更したコラムがショップ画面でどのように表示されるか、プレビューで確認してみます。
ここまでの操作については、前パートをご確認ください。

[プレビュー]画面を開く

  1. トップページ(PC)の[レイアウト変更]画面の[プレビュー]ボタンをクリックします。

    前パートの[コラム変更]画面で、[保存する]ボタンをクリックすると、トップページ(PC)の[レイアウト変更(コンテンツエリア)]画面に遷移します。

    トップページコンテンツエリアプレビューボタン
  2. [デザイン確認モード]を選択し、[プレビューを表示する]をクリックします。

    プレビューモーダル

トップページを確認する

  1. 変更前
    変更前のコラム
    変更後
    変更後のコラム
  2. 以下の変更を確認しましょう。

    • コラム画像の1枚目が変更されていること
      例では、スタッフおすすめの画像が、白いコートを着た女性の画像に変わっています。
      コラムの見出しや本文も変更しましたので、同様に変更されています。
    • 1つ目のコラムの[見出し][本文]が変更されていること
      例では、コラムの[見出し][本文]に文章が追加されています。
    • コラムの順番が変わっていること
      例では、2つ目ののコラムと3つ目のコラムが入れ替わっています。

[保存する]をクリックする

  1. プレビューで問題がなければ、[レイアウト変更]画面の[保存する]をクリックします。
    レイアウト一覧に戻ります。

    ※[保存する]ボタンをクリックしなくても[コラムパーツ]の変更はすでにユーザー画面に反映されていますのでご注意ください。

複数の[テーマ]を利用してショップを作成している場合

デバイス設定で、スマートフォン側に設定した[テーマ]では、「今回の[コラムパーツ]の変更はどうなっているの?]「同じ操作をする必要があるの?]と思われた方もいらっしゃるのではないでしょうか。

のちのSTEP「PCとスマートフォンでの表示の違い」で解説しています!

気になる方は先にご一読ください。
もちろん、そのままSTEPを進んでいただいてまとめとして読んでいただいても結構です。

<補足>複数の[テーマ]を利用とは?

のちのパートPCとスマートフォンの表示を分けるべきかで、詳しく説明しますが、PC/タブレットは、「スタートアップテーマ(PC)」テーマ、スマートフォンは「スタートアップテーマ(スマートフォン)」テーマ、などデバイスごとに別の[テーマ]を利用して(アダプティブ(デバイス最適化)で)ショップを構築している場合を指します。

関連マニュアル

  • プレビューについて
  • コマースクリエイターのプレビューモードでは、管理画面の設定にかかわらず、非公開の商品や未設定の機能の表示を確認できる[デザイン確認モード]と、管理画面の設定にしたがって表示される[動作確認モード]があります。
  • 最新ファイルを読み込ませる記載方法
  • 画像更新時に「新しい画像がなかなか読み込まれない」と感じたら、ご参照ください。

以上で、[コラムパーツ]を使用して、トップページのバナー表示をカスタマイズできました。

その他にも、コラムの表示数を2~4カラムまでカスタマイズできます。classの付け替え一つで簡単にできます。
次のSTEPで順次見ていきましょう。