トップページ 基本情報 カテゴリ 商品 おすすめ商品等を登録後 運用を開始すると下図のように表示されます メタタグのソース反映について トップページ 基本情報管理での設定が反映されます 商品一覧ページ title カテゴリ名 店名 description 親カテゴリーと自身のカテゴリ名 keywor

Transcription

1 EC-CUBE MOSHIMO マニュアル 1 サイト概要 インストール後に表示されるフロントページ カテゴリは未登録のため カテゴリブロックは表示されていません

2 トップページ 基本情報 カテゴリ 商品 おすすめ商品等を登録後 運用を開始すると下図のように表示されます メタタグのソース反映について トップページ 基本情報管理での設定が反映されます 商品一覧ページ title カテゴリ名 店名 description 親カテゴリーと自身のカテゴリ名 keywords 親カテゴリーと自身のカテゴリ名 商品詳細ページ title 商品名 店名 description CSV で登録した 商品説明 60 文字 60 文字以上は... で省略 keywords CSV で登録した タグ

3 商品一覧ページ

4 商品詳細ページ データは API により読み込まれます データが空の部分は表示されません <CatchCopy> <ImageCount> その他の画像がすべて表示されます <StockStatus> や <PaymentType> 等 <Description> 商品が属するカテゴリの新着商品が最大 5 点表示されます <Spec> <SpecialDescription> 素材画像 が存在する場合は表示されます 商品に対する 感想 や 購入理由 が存在する場合は表示さ れます

5

6 管 理 画 面 デザイン 管 理 >レスポンシブ Web デザイン>レイアウト 設 定 ブロックはお 好 みで 配 置 してください グローバルナビ は php ファイル 上 で 配 置 済 みですので 配 置 する 必 要 はありません デフォルトのページは 4 ページです ページを 新 規 入 力 から 新 規 ページを 無 数 に 作 成 できます ページを 新 規 入 力 作 成 したページは 下 記 アドレスでアクセスできます ドメイン /user_data/.php メタタグを 入 力 することで ページ 独 自 のメタタグを 反 映 でき ます

7 2 基 本 情 報 管 理 (1) 基 本 情 報 管 理 > SHOP マスター 店 名 はサイト 上 に 反 映 されます 郵 便 番 号 ~ メッセージ は サイト 運 営 者 のページを EC- CUBE 内 で 表 示 する 場 合 に 反 映 されますが もしも のプロ フィールを 表 示 するのであれば 反 映 されませんので 入 力 は 不 要 です ( 下 記 参 照 ) 定 休 日 は もしも のお 問 い 合 わせ 時 間 帯 に 合 わせて 日 と 土 をチェックします メタタグは トップページのソースに 反 映 されます サイト 概 要 文 はフロントページの 上 部 に 表 示 されます もしも のページで 取 得 したショップ ID と API 認 証 コード を 入 力 します ここを 入 力 しないと 機 能 しません トークンを 入 力 すると サイト 運 営 者 をクリックした 時 もし も で 登 録 したプロフィールのページが 表 示 されます 登 録 しない 場 合 は SHOP マスターの 基 本 情 報 が 表 示 されます トークンは もしも マイページの サイト 運 営 者 をクリッ クして 表 示 されるブラウザの URL 欄 で 確 認 することができま す (2) 基 本 情 報 管 理 > 定 休 日 管 理 フロントページのカレンダーに 反 映 されます

8 3 商 品 管 理 (1) 商 品 管 理 >もしもカテゴリ 登 録 CSV はじめに カテゴリを 登 録 してください 1. もしもドロップシッピングの [ 商 品 データ CSV ダウンロー ド]ページを 開 きます 2. [ カテゴリーマスタ ] をクリックしてダウンロードします 3. ダウンロードした CSV に 特 に 修 正 を 加 える 必 要 はありませ ん 4. 参 照 をクリックし CSV を 選 択 この 内 容 で 登 録 する をクリックします アップロードが 完 了 したら ヘッダー 部 の もしもカテゴリ 商 品 データ 生 成 をクリックします 5. カテゴリーを 生 成 する をクリックするとページに 反 映 さ れます CSV を 上 書 きアップロードした 場 合 同 じカテゴリ ID のデー タは 上 書 きされ 重 複 登 録 はされません 新 規 のカテゴリ ID のデータは 追 加 されます

