Developers

Developers

  • BASE API
  • BASE Template

›BASE Template

BASE Template

  • はじめに
  • 更新情報
  • テーマの作成方法

    • テーマの作成・管理方法
    • テーマエディタの使い方

    テーマの販売方法(デザインマーケット)

    • テーマを販売したい方へ
    • デザイナー登録
    • デザインガイドライン
    • デモ用ショップに関する注意事項
    • 新規テーマの販売申請
    • テーマのアップデート申請
    • テーマ申請チェックリスト

    基本設定

    • 全体構成
    • 必須タグ
    • <head>仕様
    • <body>仕様
    • ナビゲーションに関する仕様

    各ページの仕様

    • ページ構成

    商品ページ

    • 商品ステータス
    • 購入ボタンの制御
    • 商品情報
    • モーダル

    テンプレートタグ

    • 非表示
    • ページ
    • デザインオプション
    • ショップ
    • url
    • イテレータ
    • 商品
    • ソーシャル
    • 関連商品
    • コンテンツ

    Apps

    • 商品検索App
    • カテゴリ管理App
    • ラベルApp
    • Blog App
    • セールApp
    • 英語・外貨対応App
    • ショップコインApp
    • BASEロゴ非表示App
    • デジタルコンテンツApp
    • レビューApp
    • 販売期間設定App
    • 予約販売App
    • メッセージApp
    • 送料詳細設定App
    • 商品説明カスタムApp
    • 抽選販売App
    • テイクアウトApp
    • 商品オプションApp
    • コミュニティApp
    • 再入荷自動通知App
    • 年齢制限App
    • お知らせバナーApp
    • メールマガジンApp

    よくある質問

    • FAQ

メッセージApp

メッセージAppとは

メッセージAppはショップにメッセージ機能を設置できます。 お客様とショップ上でやり取りが可能になり、メールよりも円滑にやり取りができます。

タグ一覧

※テーマ側での実装は不要なので、提供しているタグはありません。 アイコン、メッセージウィンドウは、Appをインストールするだけで表示されるようになります。

メッセージAppの表示例

デスクトップ表示

デスクトップでは右下の固定位置にアイコンが表示され、
アイコンをクリックするとメッセージウィンドウが表示されます。

メッセージApp デスクトップ表示

モバイル表示

モバイル表示では画面下部の固定位置にボタンが表示され、 ボタンをクリックするとメッセージウィンドウが全画面で表示されます。

メッセージApp モバイル表示

動作のチェック

CSSでテキストカラーや背景色を変更した場合の動作確認には、下記項目を参考にしてください。 メッセージAppのアイコンは画面に対して固定位置に表示されるので、カートに入れるボタンやその他の重要な要素に重なる可能性がありますのでご注意ください。

ショップページ全体

  • メッセージAppのアイコンが、その他の重要な要素と重なって隠れたりしていないか

モバイル表示の時

  • ドロワーナビゲーション内を一番下までスクロールした時に、メッセージAppのアイコンが一番下のリンクと重なっていないか
  • ページ下部までスクロールした時に、メッセージAppのアイコンがフッター内のリンクと重なっていないか

よくあるNGケース

  • メッセージ内の要素(商品画像や商品名、閉じるアイコンなど)の表示位置がずれている。
  • テーマ設定でテキストカラーを変更した際にメッセージ内Appの要素が変更され、ローコントラストになり視認性が低い状態になる。
← 予約販売App送料詳細設定App →
  • メッセージAppとは
  • タグ一覧
  • メッセージAppの表示例
    • デスクトップ表示
    • モバイル表示
  • 動作のチェック
    • ショップページ全体
    • モバイル表示の時
    • よくあるNGケース
  • API利用規約
  • デザインマーケット利用規約
© 2012-2022 BASE, Inc.