ECAGENT

パララックスでレスポンシブ対応！
オシャレなデザインのBASE用テンプレート
「ECAGENT」

デモショップをご用意しております

ECAGENT デモショップ

ECAGENTのご購入はこちら

最新情報

「ECAGENT」はオシャレで簡単にパララックスECサイトを構築できます。

サイトのベースカラー、メインカラー、ボタンカラーを設定することにより、自分好みの色やサイトのコンセプトカラーを自在にカスタマイズできます。カラーのみならず、ヘッダーの上部固定、重要なお知らせ表示、フォント設定の設定、スライダー画像の設定、ブログや特集などの非表示カスタマイズされたaboutページなどなど豊富な機能をご用意しております。メンズ専門やレディース専門などなど多彩なサイト運用ができます。

目次

ECAGENTの特徴

豊富な機能でカスタマイズいろいろ

サイトのベースカラー、メインカラー、ボタンカラーを設定することにより自分好みの色やサイトのコンセプトカラーを自在にカスタマイズできます。 カラーのみならず、ヘッダーの上部固定、重要なお知らせ表示、フォント設定の設定、スライダー画像の設定、ブログや特集などの非表示カスタマイズされたaboutページなどなど豊富な機能をご用意しております。メンズ専門やレディース専門などなど多彩なサイト運用ができます。

重要なお知らせ・スライダー表示・PICKUP商品表示

ニュース・ブログ・最新特集でコンテンツマーケティングも可能です。最新特集を注目商品としても使用可能です

この他にも多彩な機能を取り揃えております。

レスポンシブデザイン対応

PC・タブレット・スマートフォンごとに表示が最適化されたレスポンシブ対応。エンドユーザーがどこでも場所を選ばず購入しやすい様に最適化されたデザインとなっております。

デザインを確認する

デザインを確認する

デザインを確認する

1.基本設定

カラーやロゴサイズなどの基本的な設定をします。

  • 1-1.ロゴ
    オリジナルのロゴやロゴ画像を選択したりできます。

  • 1-2.背景
    背景画像や背景のカラーを選択できます。

  • 1-3.＜基本設定＞ロゴ サイズ調整
    ヘッダー、フッター、ロゴのサイズを変更できます。

  • 1-4.＜基本設定＞コンテンツ テキストカラー
    コンテンツのテキストカラーを設定します。

  • 1-5.＜基本設定＞コンテンツ リンクテキストカラー
    リンクテキストにマウスを乗せた時のカラーを設定します。

  • 1-6.＜基本設定＞ヘッダー（ロゴーエリア）・フッター（CATEGORYエリア）・ドロワーメニュー 上部の背景カラー
    ベースカラーを設定します。※詳しくは下記の「図１基本設定」をご確認ください。

  • 1-7.＜基本設定＞ヘッダー（ロゴーエリア）・フッター（CATEGORYエリア）・ドロワーメニュー 上部のテキストカラー
    ベースカラーで設定した箇所のテキストカラーを設定します。※詳しくは下記の「図1 基本設定」をご確認ください。

  • 1-8.＜基本設定＞「CONCEPT」「NEW ARRIVL」「フッター最下層」「ドロワーメニューキャプション」背景カラー
    メインカラーを設定します。※詳しくは下記の「図１基本設定」をご確認ください。

  • 1-9.＜基本設定＞「CONCEPT」「NEW ARRIVL」「フッター最下層」「ドロワーメニューキャプション」 テキストカラー
    メインカラーで設定した箇所のテキストカラーを設定します。※詳しくは下記の「図1 基本設定」をご確認ください。

  • 1-10.＜基本設定＞スライダーボタン 枠線カラー
    「PICKUP」「FEATURE」のサイドボタンの枠線カラーを設定します。※詳しくは下記の「図1 基本設定」をご確認ください。

  • 1-11.＜基本設定＞スライダーボタン 矢印カラー
    「PICKUP」「FEATURE」のサイドボタンの矢印カラーを設定します。※詳しくは下記の「図1 基本設定」をご確認ください。

