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

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

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

ミフネWEBショップのスクリーンショット
ミフネWEB・BASEショップスクリーンショット

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

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

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

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

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

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

商品ページの関連商品を3つ以上掲載するカスタマイズ

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

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

ミフネWEBショップの商品ページスクリーンショット
関連商品の表示サンプル

よくある質問ページを自作するカスタマイズ

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

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

FAQページのスクリーンショット
ミフネWEBショップのFAQページ

閲覧履歴を掲載するカスタマイズ

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

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

ミフネWEBショップの閲覧履歴スクリーンショット
閲覧履歴のスクリーンショット

ログイン / ログアウト状態に応じて表示を切り替えるカスタマイズ

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

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

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

ブログAppの活用

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

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

補足

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

BASE (ベイス)

BASEロゴ

BASEは初期コストゼロで始められるネットショップ作成サービス。今すぐネットで販売したい方、SNSなど独自の集客手段を持つ方におすすめします。

オープンサポートでは、有料テーマの無償利用(1つのみ)・広告ロゴ非表示を無料でご利用いただけますので是非ご活用ください。

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。