<body>仕様

ショップページ全体で共通となる<body>内の要素に関する仕様です。
基本的にショップページ全体で下記要素を表示してください。

各ページで出し分けが必要な場合はページを判別するタグで出し分けを制御します。
例えばTOPページとそれ以外のページで敢えてヘッダーなどを別の見せ方をしたいなどの場合は、テーマとしてご自由に出し分けを行ってください。

ショップロゴの表示

ショップロゴ表示に関するタグは以下の通りです。

タグ説明
{LogoTag}ロゴのタグ。デザイン編集で設定したロゴ画像、もしくはロゴテキストが出力されます。
{IndexPageURL}ショップのトップページへのURLが出力されます。ショップロゴとセットで使われることが多いタグです。

ショップロゴ実装例

ショップロゴタグはトップページへのリンクと共に実装されるケースが多いので、ロゴを囲うaタグにリンクを設定するには下記のようにします。

<a href="{IndexPageURL}">
  {LogoTag}
</a>

実際にブラウザで表示される時には下記のように出力されます。
logoText というクラス名は必ず入ります。

<a href="https://ショップURL">
  <span class="logoText">ショップロゴテキスト</span>
</a>

{LogoTag} で出力される内容はデザイン編集の設定によって変化します。

デザイン編集で「画像を使用する」がOFFの場合にロゴテキストが未入力の時は、管理画面のショップ設定で設定されたショップ名がテキストとして出力され、ロゴテキストが入力済みの場合はそのテキストが出力されます。

ロゴカラーが選択済みの場合はインラインでその色が下記のように設定された状態で出力されます。

<a href="https://ショップURL">
  <span class="logoText" style="color:#f0000">ショップロゴテキスト</span>
</a>

「画像を使用する」をONにし、画像を登録すると下記のようにimgタグで画像が出力されます。alt属性には管理画面の「ショップ設定」で設定されたショップ名が入ります。
imgタグには必ず logoImage というクラス名がつきます。

<a href="https://ショップURL">
  <img class="logoImage" src="画像URL" alt="「ショップ設定」で設定されたショップ名">
</a>

カートリンク・BASEリンク

カートリンク・BASEリンクに関するタグは以下の通りです。 すべてのページで表示することが必須です。

タグ説明
{BASEMenuTag}BASEメニューのタグ。カートへのリンクとBASEへのリンクがアイコンで表示されます。
BASEロゴ非表示App(有料)をインストールしている場合、BASEのロゴが非表示になります。
表示上の最小サイズはカートアイコン、BASEアイコン共に14pxです。それ以下に縮小しないでください。
カートアイコンの右上には、カート内の商品数を示すカートバッジが表示できます。

このタグは下記のように出力されます。有料のBASE Apps「BASEロゴ非表示」を導入することでBASEロゴを非表示にすることが可能ですので、BASEロゴをCSSで意図的に非表示することは禁止です。

カートへのリンクは商品購入に関する重要な導線であるため、ショップの全ページから容易にアクセスできるようにする必要があります。

<div id="baseMenu">
  <ul class="clearfix">
    <li class="base">
      <a target="_blank" href="https://thebase.in?from=ショップID&amp;p=shop">
        <img src="/img/shop/base.png" alt="ネットショップを開設するならBASE" title="BASE" height="30">
      </a>
    </li>
    <li class="cart">
      <a href="https://c.thebase.in/order/cart/ショップID">
        <img src="/img/shop/cart.png" alt="shopping cart" height="30">
        <div class="cart-badge" style="display: none;">
          <div class="cart-qty" style="display: none;"></div>
        </div>
      </a>
    </li>
  </ul>
</div>

カートリンク・BASEリンクの表示位置に関して

販売用テーマにおいて、カートリンク・BASEリンクは以下の３つの方法のいずれかで表示される状態にしてください。
また、BASEリンクの色を変更したり、背景の色によって視認しにくくなる実装はお控えください。

  • ヘッダーナビゲーション内にカートリンク・BASEリンクを設置
  • ドロワーメニュー内にカートリンク・BASEリンクを設置
  • フッター部分にカートリンク・BASEリンクを設置

フッター部分に「Powered by BASE」と記載する実装はお控えください。

カートバッジの表示と位置・サイズに関して

テーマエディタで新規作成する際、カートバッジに関する以下の3つのスタイルがCSSで記述されています。

  • cart: カートバッジの位置基準となる親要素です
  • cart-badge: カートバッジを表示設定します
  • cart-qty: カート内の商品数を表示します。カートアイコンに合わせて位置・サイズ等を調整してください

注意事項

  • 既存のデザイナーズテーマには、カートバッジのCSSは自動反映されません。必要に応じて下記CSSを追加・修正してください
  • カートに商品が入っていない場合、カートバッジは表示されません
  • デザインを適用後に、実際に商品をカートに入れて、カートバッジの表示を確認してください

カートバッジのCSS

.cart {
  position: relative;
}
.cart-badge {
  display: block!important;
}
.cart-qty {
  position: absolute;
  top: 4px;
  right: 5px;
  padding: 0 1px;
  min-width: 14px;
  background: #fa5171;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

ナビゲーション

ナビゲーションとしてまとめて出力するタグはありません。個々のタグを利用してナビゲーションを構成してください。実装方法などはこちらのページをご確認ください。

← <head>仕様ナビゲーションに関する仕様 →