図1 基本設定

  • 1-6.＜基本設定＞ヘッダー（ロゴーエリア）・フッター（CATEGORYエリア）・ドロワーメニュー 上部の背景カラー
  • 1-7.＜基本設定＞ヘッダー（ロゴーエリア）・フッター（CATEGORYエリア）・ドロワーメニュー 上部のテキストカラー

  • 1-8.＜基本設定＞「CONCEPT」「NEW ARRIVL」「フッター最下層」「ドロワーメニューキャプション」背景カラー
  • 1-9.＜基本設定＞「CONCEPT」「NEW ARRIVL」「フッター最下層」「ドロワーメニューキャプション」 テキストカラー

  • 1-10.＜基本設定＞スライダーボタン 枠線カラー
  • 1-11.＜基本設定＞スライダーボタン 矢印カラー

2.ヘッダー設定

ヘッダーの固定ON・OFFや重要なお知らせのカラー設定をします。

  • 2-1.＜ヘッダー設定＞ヘッダーの固定 ON-OFF
    ヘッダーの固定のON/OFFの設定をします。

  • 2-2.＜ヘッダー設定＞重要なお知らせ テキスト
    重要なお知らせのテキストを入力します。※詳しくは下記の「図２ヘッダー設定」をご確認ください。

  • 2-3.＜ヘッダー設定＞重要なお知らせ テキストカラー
    重要なお知らせのテキストカラーを設定します。※詳しくは下記の「図2 ヘッダー設定」をご確認ください。

  • 2-4.＜ヘッダー設定＞重要なお知らせ 背景色
    重要なお知らせの背景色を設定します。※詳しくは下記の「図2 ヘッダー設定」をご確認ください。

図2 ヘッダー設定

  • 2-2.＜ヘッダー設定＞重要なお知らせ テキスト
  • 2-3.＜ヘッダー設定＞重要なお知らせ テキストカラー
  • 2-4.＜ヘッダー設定＞重要なお知らせ 背景色

3.フォント設定

メインのフォントタイプを設定します。※ゴシック体 or 明朝体からお選び頂けます。

  • 3-1.＜フォント設定＞メインのフォントタイプ
    メインのフォントタイプを設定します。※ゴシック体 or 明朝体の2種から選びます。

  • 3-2.＜フォント設定＞見出しフォントタイプ ※英字のみ
    見出しのフォントタイプを設定します。※8種類からお選び頂けます。詳しくは「図3 フォント設定」をご確認ください。

図3 フォント設定

  • 3-2.＜フォント設定＞見出しフォントタイプ ※英字のみ

5.ドロワー設定

ドロワーメニューのマウスオーバーの背景色とテキストカラー設定します。

  • 5-1.＜ドロワー設定＞メニュー マウスオーバーカラー
    ドロワーメニューのマウスオーバー時の背景色を設定します。詳しくは「図5 ドロワー設定」をご確認ください。

  • 5-2.＜ドロワー設定＞メニュー マウスオーバー テキストカラー
    ドロワーメニューのマウスオーバー時のテキストカラーを設定します。詳しくは「図5 ドロワー設定」をご確認ください。

図5 ドロワー設定

  • 5-1.＜ドロワー設定＞メニュー マウスオーバーカラー
  • 5-2.＜ドロワー設定＞メニュー マウスオーバー テキストカラー

6.トップページ設定

メイン画像や各種セクションの表示・非表示、画像やテキストの設定します。

  • 6-1.＜トップページ設定＞メイン画像 表示 ON-OFF
    メイン画像の表示・非表示を選択します。

  • 6-2.＜トップページ設定＞スライダー ON or スライダー OFFの選択 ※画像１つのみで幅いっぱいにしたい場合はスライダー画像１に画像を設定します。
    スライダー or 固定幅のどちらかを選択をします。

  • 6-3.＜トップページ設定＞ スライダー OFF時の画像を選択（画像推奨サイズ 幅1140px 高さ675px）
    固定幅用の画像を設定します。詳しくは「図6 トップページ設定 「固定幅用画像」」をご確認ください。

  • 6-4.＜トップページ設定＞ スライダー OFF時の画像のリンクURL 例：example@example.com
    固定幅用の画像のリンクURLの設定をします。詳しくは「図6 トップページ設定 「固定幅用画像」」をご確認ください。

