ecforce テーマガイドの概要
本ドキュメントはサイトコーディング担当者を対象とし、ecforce のテーマ仕様（実装するために必須なテーマファイル記述）、テーマファイル構成、サイトマップなどを掲載しています。
注意事項
テーマ仕様書ではテーマ実装で必要な項目（デザインなどを除く必須項目）を記載しています。
テーマで実装する範囲はショップサイト（/shop 配下。カート画面・購入画面・マイページを含む）です。
LPテンプレート（フォーム一体型LPで利用するテンプレート）・ecforce 管理画面についてはテーマの適用対象外です。
ecforce の機能・仕様については本ドキュメントでは解説していません。
ecforceの仕様・機能・設定等についての詳細は ecforce FAQ (opens in a new tab) をご確認ください。
本ドキュメントを理解するために必要な知識
本ドキュメントで用いる用語
ベーシックテーマとデフォルトテーマの違いの詳細は こちらをご確認ください。
本ドキュメントの構成
about
ecforce テーマガイド、 テーマについての基本知識、コーディング・運用にあたって必ず把握いただきたいことを記載しています。 テーマコーディングを実施する際は、必ず内容を把握してください。
- はじめにお読みください（このページ）
- テーマの違いについて : ベーシックテーマ・デフォルトテーマの違いにについて記載
- テーマで構築するショップサイトのサイトマップ
- ベーシックテーマで編集するファイル
- テンプレートの使い方
テーマ仕様書
本ドキュメントのメインです。
テーマをコーディングする際は、仕様書を参照してください。
※常に最新の仕様を記載しています。
テーマ仕様書 更新履歴
前月のテーマから仕様が更新された箇所を記載しています。
ベーシックの更新箇所（JS,CSS含む）の提示はしていません。
使い方のヒント
多くお問い合わせいただく内容をまとめています。
ecforce Dev MCP Server
テーマ開発で AI アシスタントを使う際に、テーマガイド・Liquid・FAQ を参照するための接続手順と使い方を掲載しています。
テーマとは
ecforce ではフォーム一体型LPとは別に、一般のECショッピングカートと同様の機能を持ったサイトを作成できます。
サイト作成はノーコードで可能ですが、さらなるカスタマイズが必要な際は、ゼロから、もしくは初期テーマを基本にオリジナルのテーマを構築します。
テーマではショップの各画面の見た目や出力内容を定義するセットです。
1ショップあたり20個までテーマを保持・編集でき、利用中のテーマ（エンドユーザーに見せるテーマ）や、作成中のテーマを同時保有できます。
コーディング担当者は各画面の仕様書（本ドキュメント）を参照し、テーマのコーディングを実施します。
ecforce テーマについて
ecforce テーマではリキッドテンプレートエンジンを利用しています。
リキッドテンプレートエンジンについての詳細は、以下のページをご参照ください。
https://shopify.github.io/liquid/ (opens in a new tab)
テーマ管理機能概要
テーマの操作・編集は「ショップ管理 > テーマ管理 (opens in a new tab)」でおこないます。
テーマ管理のメニュー表示がない場合
ecforceへログインしているユーザーアカウントに対して、テーマ管理画面に対するアクセス権限が付与されていないことが原因です。
適切な権限を付与したメンバーロールの設定をショップ管理者様にご依頼ください。
テーマ管理機能の主な機能は以下ですが、操作方法や機能の詳細は FAQ をご確認ください。
- 利用中テーマの切り替え
- テーマのノーコード編集（対応テーマのみ）
- テーマの自動アップデート（対応テーマのみ）
- テーマの編集
- 編集中テーマのプレビュー表示
また、管理画面内のファイルアップローダー (opens in a new tab)で 画像・JavaScript・CSSファイルのアップロード、フォルダ作成、ダウンロードが可能です。ダウンロードについては複数ファイル・フォルダの一括ダウンロードも可能です。
アップロード先フォルダ（トップ） のURLは {{ file_root_path }} 変数にて取得できます。
テスト環境（有償）を発行している場合、テスト環境と本番環境で {{ file_root_path }} にて取得される値が異なります。（テスト環境・本番環境で別途ファイルアップロードをお願いします）
ファイルアップロードの注意事項
https://ご契約ドメイン/配下にはファイルアップロードできません。https://ご契約ドメイン/配下にはecforce で提供している読み込み必須のJavaScriptファイルがあります。- ファイルパスは、ecforce の機能リリース時に変更となります。
- リリース前のファイルパスは無効になります。
- テーマ仕様書記載の読み込み必須のJSタグ（例：
{{ 'shop/base' | javascript_include_tag }}） を利用すると、ecforceの機能リリースにあわせてファイルパスが自動更新されます。
テーマ管理の「コード編集機能」（コーディング）でできること
テーマのコードを編集（コーディング）することにより、以下のような対応ができます。
- サイトマップで定義されたページについてのHTML出力の変更
- サイトマップ上のページごとに定義された変数・オブジェクトの出力（必須項目でなければ、表示しないことも可能です）
- フォーム用のパーツの見栄えの変更 (CSSで変更)
しかし、例えば以下のような「未定義の項目の出力」「ecforceの機能を変更する」「ecforceが持たない情報を表示すること」などは実現できません。
- サイトマップ上で定義されていないページ・URLの新規作成
- 各ページで定義されていない変数・オブジェクトの出力
- 入力フォームの形式の変更 （例: text から checkbox への変更など）
- 入力・保存時の導線の変更： ecforce で提供していない新規入力項目の追加
また、ソースコードのバージョン管理、ecforce で提供している「読み込み必須」のJavaScript 編集はできません。
自動更新非対応/コーディング後、自動更新停止のテーマ利用時の注意事項
テーマは提供時の最新の仕様ですが、以降の自動更新はありません。
提供時点の機能のみを利用している場合は問題ありませんが、以降追加された新機能に対応するためにはテーマの更新が必要となります。
テーマの運用体制について
ecforceは機能追加が多いことが特徴です。
新機能に対応するためにはテーマの更新が必要となります。
新機能のリリースに伴いテーマの更新が必要な場合は、ecforce リリースメールでお知らせします。
運用開始後も継続して保守運用が可能な体制を整えるようにしてください。
また、ベーシックテーマをコーディング・自動更新停止する場合はFAQ: コード編集したテーマカスタマイズ対応テーマテンプレート（ec_force_basic_theme）を最新のテーマバージョンにアップデートする方法 (opens in a new tab)をよくご確認ください。
テーマ編集と関係ない画面・機能について
テーマに関係しない画面（LP, ecforce 管理画面）は、テーマ利用有無に関わらず ecforce の最新機能が適用されます。
コード編集機能利用の流れ
- テーマ管理のメニューがecforce管理画面内に表示されています。メニュー表示箇所は「ショップ管理 > テーマ管理」です。
- コード編集実施前のテーマをコピー（アクション > 複製）し、複製したテーマをもとにコード編集（アクション > コードの編集）を実施します。
- コード編集を保存し「プレビュー」で動作確認をおこないます。プレビュー機能を利用したまま、マイページ内の動作確認や決済システムの連携も可能です。プレビューの方法・仕様などは ecforce FAQ: テーマ管理 (opens in a new tab)をご確認ください。
- プレビュー表示で表示・動作に問題がないかを十分に確認した後、利用中のテーマを新テーマに切り替えてください。
現在のテーマ について
現在のテーマは、ショップとして公開中のテーマです。
公開中のテーマを更新した場合、即座にサイトに反映されます。
公開中のテーマを直接編集せず、コピーしたテーマを「利用していない」状態で編集、プレビュー表示で動作確認を実施してください。
- コード編集対象画面はサイトマップにてご確認ください。
- PC と SP(smartphone) はブラウザの User-Agent によって切り替わる仕様です。（タブレットはSP扱いになります）
- レスポンシブコーディングの場合は、テーマの作成方法によって変わります。
- SP用ファイルが存在しない場合：PCファイル側に記述してください。SPの記述で必要なCSS等もPCファイル側で読み込みをしてください。
- SP側ファイルが存在する場合：PCとSPに同じコードを記述してください。
コード編集実施時の注意事項
- 初期構築時の設置テーマは編集せず、元テーマをコピーした新規テーマファイルからカスタマイズすることを推奨しております。
- テーマ管理内ではバージョン管理はできません。元のバージョンを残す必要がある場合は、必ず元のバージョンをコピーして新規テーマを作成し、コピーしたテーマを編集してください。
- 正常に動作しない場合は、後述の正常に動作しない場合を参照のうえ、実装者にて検証・確認をおこなってください。
- ec_force_basic_theme はテーマカスタマイズ機能の利用を前提とし、デザインを組み込んだテーマです。
コード編集を実施した場合はカスタマイズ機能・テーマの自動更新機能のサポート対象外です。
テーマ設置・編集後の動作確認について
販売に関係する画面を含むため、テーマ設置・編集後は必ず動作確認/デバッグを行ってください。
デバッグは実装者（ショップ様）にて実施いただきます。
正常に動作しない場合
設置したテーマが正常動作しない場合、まず以下のよくある原因をご確認ください。
- テーマを追加より新規テーマを追加し、コードを未編集テーマで動作を確認する。
コード未編集テーマで正常動作する場合の確認ポイント
→ 独自で加えたコーディング、もしくは新規追加機能にあわせた更新実施 - ブラウザの検証モードを利用し、JavaScript の実行でエラーが出ている場合は、独自設置した JavaScript を確認する。 特にカート登録以降の購入画面、マイページでのクレジットカード登録・編集・支払い方法の変更で動作不備が発生している場合の確認ポイント →テーマに設置したJavaScript 、タグ管理などで設置しているJavaScriptなどの競合/干渉。GTMで配信しているタグがある場合、あわせて確認する。
- （決済できない場合）利用する決済代行会社との接続情報が外部連携アカウント管理 (opens in a new tab) に設定されていることを確認する。
必要な審査・システム構築などが完了し、決済代行会社から決済アカウントの利用開始連絡が来ていることも確認する。
また、上記で解決しない場合、コーディング起因かどうかの切り分けのために、最新のカスタマイズ対応テーマテンプレートをテーマプレビューし、動作確認してください。
コーディング実施後のテーマのみで想定外の動作をする場合は、編集したテーマのコードに問題があります。
テーマ仕様書どおりに正しくコーディングされているかを確認してください。
ecforce カスタマーサポートのサポート範囲について
- コーディング・Liquid テンプレートエンジンの構文等についてはサポート対象外です。
- デバッグ・エラー箇所の調査などはサポート対象外です。
- JavaScript や CSSの記述・競合回避の方法につきましても調査・サポートの対象外です。
パスワード保護機能（メンテナンスモード）ご利用時の注意事項
パスワード保護機能は古いテーマファイルでも基本的に動作いたします。
パスワード保護機能を無効にした状態での表示は https://ご契約ドメイン/password で確認できます。
サポートについて
お問い合わせはecforce FAQ 右上の「お問い合わせ」 (opens in a new tab) からお願いします。
変数について
全変数一覧は準備がないため、ご希望いただいてもお渡しできません。
テーマ仕様書 中に記載のない変数で、記載できるかが不明な項目はお問い合わせください。
同じ情報でもページによって出力可否、変数の記述方法が異なるため、お問い合わせの際は 表示を希望するページ名称（ファイル名） を必ずお知らせください。
ecforce管理画面に存在しないデータ/機能上存在しない項目の出力はできません。
実装されたテーマの動作確認・デバッグ・仕様どおりにコーディングされているかの確認は、サポート対象外です。
また、記述中のテーマに関するお問い合わせの場合は、テーマ名称・ページ名称（ファイル名）と具体的なお問い合わせ内容・期待値などをお知らせください。
お問い合わせへの返信について
お問い合わせ内容により回答まで数営業日いただく場合があります。
テーマ納期の関係での至急回答要望などには対応いたしかねます。