9 (2) 商 品 管 理 >もしもカテゴリ 管 理 検 索 条 件 を 指 定 しないで この 条 件 で 検 索 する をクリックす ると すべてのカテゴリが 表 示 されます カテゴリーコード カテゴリ 名 は 必 要 に 応 じてコピーして 使 っ てください 全 て 削 除 する をクリックすると カテゴリーデータは 削 除 さ れます カテゴリーをフォーマットし 新 たに CSV 登 録 する 場 合 に 使 用 し ます (3) 商 品 管 理 > 商 品 登 録 CSV カテゴリの 登 録 が 完 了 したら 次 は 商 品 を 登 録 します 1. もしもドロップシッピングの [ 商 品 データ CSV ダウンロー ド]ページを 開 きます 2. [ 第 二 階 層 カテゴリー ] の CSV をダウンロードします 3. ダウンロードした CSV を 下 記 の 手 順 で 修 正 します (1)[ 商 品 ID] と [ 商 品 名 ] の 間 に 1 列 挿 入 します (2) 左 からの 並 び 順 が 左 下 図 登 録 情 報 と 一 致 している か 確 認 します 一 致 していない 場 合 は 修 正 してください (3)ダウンロードした CSV によっては 項 目 とデータが ずれているものがあります それらについては 修 正 するか 削 除 してください CSV 項 目 の 修 正 後 余 計 な 列 や 行 も 削 除 してください 4. 参 照 をクリックし CSV を 選 択 この 内 容 で 登 録 する をクリックします

10 5. アップロードが 完 了 したら ヘッダー 部 の もしもカテゴリ 商 品 データ 生 成 をクリックします 6. 商 品 データを 生 成 する をクリックするとページに 反 映 さ れます CSV の 編 集 には Excel は 使 わず フリーソフト 等 0 や 桁 数 が 正 常 に 表 示 されるソフトの 利 用 をお 勧 めします CSV を 上 書 きアップロードした 場 合 同 じ 商 品 ID のデー タは 上 書 きされ 重 複 登 録 はされません 新 規 の 商 品 データは 追 加 されます 商 品 データをすべて 入 れ 替 えるような 場 合 は [ 商 品 管 理 > 商 品 データ 削 除 ] 画 面 でデータを 削 除 してから CSV をアップロードしてください (4) 商 品 管 理 > 商 品 マスター 検 索 条 件 を 指 定 しないで この 条 件 で 検 索 する をクリックす ると すべての 商 品 が 表 示 されます 非 公 開 を 選 択 して 変 更 をクリックすると その 商 品 はサ イト 上 に 表 示 されません ただし CSV で 再 登 録 を 行 うと 公 開 の 状 態 に 戻 りますので その 場 合 は 再 度 非 公 開 設 定 しなければなりません

11 4 コンテンツ 管 理 (1)コンテンツ 管 理 > 新 着 情 報 管 理 フロントページの 新 着 情 報 に 反 映 されます (2)コンテンツ 管 理 >カテゴリタイトル 画 像 管 理 指 定 したカテゴリーページ( 商 品 一 覧 ページ)に 画 像 を 表 示 す ることができます カテゴリーコード 1. 商 品 カテゴリーのページを 開 きます 2.URL の category_code= の 値 がカテゴリーコードです 下 記 例 では となります ドメイン /products/list. php?mode=search&category_code= タイトル 画 像 名 1. 管 理 画 面 のコンテンツ 管 理 >ファイル 管 理 を 開 きます 2.category_image フォルダの 表 示 をクリックします 3. タイトル 画 像 をアップロードします (レスポンシブ Web デザインに 対 応 させるに 横 幅 950px 程 度 の 画 像 にしてください) 4. アップロードした 画 像 名 を タイトル 画 像 欄 に 入 力 してく ださい ( 例 )title_ jpg 非 公 開 を 選 択 すると 表 示 されません 画 像 は FTP を 利 用 して category_image フォルダに 直 接 アッ プロードしてもかまいません