図6 トップページ設定 「固定幅用画像」

  • 6-3.＜トップページ設定＞ スライダー OFF時の画像を選択（画像推奨サイズ 幅1140px 高さ675px）
  • 6-4.＜トップページ設定＞ スライダー OFF時の画像のリンクURL 例：example@example.com

  • 6-5.＜トップページ設定＞ スライダー画像1〜4（画像推奨サイズ 幅1920px 高さ1000px）
    スライダー画像１〜5の画像を設定します。詳しくは「図7 トップページ設定「スライダー画像」」をご確認ください。

  • 6-6.＜トップページ設定＞ スライダー画像1〜4 リンクURL 例：example@example.com
    スライダー画像１〜5のリンクURLの設定をします。詳しくは「図7 トップページ設定「スライダー画像」」をご確認ください。

図7 トップページ設定「スライダー画像」

  • 6-5.＜トップページ設定＞ スライダー画像1〜4（画像推奨サイズ 幅1920px 高さ1000px）
  • 6-6.＜トップページ設定＞ スライダー画像1〜4 リンクURL 例：example@example.com

  • 6-7.＜トップページ設定＞PICKUP 表示 ON-OFF
    PICKUPの表示・非表示を選択します。

  • 6-8.＜トップページ設定＞PICKUP１〜8 画像
    PICKUP１〜8の画像を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-9.＜トップページ設定＞PICKUP１〜8 商品名
    PICKUP１〜8の商品名を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-10.＜トップページ設定＞PICKUP１〜8 商品説明
    PICKUP１〜8の商品説明を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-11.＜トップページ設定＞PICKUP１〜8 割引率　例：20%OFF
    PICKUP１〜8の割引率を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-12.＜トップページ設定＞PICKUP１〜8 価格 ※数字のみ入力　例：4,000
    PICKUP１〜8の価格を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-13.＜トップページ設定＞PICKUP１〜8 リンクURL ※対象商品詳細のURLを設定してください。
    PICKUP１〜8の価格を設定します。詳しくは「図8 トップページ設定「PICKUP」」をご確認ください。

  • 6-14.＜トップページ設定＞CONCEPT 表示 ON-OFF
    CONCEPTの表示・非表示を選択します。

  • 6-15.＜トップページ設定＞CONCEPT PC表示時の高さ調整
    PC表示時の高さの調整をします。詳しくは「図9 トップページ設定「CONCEPT」」をご確認ください。

  • 6-16.＜トップページ設定＞CONCEPT スマートフォン表示時の高さ調整
    スマートフォン表示時の高さの調整をします。詳しくは「図9 トップページ設定「CONCEPT」」をご確認ください。

  • 6-17.＜トップページ設定＞CONCEPT 画像の設定
    CONCEPTの画像の設定をします。詳しくは「図9 トップページ設定「CONCEPT」」をご確認ください。

  • 6-18.＜トップページ設定＞CONCEPT テキストの設定
    CONCEPTのテキストの設定をします。詳しくは「図9 トップページ設定「CONCEPT」」をご確認ください。

  • 6-19.＜トップページ設定＞CONCEPT ボタンのテキスト設定
    CONCEPTのボタンのテキスト入力をします。詳しくは「図9 トップページ設定「CONCEPT」」をご確認ください。

図9 トップページ設定 「CONCEPT」

  • 6-15.＜トップページ設定＞CONCEPT PC表示時の高さ調整
  • 6-16.＜トップページ設定＞CONCEPT スマートフォン表示時の高さ調整

  • 6-17.＜トップページ設定＞CONCEPT 画像の設定
  • 6-18.＜トップページ設定＞CONCEPT テキストの設定
  • 6-19.＜トップページ設定＞CONCEPT ボタンのテキスト設定

  • 6-20.＜トップページ設定＞NEWS 表示 ON-OFF
    CONCEPTの表示・非表示を選択します。

  • 6-21.＜トップページ設定＞NEWS 投稿日1〜3の設定　例：2017/7/27
    NEWSの投稿日を入力します。詳しくは「図10 トップページ設定「NEWS」」をご確認ください。

  • 6-22.＜トップページ設定＞NEWS 投稿記事1〜3の設定
    NEWSの記事を入力します。詳しくは「図10 トップページ設定「NEWS」」をご確認ください。

図10 トップページ設定「NEWS」

  • 6-21.＜トップページ設定＞NEWS 投稿日1〜4の設定　例：2017/7/27
  • 6-22.＜トップページ設定＞NEWS 記事1〜4の設定

  • 6-23.＜トップページ設定＞BLOG 表示 ON-OFF
    BLOGの表示・非表示を選択します。詳しくは「図11 トップページ設定「BLOG」」をご確認ください。

