テーマ管理

カスタマイズ対応テーマテンプレート(ec_force_basic_theme)

ec_force_basic_theme とは

ec_force_basic_themeは、ecforceが提供するスタンダードなテーマです。
シンプルなデザインが特徴で、ECサイトのトレンドや新機能リリースに合わせてユーザーインターフェイスがアップデートされます。 テーマカスタマイズ機能や言語の編集機能により、コード編集なしでショップの基本的な見た目や雰囲気を、独自のブランドに合わせてカスタマイズできます。

thumb_goodskin.png

現在、ecforceで配布中のテーマはカスタマイズ機能対応のテーマテーマテンプレート(ec_force_basic_theme)です。
最新のテーマは「ショップ管理 > テーマ管理」の「テーマを追加」メニューより追加可能です。
「only_a_few_items / several_items / various_items」の3種類からが追加可能ですが、すべてテーマカスタマイズ機能に対応しており、テーマのソースコードも共通です。
(カスタマイズ機能で設定可能な初期値が異なります。インストール後、カスタマイズで設定変更可能です)

テーマテンプレートとは

テーマテンプレートではショップページ(/shop 配下)に存在するブランドサイト・ショッピングカート・問い合わせ受付・購入者のマイページを提供する機能部分の表示ロジックを定義します。
テンプレートであるため、提供外の機能を追加したり、仕様を変更したりすることはできません。詳しくはテーマコーディングでの実現可否事項をご確認ください。

ecforce では Liquid Template Languageを採用しています。
Liquidの文法や構文の書き方、コーディングの相談等はカスタマーサポートのサポート対象外です。

いずれも設定・編集は、ecforce管理画面の「ショップ管理 > テーマ管理」より行います。

カスタマイズ対応テーマテンプレートの特色

コード編集をせずにご利用いただく場合

運用について

テーマのソースコードの更新管理が不要です。(ecforceの機能リリースにあわせて最新のコードが自動適用されます)

ecforceの管理画面から可能なテーマカスタマイズ機能でカスタマイズしてご利用いただく方式です。
カスタマイズ対象項目外の表示・機能変更はできないためコーディング実施時よりも自由度は下がりますが、コードのメンテナンスが不要です。

コード編集を実施する場合

運用について

ecforceの機能リリースにより、継続的なテーマのソースコードの更新管理が必要です。(自動更新できません)
ec_force_basic_themeをコード編集する場合は「コード編集したテーマカスタマイズ対応テーマテンプレート(ec_force_basic_theme)を最新のテーマバージョンにアップデートする方法」をよくご確認いただき、運用開始後も継続して保守運用を行ってください。

コード編集済のec_force_basic_themeはテーマカスタマイズ・自動更新機能のサポート対象外です。

ec_force_basic_themeはテーマカスタマイズ機能をご利用いただくことが前提のコードで、かつすでにデザイン適用済みコードのため、本テーマをもとに全体をコーディングしていく方式の場合、コーディング難度は高くなります。(標準で定義されている CSS class や動作のため読み込まれているJavaScriptなどが存在しているため。これらを外すことはできません)

テーマ仕様書については、ec_force_basic_theme 利用時でも動作仕様や利用できる変数の仕様は同じですが、ec_force_basic_theme 特有の記述・更新内容については記載していません。

使用可能な機能一覧

カスタマイズ対応テーマテンプレート(ec_force_basic_theme)では、以下の機能を使用できます。

テーマを問わず使用可能な機能

上記についての詳細はテーマ管理をご参照ください。

カスタマイズ対応テーマテンプレート(ec_force_basic_theme)のみ使用可能な機能

ec_force_basic_themeを利用する

テーマ管理トップ画面の「テーマを追加」からテーマを追加してください。
※詳しくはテーマ管理 テーマを追加をご参照ください。

ec_force_basic_themeのファイル概要

コード編集画面では、ファイルツリー表示によりすべてのファイルを確認、編集できます。

Caution!!

