コンテンツまでスキップ
日本語 - 日本
お問い合わせ
  • 検索フィールドが空なので、候補はありません。

ストアをデザインして公開する

完成サンプルを基に、デザインの作成手順をご案内します。

PC版ストアデザイン完成例

この完成例は10個のパーツから成り立っています。3～10のパーツは、お好みで追加・削除ができます。

  1. Shop Sign: 看板
  2. Navigation bar: ナビゲーションバー
  3. Full screen banner: 全画面表示バナー
  4. Custom Content: カスタムコンテンツ
  5. Video: 動画
  6. Main Categories: メインカテゴリ製品
  7. Showcase Products: ショーケースプロダクト
  8. Double Row Product: 製品を2列で表示する
  9. Company Profile: 会社紹介
  10. RFQ Message: 問い合わせ

Minisite sample parts

Shop Sign: 看板に画像を追加する

  1. ［Shop Sign］をクリックします。
  2. 画面右に編集エリアが表示されます。［New shop sign version］を選択します。
  3. ［New shop sign version］を選択します。
    指定画像サイズ: 横400px*縦240px, 2M以内
  4. アップロードする画像ファイルを選択します。
  5. ファイルがアップロードされます。［Save and Close］をクリックします。
  6. 編集エリア右下の［Save］をクリックして保存を完了します。
    shopSign

Navigation bar: ナビゲーションバーの色を変更する

  1. ［Page Background］をクリックします。
  2. Color Pickerからお好きな色を選択します。
  3. ナビゲーションバーの色が変更されます。
    navigationBar

Full screen banner: 全画面表示バナーを追加する

  1. 左メニュー［Image&Text］より［Full-screen banner］を追加します。
  2. ［Full-screen banner］をクリックします。
  3. 画面右に編集エリアが表示されます。バナーサイズを1920*550か1920*650のどちらかを選択します。
    指定画像サイズ: 横1920px*縦550px もしくは650px, 2M以内
  4. ［Upload and Edit Image］をクリックします。
  5. 初期画像が3件設定されていますので、1件のゴミ箱アイコンをクリックして削除します。
  6. 残り2件の画像をクリックし、表示したい画像ファイルをアップロードします。
  7. ［Save and Close］をクリックしてアップロードを完了します。
  8. もう1件の画像も同じ手順でアップロードします。
  9. ［Confirm］をクリックします。
  10. ［Carousel Interval Settings］で、バナーの変更間隔を選択します。
  11. 編集エリア右下の［Save］をクリックして保存を完了します。
    fullScreenBanner

Custom Content: カスタムコンテンツを追加する

  1. 左メニュー［Image&Text］より［Custom Content］を追加します。
  2. ［Custom Content］をクリックします。
  3. 画面右に編集エリアが表示されます。［Set Custom Content］をクリックします。
  4. コンテンツ編集エリアが表示されます。［Upload image file］アイコンをクリックします。
  5. 画像をアップロードします。
    推奨画像サイズ: 横1200px*縦1000px(縦は1000px以内), 2M以内
  6. ［Confirm］をクリックします。
  7. 編集エリア右下の［Save］をクリックして保存を完了します。
    customContent

Video: 動画を追加する

動画はあらかじめVideo Bankにアップロードしておいてください。

  1. 左メニュー［Video］より［Video Module］を追加します。
  2. ［Video Module］をクリックします。
  3. 画面右に編集エリアが表示されます。［Select Video］をクリックします。
  4. 設定する動画を選択し、［Select Video］をクリックします。
  5. Video location(動画表示位置)を選択します。ここではRight(右)を選択します。
  6. ［Set Video Description］をクリックします。
    ※文字の大きさやボリュームによっては途中で表示が切れますので、設定後に調整を行ってください。
  7. 動画の説明文を入力します。
  8. ［Confirm］をクリックします。
  9. 編集エリア右下の［Save］をクリックして保存を完了します。
    video

Main Categories: メインカテゴリ製品を追加する

このパーツでは、製品グループの上位4件が表示されます。製品グループの登録・変更はこちらからご確認ください。

  1. 左メニュー［Recommended Products］より［Main categories］を追加します。
  2. ［Main categories］をクリックします。
  3. 画面右に編集エリアが表示されます。［Recommended Products］より表示製品を指定します。
    • Automatic: システムが自動で該当製品グループの属する製品を表示します。
    • Manual: 手動で表示する製品を指定します。
  4. 編集エリア右下の［Save］をクリックして保存を完了します。
    mainCategories

Showcase Products: ショーケースプロダクトを追加する

このパーツは、プロダクトショーケースに設定されている製品を表示します。ショーケースへの製品ページ追加・変更はこちらからご確認ください。

  1. 左メニュー［Recommended Products］より［Showcase Products］を追加します。
    showcaseProducts

Double Row Product: 製品を2列で表示する

  1. 左メニュー［Recommended Products］より［Double Row Product］を追加します。
  2. ［Double Row Product］をクリックします。
  3. 画面右に編集エリアが表示されます。［Recommended Products］より表示製品を指定します。
    • Automatic: ［Most popular］(人気商品)、［Latest］(最新掲載)を選択すると、システムが自動で条件に合う製品を8件表示します。
    • Manual: 手動で表示する製品を8件指定します。
  4. 編集エリア右下の［Save］をクリックして保存を完了します。
  5. ［Display section title］のチェックを外します。
    ※titleを表示したままにする場合は、チェックを外さず、titleの文字を変更してください
  6. 編集エリア右下の［Save］をクリックして保存を完了します。
    doubleRowProduct

Company Profile: 会社紹介を追加する

このパーツでは、Company profileで登録された情報や画像を表示します。情報の追加・変更はこちらからご確認ください。

  1. 左メニュー［Company］より［Company Profile］を追加します。
    companyProfile

RFQ Message: 問い合わせ欄を追加する

  1. 左メニュー［Company］より［RFQ Message］を追加します。
    ※このパーツは編集できません。
    rfqMessage

デザインを確認・公開する

  1. ページのデザインが完了したら、画面右下の［Preview］をクリックします。
  2. ［PC］を選択します。
  3. プレビューが表示されるので、デザインに問題ないか確認します。
  4. 画面右下の［Back to Edit］をクリックして、ストアビルダーに戻ります。
  5. 画面右下の［Publish］をクリックします。
  6. 確認メッセージが表示されます。［Confirm publication］をクリックします。
    ※Mobile版ストアデザインが作成されていない場合は、PC版デザインをMobile版に同期をするかどうかの確認メッセージが表示されます。その場合は［Confirm Sync］をクリックします。
  7. Publish Successfullyと成功メッセージが表示されると、デザインの公開が完了です。
    publish