12 (3)コンテンツ 管 理 >おすすめ 商 品 管 理 おすすめ 商 品 を 登 録 すると フロントページで 表 示 されるよう になります 商 品 を 選 択 する をクリックすると 商 品 選 択 用 のポップアッ プ 画 面 が 表 示 されるので 決 定 をクリックしてください 商 品 画 像 と 商 品 名 が 表 示 されたら この 内 容 で 登 録 する をク リックします (4)コンテンツ 管 理 >ピックアップ 商 品 管 理 ピックアップ 商 品 を 登 録 すると フロントページで 表 示 される ようになります 登 録 方 法 は おすすめ 商 品 と 同 じです

13 (5)コンテンツ 管 理 >トップ 画 像 管 理 トップページ 画 像 を 新 規 入 力 ボタン または 編 集 をクリッ クすると 登 録 編 集 画 面 に 移 動 します 削 除 ボタンで 削 除 上 へ 下 へ で 表 示 の 順 番 を 変 更 で きます 登 録 編 集 画 面 非 公 開 を 選 択 すると フロントページで 表 示 されません メイン 画 像 は 高 さ :400px 幅 :950px を 越 える 画 像 を 登 録 し ても 画 像 は 400px 950px にリサイズされて 登 録 されます 400px 950px の 画 像 を 登 録 すると 画 質 が 保 たれたまま 登 録 されます (リサイズされると 画 質 が 落 ちる) サムネイル 画 像 は メイン 画 像 と 同 じ 画 像 を 登 録 すると 指 定 のサイズでリサイズされて 登 録 されます 画 質 を 保 つのであれば 高 さ :150px 幅 :63px の 画 像 を 登 録 してください サイズ 変 更 については この 後 のページ パラメータ 設 定 を ご 覧 ください リンク URL を 入 力 すると 画 像 にリンクが 設 定 されます リンク 先 は トップページから 見 た 相 対 パス あるいは http か ら 始 まる 絶 対 パスを 入 力 します リンク 先 表 示 は 上 記 リンク 先 のページの 開 き 方 の 指 定 です (6)コンテンツ 管 理 >ティッカー 管 理 右 から 左 に 流 れるティッカーの 設 定 画 面 です 非 公 開 を 選 択 すると フロントページでは 表 示 されません リンク URL を 入 力 すると テキストにリンクが 設 定 されます リンク 先 は ティッカーブロックをトップページのみに 配 置 す るのであれば トップページから 見 た 相 対 パス あるいは http から 始 まる 絶 対 パスを 入 力 します トップページ 以 外 にも 配 置 するのであれば 絶 対 パスを 入 力 し てください

14 5 デザイン 管 理 (1)デザイン 管 理 >レスポンシブ Web デザイン > 商 品 表 示 ブロックの 設 定 以 下 のブロックの 表 示 方 法 を 設 定 することが 出 来 ます おすすめ 商 品 の 表 示 方 法 ピックアップ 商 品 の 表 示 方 法 新 商 品 の 表 示 方 法 他 のお 客 様 はこんな 商 品 も 見 ていますの 表 示 方 法 最 近 チェックした 商 品 の 表 示 方 法 PC での 表 示 方 法 は 左 図 のように 3 パターンから 選 択 すること ができます スマホでの 表 示 は 下 図 の 通 りです フリック 機 能 を 非 稼 働 にすると 2 列 横 並 びで 表 示 します 稼 働 非 稼 働

