BASEのHTML編集Appでテーマカスタマイズ

BASEショップにHTML編集Appをインストール（無料）すると、ショップデザインを自作することができます。

HTML、CSS、JavaScriptができれば大体のご要望は実現できますが、実際にどんなことができるのか、ミフネWEB・BASEショップにいくつか実装してみました。

特徴がはっきりしているカスタマイズ内容をかいつまんでご紹介します。

トップページに任意の商品カテゴリを掲載するカスタマイズ

BASEはデフォルトで「トップページに全ての商品一覧を表示する」ように出来ています。

商品の並び順は管理画面で入れ替えられるので、数が少ない内はこれでも対応できるのですが、商品数が多くなってくると並び替えするのも大変です。（季節性商品を扱っていたりすると、シーズンごとにごっそり入れ替える羽目に。）

ユーザー視点で見ても、分類されていない商品一覧では目的のものを探しづらいです。そこでカテゴリごとに分類した商品一覧を掲載しようというカスタマイズです。

必要に応じて、表示させるカテゴリを切り替えれば良いので、いちいち商品を並び替えする手間も削減されます。

オフィシャルテーマ以外だと、商品ページの関連商品に表示されるのは3商品までです。これを好きなだけ表示させるカスタマイズ。

表示数は自由に変更できます。あまりに数が多いときは横カルーセルにした方が良いですね。

オフィシャルテーマだと「追加ページApp」で自由にページ追加できるのですが、自作テーマや有料テーマでは追加できません（2022年6月23日時点）。

そこで任意のページを強引に作ってしまうカスタマイズです。例としてよくある質問を掲載しているだけで、内容は自由に変えられます。

ユーザーが閲覧した商品を表示させるカスタマイズです。

デモページでは別ページで作っていますが、今思えばモーダル表示にしても良かったんじゃないかと思います。

少し調整したい部分があるのでデモページでは非表示にしていますが、会員のログイン/ログアウト状態に応じて、表示内容を切り替えるカスタマイズ。

BASEのショップ会員登録については、コミュニティAppをインストールすることでできます（無料App）。

コミュニティAppの基本的な使い方としては「会員限定の商品を販売できる」ことですが、それを応用して会員ログイン時だけ一部表示させたりができます。

BASEのショップ内にブログを作れるブログApp。単純にブログを書くだけでも機能しますが、投稿内に画像、スライド、動画（YouTube or Vimeo）を掲載できるので使い方次第で色々できます。

デモページには使ってないですが、BASEの中にキャンペーン用LPを作りたいとか、実店舗のメニューも掲載したいだとかは大体ブログAppで解決した思い出があるので紹介しておきます。

今回のカスタマイズはすべてHTML編集Appのみでできる範囲です。BASEにAPI利用登録すれば上の内容をもっと簡単に実装できたりさらに拡張することもできますが、今回はAPIなしでできる範囲しか行っていません。
よくある勘違いですが、HTML編集できるのは「自作用に用意されている標準テーマ」、または「購入済みの有料テーマ」のいずれかです。「オフィシャルテーマ」をもとに一部HTML編集することはできません。