テーマ管理 カスタマイズ

カスタマイズでできること

テーマカスタマイズに対応したテーマテンプレート（ec_force_basic_theme）では、ショップの基本的な見た目や雰囲気について、コーディングなしで独自のブランドに合わせてカスタマイズできます。

カスタマイズ機能は対応したテーマテンプレート（ec_force_basic_theme）のみで利用可能です。
テーマ管理にテーマ（ec_force_basic_theme）を追加する方法は、テーマ管理 テーマを追加を参照ください。
※2021/07以前に提供したすべてのテーマは本機能に対応していません。

カスタマイズ画面

カスタマイズ画面は、「ショップ管理 > テーマ管理」の各テーマの「カスタマイズ」をクリックすると表示されます。

カスタマイズする画面の切り替え

カスタマイズする画面を切り替えられます。
画面上部中央にある画面名の箇所から切り替え可能です。

※各カスタマイズ画面毎のPC表示、SP表示にそれぞれURLが付与されているため、リンクを用いた共有も可能です。

タブ：セクション

「タブ：セクション」では、ページのコンテンツを「セクション」という単位で区切り、セクションごとに内容をカスタマイズできます。

追加・削除・並び替え

セクションごとに、追加と削除が行えます。

また、項目の並び順についても変更が可能です。

例えば、トップページに動画を追加したい場合、カスタマイズする画面に「トップ画面」を選択した状態で、「セクションを追加する」より、「動画」を選択すると追加されます。

項目を並び替える時は、項目ごとに右側にあるアイコンをクリックし、そのままドラッグして動かします。

 

セクションを削除する時は、対象のセクションをクリックし、下部にある「セクションを削除する」をクリックします。

表示/非表示の切り替え

各セクションの目のアイコン(以下赤枠内)をクリックすることで表示/非表示の切り替えが可能です。

目のアイコンではなく鍵アイコン(以下赤枠内)が表示されている場合には、仕様上表示/非表示の切り替えができません。

タブ：テーマ設定

「タブ：テーマ設定」では、ショップの色、文字体裁、SNSのリンク、ファビコン(favicon)、動作を変更できます。
テーマ設定で変更を加えた内容は、カスタマイズできるページすべてに適用されます。

色を編集する

ショップのさまざまな部分のカラーを設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「色」をクリックします。
3. 編集する項目のカラーアイコンをクリックします。
4. カラーピッカーから変更するカラーを選択します。
   

   カラーの指定

   カラーピッカーのスライダーで指定する方法と、カラーピッカー内のテキストフィールドに16進数カラーコードを直接指定する方法があります。

5. 【保存する】をクリックします。

文字体裁を編集する

ショップのテキストに使用するフォント、フォントサイズを設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「文字体裁」をクリックします。
3. 編集する項目のフォント設定から使用するフォントを指定します。
4. フォントサイズを変更する場合は、スライドバーから使用するフォントサイズを選択します
5. 「保存する」をクリックします。

SNSを編集する

ショップの商品詳細画面に表示されるSNSアイコンの表示非表示を設定できます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「SNS」をクリックします。
3. 表示するSNSのチェックボックにチェックを入れます。
   設定できるSNSは「Facebook」「twitter」「LINE」です。
4. 「保存する」をクリックします。

SNSシェア先のチェックを入れると、商品詳細画面にSNSシェアアイコンが表示されます。

ファビコンを編集する

ショップのファビコンを設定できます。
ファビコンは「ウェブブラウザーのタブ」や「ブックマークページ」などに表示される小さな正方形の画像またはロゴを指します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「ファビコン」をクリックします。
3. ファビコン画像の「画像を選択する」をクリックして、画像ファイルをアップロードします。
   ※画像URLを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
4. 「保存する」をクリックします。

動作を編集する

ショップの画面遷移におけるエフェクトの有効無効を設定できます。
「画面遷移エフェクト有効」にチェックを入れた場合、ショップの画面遷移にアニメーションが追加されます。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「動作」をクリックします。
3. 「画面遷移エフェクト有効」にチェックを入れます。
4. 「保存する」をクリックします。

アイコンを編集する

各商品画像下部に表示できる下記アイコンの表示/非表示、機能のON/OFFを設定できます。

• お気に入りアイコン
• カート追加アイコン
• 画面遷移せずにカート追加