図11 トップページ設定「BLOG」

  • 6-23.＜トップページ設定＞BLOG 表示 ON-OFF

BLOGの設定方法

  • 6-24.＜トップページ設定＞FEATURE 表示 ON-OFF
    FEATUREの表示・非表示を選択します。

  • 6-25.＜トップページ設定＞FEATURE１〜8 画像の設定
    FEATUREの画像を設定します。詳しくは「図12 トップページ設定「FEATURE」」をご確認ください。

  • 6-26.＜トップページ設定＞FEATURE１〜8 テキストの設定
    FEATUREのテキストを設定します。詳しくは「図12 トップページ設定「FEATURE」」をご確認ください。

  • 6-27.＜トップページ設定＞FEATURE1〜8 リンクURLの設定
    FEATUREのリンクURLの設定をします。詳しくは「図12 トップページ設定「FEATURE」」をご確認ください。

図12 トップページ設定「FEATURE」

  • 6-25.＜トップページ設定＞FEATURE１〜8 画像の設定
  • 6-26.＜トップページ設定＞FEATURE１〜8 テキストの設定

  • 6-27.＜トップページ設定＞FEATURE1〜8 リンクURLの設定

FEATUREのリンクURLの設定方法

7.ABOUTページ設定

ABOUTページのメイン画像や動画、ショップ情報を設定します。

  • 7-1.＜ABOUTページ設定＞ スライダー画像1の設定
    スライダー画像１の設定をします。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-2.＜ABOUTページ設定＞ スライダー画像2の設定
    スライダー画像2の設定をします。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-3.＜ABOUTページ設定＞ youtube動画の設定
    youtubeの動画を設定します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-4.＜ABOUTページ設定＞ショップ情報 ショップ名
    会社概要のショップ名を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-5.＜ABOUTページ設定＞ショップ情報 住所
    会社概要の住所を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-6.＜ABOUTページ設定＞ショップ情報 TEL
    会社概要のTEL（電話番号）を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-7.＜ABOUTページ設定＞ショップ情報 FAX
    会社概要のFAX（ファックス番号）を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-8.＜ABOUTページ設定＞ショップ情報 営業時間
    会社概要の営業時間を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

  • 7-9.＜ABOUTページ設定＞ショップ情報 定休日
    の会社概要の定休日を入力します。空欄の場合表示されません。詳しくは「図13 ABOUTページ設定」をご確認ください。

図13 ABOUTページ設定

  • 7-1〜7.2.＜ABOUTページ設定＞ スライダー画像1〜2の設定
  • 7-3.＜ABOUTページ設定＞ youtube動画の設定
  • 7-4.＜ABOUTページ設定＞ ショップ情報

ショップ説明URL

https://help.thebase.in/hc/ja/articles/206418121-ショップの説明はマイショップのどこに表示されますか-

8.商品一覧設定

商品一覧のボタンカラーを設定します。

  • 8-1.＜商品一覧設定＞ボタンカラーの設定
    商品一覧の「More」ボタンのカラーを設定します。詳しくは「図14 商品一覧設定」をご確認ください。

  • 8-2.＜商品一覧設定＞ボタン マウスオーバー時のテキストカラーの設定
    商品一覧の「More」ボタンのマウスオーバー時のテキストカラーを設定します。詳しくは「図14 商品一覧設定」をご確認ください。

  • 8-3.＜商品一覧設定＞商品説明 ON-OFF
    商品説明の表示・非表示を設定します。詳しくは「図15 商品説明の表示・非表示」をご確認ください。

図14 商品一覧設定

  • 8-1.＜商品一覧設定＞ボタンカラーの設定
  • 8-2.＜商品一覧設定＞ボタン マウスオーバー時のテキストカラーの設定

図15 商品説明の表示・非表示

  • 8-3.＜商品一覧設定＞商品説明 ON-OFF

9.コンタクトページ設定

コンタクトページのボタンカラーを設定します。

  • 9-1.＜コンタクトページ＞ボタンカラーの設定
    コンタクトページの「確認する」ボタンのカラーを設定します。詳しくは「図15 コンタクトページ設定」をご確認ください。

