Developers

Developers

  • BASE API
  • BASE Template

›Apps

BASE Template

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

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

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

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

    基本設定

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

    各ページの仕様

    • ページ構成

    商品ページ

    • 商品ステータス
    • 購入ボタンの制御
    • 商品情報
    • Pay ID あと払いウィジェット
    • モーダル

    テンプレートタグ

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

    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
    • メールマガジンApp

    よくある質問

    • FAQ

予約販売App

予約販売Appについて

入荷前の商品を先行発売し、予約注文を受けることができるAppです。

予約販売App利用時の商品のステータスについて

予約販売Appでは、発送予定日を設定することができます。
商品のステータス詳細に関しては商品ステータスをご覧ください。

また、通常販売と予約販売中の商品を同時にカートに入れることはできません。(全体公開時)

タグ一覧

Appのコンテンツを表示するために必要なタグ一覧です。

ブロック

if (条件を満たす場合に表示)/予約販売設定された商品のステータスを表す変数

タグ説明
{block:ItemPreOrder}商品のステータスが 予約販売中 の時(設定されてない通常の商品も対象)

変数

コンテンツ

タグ説明
{ItemPreOrderTag}予約販売設定された商品の状態に応じて自動的に 予約商品テキストを表示させる

ローカライズテキスト

下記タグを使用すると、英語・外貨対応Appを利用しているショップで英語表記を選択された時に対応する英語が表示されます。

タグ日本語英語
{lang:AddToCartPreOrder}予約注文するPre-Order
{lang:PreOrderItem}予約商品Pre-Order

英語・外貨対応Appのその他のローカライズテキストはこちら。

対応が必要な箇所

  • トップページ、商品一覧(任意)
  • 商品ページ(商品のステータス)
  • 商品ページ(カートボタンの制御に関する変数)

トップページ、商品一覧(任意)

商品一覧の表示で、予約販売設定済みの商品の状態に応じてステータスを表す文言を入れてください。

details

実装例1

{ItemPreOrderTag} を利用し、予約販売設定された商品の状態に応じて自動的に 予約商品 テキストを表示できます。

(予約期間中の商品を予約商品、在庫切れの場合SOLD OUT)


  • {block:ItemNowOnSale} ... {block:ItemPreOrder}予約商品です{/block:ItemPreOrder} ... {/block:ItemNowOnSale}
  • 商品ページ(商品のステータス)

    商品一覧と同様の方法で、予約商品の状態に応じて 予約商品 や SOLD OUT の表示をしてください。

    details

    発送予定日の情報

    発送予定日: xxxx年xx月xx日 の部分は、従来の {ItemAttentionTag} で自動的に表示されます。

    下記のHTMLが展開されますのでテーマのデザインに応じてスタイルを適応してください。

    短期の予約商品販売中の場合
    <div class="preOrder">
        <div class="preOrder__label">予約商品</div>
        <p><span class="preOrder__data">発送予定: 20xx年x月x日~20xx年x月x日</span></p>
    </div>
    
    長期の予約商品販売中の場合
    <div class="preOrder">
        <div class="preOrder__label">予約商品</div>
        <p><span class="preOrder__data">発送予定: 20xx年x月上旬 から順次発送</span></p>
    </div>
    

    ※ 長期の予約商品は、日付が上旬・中旬・下旬のどれかになります。

    商品ページ(カートボタンの制御に関する変数)

    予約商品の場合、カートボタンテキストが予約注文すると表示されます。 購入ボタンの詳しい説明は購入ボタンの制御をご覧ください。

    デザインマーケットで販売するテーマを作る時の注意点

    • 予約販売Appをインストール済み、未インストールのどちらのケースでもデザインが崩れないように実装してください
    • 英語・外貨対応App、販売期間Appと併用する際は、以下の「動作のチェック」を確認いただき実装してください

    動作のチェック

    動作確認するには下記項目を参考にしてください。

    トップページ、商品一覧ページ、商品詳細ページ

    • 予約期間中の表示
      • 商品一覧ページ(任意)
        • 予約商品ラベルが表示されている
      • 商品詳細ページ
        • 予約商品ラベルが表示されている
        • 発送開始・終了予定日が表示されている
        • カートボタンテキストが 予約注文 と表示されている
        • 在庫がない場合は購入できず、 SOLD OUT と表示されている
        • 予約商品の設定をリセットし、通常商品に切り替わった際にカートボタンテキストが カートに入れる と表示されている

    販売期間Appと併用するときの表示(ステータス)

    • 販売前の場合には COMING SOON と表示されている
    • 販売終了、在庫がない場合には購入できず、 SOLD OUT と表示されている

    再入荷自動通知Appと併用するときの表示(カートボタンテキスト)

    • 販売終了、在庫がない場合には購入できず、 再入荷通知を希望する と表示されている

    英語・外貨対応Appに対応する場合

    • 英語表示の時に以下の該当箇所が正しく翻訳されるか
    • 英語に翻訳された時の文字数の違いにより、デザインへ悪影響を及ぼしていないか
    • 英語・外貨対応Appと併用するときの英語表示(商品詳細ページ)
      • 予約商品の表記がPre-OrderItemと表示されている
      • 発送予定がScheduled shipping date: MM/DD/YYYY ~ MM/DD/YYYY
      • カートボタンがPre-Orderと表示されている
    ← 販売期間設定AppメッセージApp →
    • 予約販売Appについて
    • 予約販売App利用時の商品のステータスについて
    • タグ一覧
      • ブロック
      • 変数
    • 対応が必要な箇所
      • トップページ、商品一覧(任意)
      • 商品ページ(商品のステータス)
      • 商品ページ(カートボタンの制御に関する変数)
    • デザインマーケットで販売するテーマを作る時の注意点
    • 動作のチェック
      • トップページ、商品一覧ページ、商品詳細ページ
      • 販売期間Appと併用するときの表示(ステータス)
      • 再入荷自動通知Appと併用するときの表示(カートボタンテキスト)
      • 英語・外貨対応Appに対応する場合
    • API利用規約
    • デザインマーケット利用規約
    © 2012-2025 BASE, Inc.