15 商 品 データの 読 み 込 みについて サイト 上 で 表 示 される 商 品 データの 読 み 込 みは 次 の2つの 方 法 によります (1)データベースからの 読 み 込 み (2) もしも API による 読 み 込 み 商 品 画 像 や 商 品 名 をクリックした 時 商 品 詳 細 ページが 開 く 場 合 はデータベースからの 読 み 込 みです もしも の 販 売 ページが 開 く 場 合 は もしも API による 読 み 込 みです ブロック 売 上 ランキング と 新 着 商 品 は もしも の 最 新 データを 表 示 しています これらのデータは データベースに 登 録 できないため API により 読 み 込 んでいます おすすめ 商 品 ピックアップ 商 品 最 近 チェックした 商 品 他 のお 客 様 はこんな 商 品 も 見 ています は データベースから 読 み 込 んでいます 商 品 一 覧 ページ データベースから 読 み 込 んでいます 商 品 詳 細 ページ API で 読 み 込 んでいます 価 格 表 示 についての 注 意 ( もしも のマイページで 価 格 設 定 を 行 っている 場 合 ) データベースからの 読 み 込 みの 場 合 価 格 は 税 込 の 推 奨 価 格 が 表 示 されます もしも のマイページで 価 格 設 定 を 行 っている 場 合 データベースから 読 み 込 んでいるブロックや 商 品 一 覧 ページの 販 売 価 格 と 実 際 の 販 売 価 格 ( 商 品 詳 細 ページやカートの 中 )が 異 なりますのでご 注 意 ください 商 品 一 覧 ページには 断 り 書 きとしてページの 上 部 に 価 格 については 詳 細 ページまたはカートの 中 で 再 度 ご 確 認 ください とい うメッセージを 表 示 しています ブロックには 表 示 していませんので 必 要 であればブロックのテンプレートファイルに 追 加 してください API の 読 み 込 み URL は 以 下 のようになっています 商 品 詳 細 ページ( 検 索 ) 認 証 コード &article_id= 商 品 ID 商 品 詳 細 ページの 素 材 認 証 コード &article_id= 商 品 ID 商 品 の 感 想 認 証 コード &article_id= 商 品 ID&shop_id= ショップ ID&sort_order=newly 購 入 理 由 認 証 コード &article_id= 商 品 ID&shop_id= ショップ ID&sort_order=newly ランキング 認 証 コード &article_category_code= カテゴリ ID&sort_order=sales 新 着 商 品 認 証 コード &article_category_code= カテゴリ ID&is_newly=1