お気に入りアイコンは、商品詳細画面に遷移することなくお気に入り登録ができる機能です。
カート追加アイコンは、商品詳細画面に遷移することなくカートに商品を入れることができる機能です。
    ※セット商品ではセット選択画面へ遷移します。
    ※カート追加アイコンは在庫切れ商品には表示されません。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「アイコン」をクリックします。
3. 「お気に入りアイコン」「カート追加アイコン」「画面遷移せずにカート追加」にチェックを入れます。
4. 「保存する」をクリックします。

各アイコンのチェックボックスにチェックを入れると、各商品画像下部にアイコンが表示されます。
「画面遷移せずにカート追加」にチェックを入れた場合は、カート追加アイコンをクリックしてもカート画面に遷移せずに商品がカートに追加されます。

検索を編集する

ショップの検索メニューに表示する検索条件の設定ができます。
設定可能な検索条件は以下の通りです。

販売価格	価格の下限・上限を絞った検索が可能になります。
在庫	在庫がある商品に絞った検索が可能になります。
レビュー	レビューがある商品に絞った検索が可能になります。
タグ	選択したタグ（商品ラベル）が設定されている商品に絞った検索が可能になります。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「検索」をクリックします。
3. 設定したい検索機能のチェックをクリックします。
4. 「保存する」をクリックします。

商品並び替え機能を編集する

ショップの商品の並び替え機能の設定ができます。
設定可能な画面は以下の通りです。

• 商品一覧画面
• 検索結果一覧画面
• 商品カテゴリー詳細画面
• セレクション画面

設定可能な並び替えは以下の通りです。

おすすめ順	商品一覧画面 検索結果一覧画面 商品カテゴリー詳細画面 管理画面 > 商品管理で設定した順番で表示します。管理画面上で並び替えを行うことで、「おすすめ順」としてショップが指定した並び順で商品を表示させることができます。※ 頒布会商品はショップの一覧画面に表示されますが、商品管理画面には表示されないため、おすすめ順として頒布会商品を任意の順番で表示させることはできません。 セレクション画面 管理画面 > セレクション管理 > 新規作成/編集 > 商品登録で設定した順番で表示します。管理画面上で並び替えを行うことで、「おすすめ順」としてショップが指定した並び順で商品を表示させることができます。
価格の安い順	商品の価格が安い順で表示します。
価格の高い順	商品の価格が高い順で表示します。
発売日降順	発売日が新しい順で表示します。
発売日昇順	発売日が古い順で表示します。
レビュー評価順	レビュー評価の平均点が高い順で表示します。

各チェックボックスにチェックを入れると、画面右上に表示されるようになります。

1. 1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「商品並び替え」をクリックします。
3. 設定したい並び替え機能のチェックをクリックします。
4. 「保存する」をクリックします。

チェックの順番を変えることで表示順序を入れ替えることも可能です。
「初期表示の並び順」でショップに表示されるプルダウンメニューの順序を確認することができます。

 

ハンバーガーメニューを編集する

ショップのハンバーガーメニューに表示する項目の設定ができます。
設定可能な項目は以下の通りです。

 

表示項目

すべての商品	ショップ上にあるすべての商品が表示されるページへのリンクが表示できます。
商品カテゴリ	メニューに商品カテゴリを表示できます。

 

追加メニュー

独自のメニューを自由に作成できます。

【メニューを追加する】をクリックすることで、独自のメニュー項目を表示させることができます。

また、メニュー○(○には数字が入ります)をクリックすることで、すでに作成した独自のメニュー項目を編集することができます。

リンクテキスト	表示するメニュー名を設定できます。
リンク先URL	クリックした際のリンク先URLを設定できます。
リンクの下に区切り線を追加	チェックを入れると、そのメニューの下に区切り線が表示されます。
メニューアイコン	メニューアイコン画像を設定します。 画像をアップロードして設定します。 ※画像urlを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
ブロックを削除する	そのメニュー項目を削除します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「ハンバーガーメニュー(ログイン)」または「ハンバーガーメニュー(未ログイン)」をクリックします。
3. 表示したい項目のチェックをクリックします。
4. 独自のメニューを表示させたい場合は、追加メニューから項目を設定します。
5. 「保存する」をクリックします。

ログインメニューを編集する

ショップのログインメニューに表示する項目の設定ができます。
設定可能な項目は以下の通りです。

表示設定

ログインメニューを表示する

ヘッダー内にログインメニューを表示します。 表示位置はヘッダーセクションのロゴアライメントに追従します。 ログインユーザーには表示項目のログインメニューが表示されます。 未ログインユーザーにはログイン/新規会員登録の導線が表示されます。

