テーマ管理

テーマ管理 カスタマイズ トップ画面

カスタマイズ:トップ画面でできること

トップ画面のカスタマイズができます。

__________2021-07-21_23.03.36.png

カスタマイズ機能は対応したテーマテンプレート(ec_force_basic_theme)のみで利用可能です。

テーマ管理にテーマ(ec_force_basic_theme)を追加する方法は、テーマ管理 テーマを追加を参照ください。

2021/07以前に提供したすべてのテーマは本機能に対応していません。

セクション

トップ画面の各セクションでは、以下項目をカスタマイズできます。

ヘッダー

Caution!!

ヘッダーの設定は全画面共通の設定です。
※パスワード保護画面を除く

ロゴ画像

ロゴアライメント ヘッダーセクションのロゴの配置を設定します。
  • 中央揃え
ロゴ画像 画像をアップロードして設定します。
ロゴの幅 ロゴの幅を設定します。

__________2021-07-27_21.37.57.png

告知バー

告知を表示する 告知バーの表示有無を設定します。
トップのみ表示 「告知を表示する」チェックを入れた際に、告知バーをトップのみに表示するかの有無を設定します。
テキスト 告知バーに表示するテキストを設定します。
バー 告知バーの背景色を設定します。
テキスト 告知バーのテキストの色を設定します。


__________2021-07-27_21.37.57_____.png

バナー

バナーを表示する バナーの表示有無を設定します。
トップのみ表示 「バナーを表示する」チェックを入れた際に、バナーをトップのみに表示するかの有無を設定します。
PC画像 バナーとして表示する画像を設定します。
PCのみに適用されます。
SP画像 バナーとして表示する画像を設定します。
SPのみに適用されます。
バナーのリンク先 バナーを押下した際の遷移先を設定します。

ecfdev-12652_faq_1.png

スライドショー スライドショーの設定を行います。
スライドショーの画像は最大6枚まで設定可能です(下図は2枚設定しています)。

スライドの自動切換え チェックを入れるとスライドショーが自動で切り替わります。
切り替え間隔 スライドの自動切り替え間隔の設定を行います。
切り替え間隔は、3秒〜9秒で設定可能です。

スクリーンショット 2021-11-26 3.03.28.jpg

画像 スライドショーに表示する画像を設定します。
見出し 見出しのテキストを設定します。
小見出し 小見出しのテキストを設定します。
ボタンラベル スライドショーに設定するボタンのラベルを設定します。
ボタンリンク ボタン選択したときのリンク先を設定します。

__________2021-07-27_21.41.53.png

商品

商品

見出し 商品セクションの見出しを設定します。
小見出し 商品セクションの見出しを設定します。

表示形式

並べて表示 商品を並べて表示します。
カルーセル表示 商品をカルーセル表示で表示します。

表示対象

表示するカテゴリー 選択した商品カテゴリーに属する商品にのみ表示します。複数の商品カテゴリーを選択できます。
何も選択されていない状態では、ステータスが表示になっている全ての商品が表示されます。
新着のみ 「新着フラグ:有効」の商品にのみ表示します。
SALE中のみ 「セールフラグ:有効」の商品にのみ表示します。

表示件数

行あたりの商品表示件数 表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。
※SPでは1スライド当たりの表示件数は2件までです。
表示行数 表示行数の設定を行います。
表示件数は、1件〜5件で設定可能です。
もっと見るボタン チェックボックスを外すと、もっと見るリンクボタンが表示されなくなります。

ecfdev-12661_faq_1.png

商品カテゴリー
カテゴリーのスタイル 商品カテゴリーのデザインが設定可能です。
「余白なし」「均等揃え」から選択できます。
表示件数 表示件数の設定を行います。
表示件数は、1件〜12件で設定可能です。
表示するカテゴリー 選択された商品カテゴリーを表示します。
選択されている商品カテゴリー数が表示件数に満たない場合、選択されている商品カテゴリーの数が優先されます。
何も選択されていない場合、全ての商品カテゴリーから表示件数分の商品カテゴリーが表示されます
商品カテゴリーは「設定 > 商品 > 商品カテゴリー管理」で設定可能です。

ecfdev-12662_faq_1 (1).png

ニュース
見出し ニュースセクションの見出しを設定します。
小見出し ニュースセクションの小見出しを設定します。
表示するカテゴリー 表示するニュースカテゴリーを設定します(複数選択不可)。選択したカテゴリーに属するニュースのみを一覧で表示できます。
ニュースカテゴリーは「ショップ管理 > ニュースカテゴリー管理」で設定可能です。
デザイン ニュースのデザインを設定します。
  • リスト表示
  • グリッド表示
  • メディア風表示(初期値)
表示件数 表示件数の設定を行います。
表示件数は、1件〜5件で設定可能です。
もっと見るボタン 「もっと見る」ボタンの表示、非表示を設定します。

__________2021-07-27_16.13.14.png

コンセプト
テキストの表示位置 コンセプトセクションのデザインの設定をします。
画像 コンセプトセクションの背景画像を設定します。
見出し コンセプトセクションの見出しを設定します。
本文 コンセプトセクションの本文を設定します。
背景 テキストの背景色を設定します。

ecfdev-12660_faq_1.png

