Developers

Developers

  • BASE API
  • BASE Template

›商品ページ

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

商品情報

商品詳細情報

商品の詳細情報は、 ItemAttentionTagを使うことで商品のステータス・設定Appsによって表示テキストが自動で切り替わります。


{ItemAttentionTag}

以下のHTMLが展開されます。

<p class="attention">※こちらの価格には消費税が含まれています。</p>
<p class="attention">※送料は別途発生いたします。詳細は<a id="postageOpen">こちら</a></p>

販売期間設定Appの場合

以下のHTMLが展開されます。

販売前で開始日あり、終了日ありの場合
<p class="attention salesPeriod salesPeriod--term">販売期間<br>2019年1月1日 00:00 ~ 2019年1月31日 23:59</p>

販売前で開始日あり、終了日なしの場合
<p class="attention salesPeriod salesPeriod--willStart">2019年1月1日 00:00 から販売</p>

販売終了後の場合
<p class="attention salesPeriod salesPeriod--finish">2019年1月31日 23:59 に販売終了</p>

予約販売Appの場合

以下の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>

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

長期の予約商品の場合は、以下のHTMLが展開されます。

<p class="attention">※この商品は、発送予定時期が同じ商品とのみあわせて注文することができます。</p>
← 購入ボタンの制御Pay ID あと払いウィジェット →
  • 商品詳細情報
    • 販売期間設定Appの場合
    • 予約販売Appの場合
  • API利用規約
  • デザインマーケット利用規約
© 2012-2025 BASE, Inc.