未ログイン時の表示

ログイン時の表示

 

表示項目

ログインメニューを自由に作成できます。
【メニューを追加する】をクリックすることで、ログインメニュー項目を表示させることができます。
また、メニュー○(○には数字が入ります)をクリックすることで、すでに作成したログインメニュー項目を編集することができます。
※ログインメニューは最大8つまで登録可能です。

リンクテキスト	表示するメニュー名を設定できます。 ※最大8文字まで入力可能です。
リンク先URL	クリックした際のリンク先URLを設定できます。
メニューアイコン	メニューアイコン画像を設定します。 画像をアップロードして設定します。 ※画像urlを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
ブロックを削除する	該当のメニュー項目を削除します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「ログインメニュー」をクリックします。
3. 表示設定「ログインメニューを表示する」のチェックをクリックします。
4. ログインメニューを表示させたい場合は、追加メニューから項目を設定します。
5. 「保存する」をクリックします。

グローバルナビを編集する

ショップのグローバルナビに表示する項目の設定ができます。
設定可能な項目は以下の通りです。

表示設定

グローバルナビを表示する

ヘッダー内にグローバルナビを表示します。 表示位置はヘッダーセクションのロゴアライメントに追従します。

表示項目

グローバルナビを自由に作成できます。
【ナビを追加する】をクリックすることで、グローバルナビ項目を表示させることができます。
また、ナビ○(○には数字が入ります)をクリックすることで、すでに作成したグローバルナビ項目を編集することができます。
※グローバルナビは最大20個まで登録可能です。

リンクテキスト	表示するメニュー名を設定できます。 ※最大100文字まで入力可能です。
リンク先URL	クリックした際のリンク先URLを設定できます。
ナビアイコン	ナビアイコン画像を設定します。 画像をアップロードして設定します。 ※画像urlを用いた画像反映はテーマ管理 ファイルサイズの大きい画像の設定方法をご確認ください。
ブロックを削除する	該当のナビ項目を削除します。

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「グローバルナビ」をクリックします。
3. 表示設定「グローバルナビを表示する」のチェックをクリックします。
4. グローバルナビを表示させたい場合は、追加ナビから項目を設定します。
5. 「保存する」をクリックします。

カスタムCSSを編集する

各ページ、全ページ共通箇所に対して、任意のCSSを追加することで自由にスタイルを変更することができます。

カスタムCSS追加可能な箇所

カスタムCSSを追加できる箇所は以下の通りです。
※パスワード保護画面のみ、プレビュー画面上でのCSSの即時反映に対応していません。

• 全体（マイページを含むショップの全画面）
• ヘッダー（全ページ共通）
• フッター（全ページ共通）
• トップ画面
• 商品一覧画面
• ランキング画面
• 商品詳細画面
• 商品カテゴリ一覧画面
• セレクション画面
• ニュース詳細画面
• カート画面
• 注文情報確認画面
• パスワード保護画面

カスタムCSS反映手順

1. 編集するテーマファイルの「カスタマイズ」をクリックします。
2. 「タブ：テーマ設定」内の「カスタムCSS」をクリックします。
3. カスタムCSSを追加したい箇所をクリックします。
4. CSSコードエディタに追加するCSSを追加します。
5. [保存] をクリックします。

※上記のCSSエディタ上で記述したカスタムCSSは、ec_force_basic_theme内のec_force/assets/theme_customize.cssに保存されています。
テーマ管理 > 対象のテーマ > アクション > コードの編集 > ツリー表示 > theme_customize.css より記述内容の確認が可能です。
ツリー表示画面の表示方法については「コードの編集画面でできること」をご確認ください。

カスタムCSSを利用する上で必要な知識

CSSをカスタマイズするには、CSSとHTMLの両方に精通している必要があります。
CSSについての詳細は、以下のリソースをご確認ください。

• CSSの基本
• CSSを使用してHTMLのスタイル設定を学ぶ
• CSSリファレンス
• CSSセレクター

PC、SPの表示切り替え

プレビュー表示について、PCでの表示、SPでの表示の切り替えができます。
保存される前に確認ができます。

※各カスタマイズ画面毎のPC表示、SP表示にそれぞれURLが付与されているため、リンクを用いた共有も可能です。

PCでの表示

SPでの表示

設定の保存

テーマの設定の変更が完了したら「保存する」を選択して保存します。

注意事項

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

関連記事

［まとめ］テーマ管理に関するよくある質問