16 CSS によるデザイン変更 1 CSS ファイルの位置 html/user_data/packages/default/css/ ページのタイトル common.css /* タイトル */ h2.title { margin-bottom: 10px; padding: 5px 10px; font-size: 120%; background:#999; color:#fff; ブロックのタイトル bloc.css /* タイトル */.block_outer h2 { font-size:110%; margin-bottom:10px;.main.block_outer h2 { padding-left:1px; border-left:#ccc 10px solid;.main.block_outer h2.title { background-color:#eee; color:#333; padding:2px 0 2px 5px; #side.block_outer h2 { padding-left:1px; border-left:#777 10px solid; #side.block_outer h2.title { background-color:#999; color:#fff; padding:2px 0 2px 5px; 背景の 送料無料 バナー 画像の幅は 120px common.css /* 画面左の縦バナー */ #container_left { display:block; position: absolute; top:0; left:-120px; width:120px; height:100%; background:url(../img/picture/container_left.jpg) repeat-y; /* 画面右の縦バナー */ #container_right { display:block; position: absolute; top:0; right:-120px; width:120px; height:100%; background:url(../img/picture/container_right.jpg) repeat-y;

17 レスポンシブナビ responsive_nav.css /* タイトル */ /* ナビメニューバーの 背 景 色 と 高 さ */.mean-container.mean-bar { background: #0c1923; height:30px; /* 印 */.mean-container a.meanmenu-reveal { color: #fff; /* 3 本 線 */.mean-container a.meanmenu-reveal span { background: #fff; /* メニュー 項 目 の 文 字 色 */.mean-container.mean-nav ul li a { color: #333; /* メニュー 項 目 のオンマウス 時 の 文 字 色 */.mean-container.mean-nav ul li a:hover { color: #fff; /* メニュー 項 目 の 背 景 色 */.mean-container.mean-nav { background-color: #eee; /* メニュー 項 目 のオンマウス 時 の 背 景 色 */.mean-container.mean-nav ul li:hover { background-color:#ccc; グローバルメニュー globalnav.css その 他 細 かい 設 定 は テンプレートファイルと 照 らし 合 わせながら 必 要 があれば 修 正 してください テンプレートファイル:data/Smarty/templates/default/ common.css サイト 全 体 のフレーム 構 成 リンク 色 ページタイトル ヘッダー フッター ボタン 等 content.css 商 品 一 覧 ページ 商 品 詳 細 ページ 当 サイトについて 等 bloc.css ヘッダーユーティリティー もしも 商 品 カテゴリー 検 索 ソーシャルブックマーク トップページ 画 像 スライド ランキング 新 着 情 報 ティッカー 等

18 CSS によるデザイン 変 更 (2) 商 品 画 像 に 枠 線 を 設 定 するには 既 に 設 定 済 みの img_line.css を 利 用 することができます たとえば 商 品 詳 細 ページのメイン 画 像 に 枠 線 をつける 場 合 は 下 記 のように CSS のコメントアウトを 外 します /* メイン 画 像 */ /* #detailphotobloc.photo img { max-width:96%; padding:1px; border:#ccc 1px solid; background: #FFF; */ /* メイン 画 像 */ #detailphotobloc.photo img { max-width:96%; padding:1px; border:#ccc 1px solid; background: #FFF; 売 上 ランキングの 場 合 /* ランキング */ /* #ranking_area li.image img { max-width:96%; border:#ccc 1px solid; padding:1%; background-color:#fff; */ /* ランキング */ #ranking_area li.image img { max-width:96%; border:#ccc 1px solid; padding:1%; background-color:#fff;

19 CSS によるデザイン変更 3 サイト全体の雰囲気を簡単に変更できます 50 点のパターンが用意されています その中からお好みのものをご利用下さい それぞれのフォルダにある style.css が common.css 等のコードを上書き処理する形でスタイルを変更しています 変更方法 data/smarty/templates/default/site_frame.tpl 102 行目付近 000 の値を変更して下さい <!-- デザイン変更 --> <link rel="stylesheet" href="<!--{$tpl_urlpath-->design/000/style.css" type="text/css" media="all" /> デザインは 50 パターンありますので 値は 000 から 050 まで変更可能です 画像と CSS ファイルは下記フォルダにあります html/user_data/packages/default/design デザインパターンのサンプル

20 トップページの 大 画 像 スライドの 表 示 パターンを 変 更 する スライドの 動 きやレイアウトは jquery で 実 現 しています jquery のスクリプトを 入 れ 替 えることで 表 示 パターンを 変 更 するこ とができます 下 記 ファイルの 2 カ 所 ( 赤 字 )のみを 修 正 することで 簡 単 に 変 更 できます data/smarty/templates/default/frontparts/bloc/top_image.tpl <script type="text/javascript" src="<!--{$smarty.const.root_urlpath-->js/jquery.amazingslider/bloc_top_image.js"></script> <div class="block_outer block_top_image" style="margin-bottom:120px;"> margin-bottom の 値 は 状 況 に 合 わせて 調 整 してください jquery スクリプトの 置 き 場 所 html/js/jquery.amazingslider/ top_image.tpl ファイルの 修 正 箇 所 data/smarty/templates/default/frontparts/bloc/top_image.tpl こちらのページで 動 作 確 認 できます

21 パラメーターの 設 定 で 動 作 を 変 更 する システム 設 定 >パラメーター 設 定 商 品 詳 細 ページでエラーが 発 生 USE_STATIC_URL ご 利 用 のサーバーで.htaccess が 使 用 できない 可 能 性 があり ます その 時 は 下 記 の 方 法 で 静 的 URL の 設 定 を 解 除 してくだ さい (1) USE_STATIC_URL の 値 を false に 変 更 します (2) 上 記 の 操 作 で 改 善 されない 場 合 は 下 記 の.htaccess を 削 除 してください html/products/.htaccess ソーシャルボタンをより 有 効 に FACEBOOK_APPID と ACCOUNT_KEY_TWITTER フェイスブックの OGP を 設 定 し app_id を 入 力 ツイッターの アカウントを 入 力 有 効 的 な 利 用 が 可 能 になります app_id を 入 力 したときのページのソース ソーシャルボタンのカウントが 増 えたら SOCIAL_GOOGLE_RIGHT SOCIAL_TWITTER_RIGHT ソーシャルボタンのカウント 数 によりレイアウトを 調 整 したい ときには 値 を 変 更 してください 価 格 帯 検 索 ボックスの 非 表 示 SEARCH_PRICE false に 設 定 すると 価 格 検 索 ボックスは 非 表 示 になります [ 検 索 ] 価 格 帯 の 価 格 変 更 SEARCH_PRICE_BELT false に 設 定 すると 価 格 帯 検 索 表 示 は 非 表 示 になります 価 格 帯 は マスターデータ 管 理 で 変 更 できます システム 設 定 >マスターデータ 管 理 mtb_search_price_max mtb_search_price_min 設 定 方 法 についてはこちら

22 商 品 カテゴリの 展 開 方 法 CATEGORY_OPEN_PATTERN 商 品 カテゴリーブロックの 表 示 方 法 を 変 更 することができま す (1: アコーディオン 2: すべて 展 開 ) 商 品 ブロックの 表 示 件 数 数 値 を 変 更 することで 表 示 件 数 の 増 減 が 可 能 です RECOMMEND_NUM:おすすめ 商 品 表 示 数 PICKUP_NUM:ピックアップ 商 品 表 示 数 MOSHIMO_NEW_NUM : 新 着 商 品 の 表 示 件 数 MOSHIMO_RANKING_NUM : 売 上 ランキングの 表 示 件 数 RANDOM_ITEM_NUM : 他 のお 客 様 はこんな 商 品 も 見 て います の 表 示 件 数 他 のお 客 様 はこんな 商 品 も 見 ています では 登 録 されている 全 ての 商 品 の 中 から ランダムに 表 示 しています アクセスする 度 に 表 示 される 商 品 が 変 わります 売 上 ランキングと 新 着 商 品 の 対 象 カテゴリーを 変 更 MOSHIMO_NEW MOSHIMO_RANKING 商 品 一 覧 ページと 商 品 詳 細 ページでは カテゴリーの 対 象 は 表 示 されているカテゴリー( 一 覧 ページ)またはその 商 品 に 関 連 するカテゴリー( 詳 細 ページ)になっています これを 変 更 することはできません トップページにブロックを 配 置 した 場 合 は 対 象 となるカテゴ リーを 設 定 する 必 要 があります カテゴリーコードの 上 から 4 桁 を "" でくくります 例 ) "0101" トップページ 大 画 像 スライドのサイズ 変 更 TOP_MAIN_WIDTH TOP_MAIN_HEIGHT TOP_THUMBNAIL_WIDTH TOP_THUMBNAIL_HEIGHT html/js/jquery.amazingslider/bloc_top_image.js jquery("#amazingslider_topimg").amazingslider({ jsfolder:jsfolder, width:950, height:400, 各 パラメータで 登 録 サイズを 変 更 することができます レスポンシブ Web デザインに 対 応 するためには メイン 画 像 の 横 幅 は 950px 程 度 が 必 要 です 高 さの 設 定 は 自 由 です サイズの 変 更 は 登 録 済 みの 画 像 には 適 用 されません 変 更 後 に 登 録 する 画 像 に 適 用 されますので サイズ 変 更 後 は 再 登 録 す る 必 要 があります メイン 画 像 については [bloc_top_image.js] または 使 用 する [bloc_top_image_0**.js] を 変 更 して 下 さい

23 ダウンロードパッケージ ダウンロードしたファイルを 解 凍 すると 左 図 のように 展 開 さ れます テスト 用 CSV には 商 品 ( 食 品 関 係 )CSV とカテゴリー CSV が 入 っています 必 要 であれば 動 作 確 認 等 にお 使 いください インストール 方 法 は EC-CUBE パッケージと 同 様 です data フォルダと html フォルダをサーバーにアップロードして 行 います インストール 参 考 ページ