ホームページインターフェースをカスタマイズする (6)
実装にあたっては、ブランド、製品、そしてユーザーエクスペリエンスに合わせてホームページの外観と雰囲気をカスタマイズする必要があります。この記事では、ホームページをカスタマイズする方法について解説します。
ホームページインターフェースをカスタマイズする (6)
はじめに
Bagisto は、LaravelとVue.js上に構築されたオープンソースのEコマースプラットフォームです。最も人気のあるデフォルトテーマの1つが Velocity であり、これはモダンで軽量なインターフェースで、ストアページ用の多くの機能をサポートしています。
しかし、実際の導入時には、ブランド、製品、ユーザーエクスペリエンスに合わせてホームページのインターフェースをカスタマイズしたいと思うはずです。この記事では、BagistoのVelocityホームページを編集する方法を探っていきます。
1. テーマ設定でコンテンツブロックを整理する方法
https://[your_domain]/admin/settings/themes にアクセスします。「Sort Order」をクリックして、小さい順に並べ替えます。
インターフェースは次のようになります：
合計12行あり、これは以下の画像に示すように、ホームページのコンテンツブロックに対応しています。
上のスクリーンショットに何か異常な点を見つけましたか？はい、説明します：
- 1つ目 - ブロック3、ブロック4、ブロック7がありません：これは、まだ商品カテゴリを作成したり、ホームページに表示する商品をセットアップしていないため、表示するデータがないからです。
- 2つ目 - ブロック12がブロック11の上に配置されています：これは、ブロック11の「type」が「footer_links」だからです。このタイプのブロックは、常にウェブサイトのレイアウトの最後に配置されます。
2. Velocityのテーマ設定におけるTypeの種類
/admin/settings/themes でテーマを設定する際、ホームページの各ブロックには独自のTypeがあります。それぞれのタイプを正しく理解することで、コンテンツを論理的に配置し、顧客体験を最適化することができます。
以下に、重要な6つのタイプを紹介します：
🛍️ 商品カルーセル
- 目的： 商品を横スクロール形式（カルーセル）で表示することです。
- 用途： ホームページやランディングページ；「注目の商品」「新着商品」「割引商品」「ベストセラー」などの基準に基づいて商品を展示します。
- 設定： カテゴリを選択するか、手動で商品IDを入力します；ブロックのタイトルを入力します；表示する商品の数を指定します。
- 例： ShopeeやLazadaの「本日のおすすめ」や「注目の商品」セクションのように、横にスライドする形式です。
📂 カテゴリカルーセル
- 目的： 商品カテゴリを横スクロール形式で表示することです。
- 用途： 顧客が大きな商品グループ（例：電話、ラップトップ、ファッション、化粧品など）に素早くアクセスできるようにします。
- 設定： 親カテゴリを選択します；表示する子カテゴリの数を指定します。
- 例： Tikiのホームページにある横スクロールのカテゴリセクションで、顧客が関心のある商品グループに素早くクリックできるようにします。
📝 静的コンテンツ
- 目的： 固定されたコンテンツ（HTML、JavaScript、またはテキスト）を挿入することです。
- 用途： プロモーションバナー；お知らせ；ショップ紹介；第三者のコード（YouTube動画、Googleマップなど）を埋め込みます。
- 設定： テキストまたはHTMLを直接入力します。
- 例： ホームページに「全国送料無料 – 7日間返品可能」というテキストブロックを配置する。
🖼️ 画像カルーセル
- 目的： 1つまたは複数の画像をスライダー形式で表示し、自動再生も可能です。
- 用途： ページ上部の大きな広告バナー；商品やサービスを紹介する画像のコレクション。
- 設定： 画像をアップロード（標準サイズ：1920x600px）；必要に応じて付属リンクを入力；表示順序を選択；自動再生するかどうかを選択。
- 例： ほとんどのEコマースサイトのホームページ上部にあるメインバナースライダー。
🔗 フッターリンク
- 目的： フッターにリンクグループを作成することです。
- 用途： 静的ページへのクイックリンク：プライバシーポリシー、利用規約、連絡先、会社概要など。
- 設定： リンクリストのタイトル（例：「私たちについて」）を入力；子リンクのリストを入力。
- 例： Shopeeのフッターには、「お客様サポート」、「私たちについて」、「販売方針」などのセクションがあります。
⚙️ サービスコンテンツ
- 目的： フッターにサービスやコミットメントを表示することです。
- 用途： ショップのコミットメントを提示：迅速な配送、24時間年中無休のサポート、安全な支払いなど。
- 設定： サービスタイトルを入力；短い説明またはイラスト用のアイコン。
- 例： フッターの「私たちのサービス」セクション：送料無料、簡単な返品、24時間年中無休のカスタマーケア。
✅ このように、テーマ設定の各タイプは、ホームページ上の異なるコンテンツブロックを管理するのに役立ちます。
- 商品を表示したい場合 → 商品カルーセルを選択
- カテゴリを表示したい場合 → カテゴリカルーセルを選択
- 画像バナーを表示したい場合 → 画像カルーセルを選択
- テキスト/HTMLを追加したい場合 → 静的コンテンツを選択
- フッターのリンクを管理したい場合 → フッターリンクまたはサービスコンテンツを選択
3. ウェブサイトのロゴとファビコンを変更する
https://[your_website]/admin/settings/channels/edit/1 にアクセスします。
Design ブロックを見つけ、要求に応じてロゴとファビコンをアップロードします：
このように、ホームページのインターフェースをカスタマイズする方法を学びました。次のパートでは、実践的な演習に取り組みます！
コメントを残す