図15 コンタクトページ設定

  • 9-1.＜コンタクトページ＞ボタンカラーの設定

10.商品詳細ページ設定

商品詳細ページのボタンカラーやフリースペースの設定をします。

  • 10-1.＜商品詳細ページ設定＞ボタンカラーの設定
    商品詳細ページの「カートに入れる」ボタンのカラーを設定します。詳しくは「図16 商品詳細ページ設定」をご確認ください。

  • 10-2.＜商品詳細ページ設定＞フリースペースの設定
    商品詳細ページの「カートに入れる」ボタンのカラーを設定します。詳しくは「図16 商品詳細ページ設定」をご確認ください。

図16 商品詳細ページ設定

  • 10-1.＜商品詳細ページ設定＞ボタンカラーの設定
  • 10-2.＜商品詳細ページ設定＞フリースペースの設定

11.その他の機能

「デフォルトのモバイルテーマを使用」の説明です。

  • 11-1. デフォルトのモバイルテーマを使用
    スマートフォンにてECAGENTのショップデザインを表示したい場合は「デフォルトのモバイルテーマを使用」をOFFにしてください。ONの場合はBASEデフォルトのテーマが表示されますのでご注意ください。初期状態ではONになっております。詳しくは「図17 デフォルトのモバイルテーマを使用」をご確認ください。

図17 デフォルトのモバイルテーマを使用

「デフォルトのモバイルテーマの使用」はデザイン編集の最下部にあります。初期状態ではONになっておりますので、ショップデザインを表示したい場合は「デフォルトのモバイルテーマを使用」をOFF（グレー）にしてください。

12.BASE Apps

BASE Appsを使用することによってショップをカスタマイズすることが可能です。
BASE Apps → https://apps.thebase.in/

  • 12-1. カテゴリ管理（カテゴリ管理Appsが必要です）
    カテゴリーはBASEのApps機能として提供されています。
    商品毎にカテゴリを設定できます。カテゴリは[大カテゴリ]・[中カテゴリ]・[小カテゴリ]の3階層で設定することができます。ドロワーメニューは中カテゴリーまで表示されます。フッターは大カテゴリーのみ表示されます。下記のURLでダウンロードと説明を確認できます。詳しくは「図18 デフォルトのモバイルテーマを使用」をご確認ください。
    カテゴリ管理Apps → https://apps.thebase.in/detail/16

図18 カテゴリ管理設定

カテゴリ管理Appsのダウンロードが必要です。

  • 12-2. 商品検索（商品検索Apps）
    商品検索はBASEのApps機能として提供されています。ショップでお買い物をするユーザーが、好きなキーワードで検索することでお目当ての商品を探しやすくなります。多数の商品を取り扱っているショップにおすすめの機能です。ヘッダーに設置してあります。下記URLで商品検索Appsのダウンロードと説明を確認できます。「図19 商品検索設定」をご確認ください。
    商品検索Apps → https://apps.thebase.in/detail/60

図19 商品検索設定

カテゴリ管理Appsのダウンロードが必要です。

  • 12-3. 英語・外貨対応（英語・外貨対応Apps）
    英語・外貨対応はBASEのApps機能として提供されています。ECAGENTではECAGENT独自でカスタマイズ部分は変更できません。下記のURLで英語・外貨対応Appsの説明を確認できます。
    英語・外貨対応Apps → https://apps.thebase.in/support/33

  • 12-4. 各種BASEApps
    カテゴリ管理 / デジタルコンテンツ販売 / レビュー / 英語・外貨対応 / セール / ラベル / Blog / 商品検索 / ショップロゴ作成などなど各種Appsに対応しております。

13.よくあるご質問

よくあるご質問一覧です。

14.お問い合わせ

お問い合わせは下記のメールフォームにてお問い合わせください。お問い合わせの前に「マニュアル」「よくある質問」をご確認ください。１週間返事がない場合は、お手数ではありますが再度メールをお送りください。お電話での対応はしておりません。申し訳ございませんが、何卒ご了承くださいますようお願いいたします。※メールアドレスの間違い、もしくは携帯メールの場合、PCからのメール拒否設定をしている等の理由により、回答メールが届かない場合がございますので、送信前にメールアドレスや設定をご確認ください。

お問い合わせ

ECAGENTのご購入

ECAGENTのご購入は下記のBASEデザインマーケットで購入いただけます。