コード編集を行ったテーマはサポートの対象外です。
assets ec_force_basic_themeに使用されているcssファイルを格納したフォルダ
config テーマカスタマイズに関するデータファイルを格納したフォルダ(編集非推奨)
locales 言語の編集に関するデータファイルを格納したフォルダ(編集非推奨)
section_schema テーマカスタマイズに関するデータファイルを格納したフォルダ(編集非推奨)
sections 画面をセクション毎切り出したファイルを格納したフォルダ
  • トップページ
  • 商品一覧画面、商品カテゴリー詳細画面、キーワード検索結果一覧画面
  • 商品詳細画面
  • カート画面
  • パスワード保護画面
snippets 複数画面で共通利用するファイルを格納したフォルダ
~.html.liquid ショップを構成する基本的なファイル
layouts 複数ページに共有なファイルを格納したフォルダ

テーマコーディングでの実現可否事項

カスタマイズ機能のみで運用するか、コーディングでさらに細かなカスタマイズを実施するかを検討するにあたり、テーマコーディングで実現可能・不可能な事項をご確認いただく必要がございます。

テーマコーディングで実現可能

  • サイトマップで定義されたページについてHTML出力の変更
  • サイトマップ上のページごとに定義された変数・オブジェクトの出力(必須項目でなければ、表示しないことも可能です)
  • フォーム用のパーツの見栄えの変更 (CSSで変更)
  • 管理画面内のファイルアップローダー機能を用いた 画像, JavaScript , css ファイルアップロードフォルダ作成
    • アップロード先フォルダ(トップ) のURLは {{ file_root_path }} 変数にて取得できます
    • アップローダーを利用せず、Amazon S3 に対応しているFTPソフトでのアップロードも可能です(オプション)

テーマコーディングでも実現不可能

  • ソースコードのバージョン管理 , Githubなどとの接続
  • サイトマップ上で定義されていないページ・URLの新規作成
  • 各ページで定義されていない変数・オブジェクトの出力
  • 入力フォームの形式の変更 (例: text から checkbox , select から text など)
  • 入力・保存時の導線の変更
  • ecforce で提供していない新規入力項目の追加
  • ecforce で提供している「読み込み必須」のJavaScript の編集
    • https://ご契約ドメイン/ 配下にはファイルアップロードできません
    • https://ご契約ドメイン/ 配下に設置されている JavaScript の path は ecforce の機能リリースにあわせて変更されます(URLを直指定して読み込みしないようにしてください)

テーマのコード編集を実施する際の注意事項

ec_force_basic_theme はecforce管理画面からのカスタマイズのみで利用することを想定したテーマで、コード編集済のec_force_basic_themeはサポート対象外です。

  • テーマの基本仕様は テーマ仕様書(ecforceテーマガイド)と同じですが、本テーマではデザイン部分などアレンジが加えられているため、テーマ仕様書の記述と異なる場所がございます。
  • theme_customize.css、bundle.css で提供している既存CSS class は他のCSSファイルで上書きできない(theme_customize.css , bundle.cssが優先される)仕様です。
  • theme_customize.css , bundle.css は編集非推奨です。
  • コード編集画面から編集不可のファイル( JavaScript ファイルなど)が更新される場合があるため、最新テーマの該当ソースコードのみを既存テーマにコピーしても動作しない場合があります。
  • コード編集非推奨のテーマであり、カスタマイズ機能 利用を前提としているため一部テンプレートファイル構成テーマ仕様書と異なります(細分化されています)。
  • テーマカスタマイズ・言語編集は「テーマごと」に反映となります。(テーマは合計20個までインストール可能です)
  • 新しいテーマをインストールした場合、既存テーマでのカスタマイズ内容は反映されません。(テーマインストール時はデフォルト設定でのインストールとなります)

コード編集を実施した ec_force_basic_theme の運用について

自動更新非対応のテーマをご利用、もしくは自動更新対応のテーマ(ec_force_basic_theme)をコード編集した場合、ecforceの機能リリースにより、継続的なテーマのソースコードの更新管理が必要です。
ec_force_basic_themeをコード編集する場合は「コード編集したカスタマイズ対応テーマテンプレート(ec_force_basic_theme)を最新のバージョンにアップデートする方法」をよくご確認いただき、運用開始後も継続して保守運用を行ってください。

この記事の目次

このセクションの記事

テーマ管理