サインアップ
画像 サインアップの背景に指定する画像を設定します。
見出し サインアップセクションの見出しを設定します。
小見出し サインアップセクションの小見出しを設定します。
本文 サインアップセクションの本文を設定します。
__________2021-07-27_16.53.13.png
フッター

Caution!!

フッターの設定は全画面共通の設定です。
※パスワード保護画面を除く

フッターメニュー

フッターメニューの設定を行います。
フッターメニューは追加・削除が可能です。

カテゴリーの一覧を表示 フッター内の商品カテゴリーの「表示/非表示」の切り替えを行います。
※「表示」に設定した場合「設定 > 商品 > 商品カテゴリー管理」画面で表示と設定されているカテゴリーがすべて表示されます。
テキスト フッターに表示するテキストを設定します。
フッターメニューを追加する 「+」をクリックすると、フッターメニューが追加します。

フッターメニュー◯ 

◯内は数字が表示されます。

見出し フッターメニューの見出しを設定します。
リンクテキスト フッターメニュー配下のリンクテキストを設定します。
リンク先URL リンクテキスト選択時に遷移するリンク先を設定します。

__________2021-07-27_21.54.43.png
__________2021-07-27_21.52.50.png

ロゴ

ロゴ画像 フッターセクションのロゴ画像を設定します。
画像をアップロードして設定します。
ロゴの幅 ロゴの幅を設定します。

SNSアカウント

SNSのリンク先を設定します。入力することで、各SNSアイコンが表示されます。
対象のSNSは以下になります。

  • Facebook
  • Twitter
  • Instagram
  • LINE

フッターの色を設定します。

背景 背景色を設定します。
見出し 見出しを設定します。
リンク リンクの色を設定します。
本文 本文の色を設定します。

__________2021-07-27_21.56.25.png

区切り線

Caution!!

区切り線セクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

 

ECFDEV-10221_FAQ_1.png

バナー

Caution!!

バナーセクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。

PC画像 バナーとして表示する画像を設定します。
PCのみに適用されます。
SP画像 バナーとして表示する画像を設定します。
SPのみに適用されます。
バナーのリンク先 バナーを押下した際の遷移先を設定します。

ecfdev-12654_faq_1.png

動画

Caution!!

動画セクションは初期設定では表示されておりません。ご利用の場合は「セクションを追加する」から追加してください。
※動画セクションは1つのみ設置可能

YouTube 動画 ID 再生するYouTubeの動画の設定ができます。
※動画 IDとはYouTubeのリンク内の v= 以降の半角英数字
(例) https://www.youtube.com/watch?v=GqTfuEiy7Kc
を再生する場合は「GqTfuEiy7Kc」を入力します。
表示サイズ 再生する動画の表示サイズが設定できます。
「大」を選択した場合には「動画を見る」ボタンが表示されます。
見出し 動画セクションの見出しを設定します。
小見出し 動画セクションの小見出しを設定します。

ecfdev-12659_faq_1.png

セクションを非表示にする

ショップに表示しないセクションを非表示に設定できます。
たとえば、新商品の販売を開始する準備ができるまでは、新商品セクションを一時的に非表示にできます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 非表示にするセクションの目玉アイコンをクリックします。
    __________2021-05-23_16.38.31.png
  4. 「保存する」をクリックします。

セクションを非表示にすると、目玉アイコンの表示が下図のようになります。

__________2021-05-23_16.39.08.png

非表示にしたセクションを表示するには、目玉アイコンを再度クリックします。

セクションを並び替える

ショップに表示するセクションの並び替えを行えます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 並び替えるセクションのドラックアンドドロップアイコンをクリックし、表示したい箇所へ移動します。
    ________________FAQ_1.png
  4. 「保存する」をクリックします。

セクションを追加する

ショップに表示するセクションを追加します。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「セクションを追加する」をクリックします。
    ________________FAQ_2.png
  3. 追加したいセクションをクリックし「選択する」をクリックします。
  4. 「保存する」をクリックします。

セクションを削除する

ショップに表示するセクションを削除できます。

  1. 編集するテーマファイルの「カスタマイズ」をクリックします。
  2. 「タブ:セクション」をクリックします。
  3. 「セクションを削除する」をクリックします。
    ________________FAQ_3.png
  4. 「保存する」をクリックします。

テーマ設定

テーマ設定では、ショップの色、文字体裁、SNSのリンク、ファビコン、動作を変更できます。

Point!!

テーマ設定で変更を加えた内容は、カスタマイズできるページすべてに適用します。
設定方法は、テーマ管理 カスタマイズをご確認ください。

__________2021-07-21_23.17.47.png

注意事項

テーマカスタマイズは、ecforceが提供するテーマテンプレート(ec_force_basic_theme)でのみ利用可能です。

  • 対象となるテーマテンプレート(ec_force_basic_theme)以外では本機能を利用できません。 対象外のテーマでは「カスタマイズ」をクリックした際に「このテーマはカスタマイズ機能に対応していません。」とのメッセージが表示され、テーマカスタマイズ画面に遷移できない状態になります。
  • 「アクション > コードの編集」からファイル編集をしたテーマはサポート対象外です。
  • カスタマイズ対応テーマのファイル構造の変更(ファイル名変更・ファイルの追加や削除)は非推奨です。
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

この記事の目次

このセクションの記事

テーマ管理