ecforceテーマガイドについて
ベーシックテーマで編集するファイル
ベーシックテーマで編集するファイル
ベーシックテーマは ecforce で提供しているノーコード、自動更新で使うテーマの総称です。
そのためコードは編集をしない運用を想定して提供しています。
この一覧は、それでもファイルを探す必要がある人向けの案内です。
コード編集を前提としたデフォルトテーマ（テーマガイドの仕様に沿って作られています）とベーシックテーマの違いについては、テーマの違いについてをご確認ください。
コード編集を実施する場合
コード編集を実施する場合、継続的なテーマのソースコードの更新管理が必要です。
ベーシックテーマをコード編集する場合は「コード編集したテーマカスタマイズ対応テーマテンプレート（ec_force_basic_theme）を最新のテーマバージョンにアップデートする方法 (opens in a new tab)」をよくご確認いただき、運用開始後も継続して保守運用を行ってください。
各画面の詳細は、画面名のリンク先を確認してください。
テーマガイドにページが無い snippets も、公開済みの画面から使う共通パーツであれば載せています。
見た目の調整は、テーマカスタマイズの カスタムCSS (opens in a new tab) を使えます。
各ページや、全ページ共通の箇所に CSS を追加できます。
入力内容は ec_force/assets/theme_customize.css に保存されます。コード編集からは変更しないでください。
テーマ更新で、付与したスタイルは無効になる場合があります。
手順と制限は FAQ を確認してください。
スタイルシート本体や設定ファイルは、編集を推奨しないファイル を確認してください。
ベーシックテーマはレスポンシブです。テーマ管理のファイルパスに書いてあるスマートフォン用ファイルはありません。
各画面の表には、ベーシックテーマ側の実ファイルを載せています。
必須コンポーネントの置き場所は、テーマガイドと異なることがあります。
空のファイルがテーマに含まれることがあります。
表で「なし」とした行は、他の画面から読み込まれていません。他の画面からのリンクもありません。
固定ページ
| 画面名 | 役割 | ファイル |
|---|---|---|
| トップページ | 画面ファイル | ec_force/shop/base/index.html.liquid |
| 当サイトについて | 画面ファイル | ec_force/shop/base_infos/show.html.liquid |
| 特定商取引法に基づく表示画面 | 画面ファイル | ec_force/shop/law_infos/show.html.liquid |
| プライバシーポリシー画面 | 画面ファイル | ec_force/shop/privacies/index.html.liquid |
| ご利用ガイド画面 | 画面ファイル | ec_force/shop/guides/index.html.liquid |
| フリーページ | 画面ファイル | ec_force/shop/pages/show.html.liquid |
| 利用規約画面 | 画面ファイル | ec_force/shop/customer_terms/index.html.liquid |
| よくあるご質問画面 | 画面ファイル | ec_force/shop/faqs/index.html.liquid |
カート・購入
| 画面名 | 役割 | ファイル |
|---|---|---|
| カート画面 | 画面ファイル | ec_force/shop/carts/show.html.liquid |
| カート画面 | カートの中身 | ec_force/shop/sections/carts_show_content.liquid |
| カート画面 | 関連商品（任意） | ec_force/shop/sections/carts_show_recommend.liquid |
| 注文情報入力画面 | 画面ファイル | ec_force/shop/orders/new.html.liquid |
| 注文情報確認画面 | 画面ファイル | ec_force/shop/orders/confirm.html.liquid |
| 注文情報確認画面 | 確認ボタン | ec_force/shop/sections/order_confirmation_button.liquid |
| サンクスオファー画面 | 画面ファイル | ec_force/shop/orders/cv_upsell.html.liquid |
| サンクスオファー確認画面 | 画面ファイル | ec_force/shop/orders/cv_confirm.html.liquid |
| 注文完了画面 | 画面ファイル | ec_force/shop/orders/complete.html.liquid |
部分テンプレート
| 画面名 | 役割 | ファイル |
|---|---|---|
| ギフト商品一覧 | 部分テンプレート | ec_force/shop/carts/_view_gift.html.liquid |
| 請求先住所 | 部分テンプレート | ec_force/shop/orders/_view_billing_information.html.liquid |
| 受取方法 | 部分テンプレート | ec_force/shop/orders/_view_how_to_receive.html.liquid |
| お届け先住所 | 部分テンプレート | ec_force/shop/orders/_view_shipping_information.html.liquid |
| 受取店舗 | 部分テンプレート | ec_force/shop/orders/_view_pickup_store_information.html.liquid |
| 受取店舗の選択モーダル | 部分テンプレート | ec_force/shop/orders/_view_pickup_store_select_modal.html.liquid |
| ラッピング | 部分テンプレート | ec_force/shop/orders/_view_wrapping_information.html.liquid |
| ポイント | 部分テンプレート | ec_force/shop/orders/_view_point_redeem.html.liquid |
| 招待コード | 部分テンプレート | ec_force/shop/orders/_view_invite_code.html.liquid |
| クーポン | 部分テンプレート | ec_force/shop/orders/_view_coupon.html.liquid |
| 支払い方法 | 部分テンプレート | ec_force/shop/orders/_view_payment_information.html.liquid |
| 配送業者 | 部分テンプレート | ec_force/shop/orders/_view_shipping_carrier.html.liquid |
| 受取場所 | 部分テンプレート | ec_force/shop/orders/_view_pickup_location.html.liquid |
| お届けサイクル | 部分テンプレート | ec_force/shop/orders/_view_payment_schedule.html.liquid |
| 通信欄 | 部分テンプレート | ec_force/shop/orders/_view_remark.html.liquid |
| カスタム項目 | 部分テンプレート | ec_force/shop/orders/_view_free_columns.html.liquid |
| 複数のお届け先を指定 | 部分テンプレート | ec_force/shop/orders/_view_multiple_shipping_option.html.liquid |
| 複数のお届け先情報 | 部分テンプレート | ec_force/shop/orders/_view_multiple_shipping_information.html.liquid |
| 複数のお届け先入力フォーム | 部分テンプレート | ec_force/shop/orders/_view_multiple_shipping_information_form_data.html.liquid |
| 注文情報確認プレビュー | なし | ベーシックテーマでは使わない |
| お客様番号 | 部分テンプレート | ec_force/shop/orders/_view_link_number.html.liquid |
| オプトイン | 部分テンプレート | ec_force/shop/orders/_view_optin.html.liquid |
| チェックリスト | 部分テンプレート | ec_force/shop/orders/_view_checklists.html.liquid |
| 利用規約 | 部分テンプレート | ec_force/shop/orders/_view_terms.html.liquid |
| 注文完了情報 | 部分テンプレート | ec_force/shop/orders/_form_perform.html.liquid |
| サンクスクロスセル | 部分テンプレート | ec_force/shop/orders/_form_cv_xsell.html.liquid |
| サンクスオファー確認画面 | 部分テンプレート | ec_force/shop/orders/_view_confirm.html.liquid |
商品
| 画面名 | 役割 | ファイル |
|---|---|---|
| 商品一覧画面 | 画面ファイル | ec_force/shop/products/index.html.liquid |
| 商品一覧画面 | 一覧の中身 | ec_force/shop/sections/products_index_content.liquid |
| 商品一覧画面 | ファーストビュー | ec_force/shop/sections/product_categories_show_first_view.liquid |
| 商品詳細画面 | 画面ファイル | ec_force/shop/products/show.html.liquid |
| 商品詳細画面 | 商品の中身 | ec_force/shop/sections/products_show_content.liquid |
| キーワード検索結果商品一覧画面 | 画面ファイル | ec_force/shop/searches/show.html.liquid |
| キーワード検索結果商品一覧画面 | 一覧の中身 | ec_force/shop/sections/products_index_content.liquid |
| 商品カテゴリー一覧画面 | 画面ファイル | ec_force/shop/product_categories/index.html.liquid |
| 商品カテゴリー詳細画面 | 画面ファイル | ec_force/shop/product_categories/show.html.liquid |
| 商品カテゴリー詳細画面 | 一覧の中身 | ec_force/shop/sections/products_index_content.liquid |
| 商品カテゴリー詳細画面 | ファーストビュー | ec_force/shop/sections/product_categories_show_first_view.liquid |
商品一覧まわりで共有する snippets です。
| 役割 | 対象 | ファイル |
|---|---|---|
| パンくず（PC） | 検索・カテゴリー詳細 | ec_force/shop/snippets/_category_breadcrumbs_pc.html.liquid |
| パンくず（SP） | 検索・カテゴリー詳細 | ec_force/shop/snippets/_category_breadcrumbs_sp.html.liquid |
| 並び替え | 商品一覧・検索・カテゴリー詳細・セレクション | ec_force/shop/snippets/_product_sort.html.liquid |
セット
| 画面名 | 役割 | ファイル |
|---|---|---|
| セット一覧画面 | 画面ファイル | ec_force/shop/sets/index.html.liquid |
| セット選択画面 | 画面ファイル | ec_force/shop/sets/show.html.liquid |
セレクション
| 画面名 | 役割 | ファイル |
|---|---|---|
| セレクション一覧画面 | 画面ファイル | ec_force/shop/selections/index.html.liquid |
| セレクション画面 | 画面ファイル | ec_force/shop/selections/show.html.liquid |
ランキング
| 画面名 | 役割 | ファイル |
|---|---|---|
| ランキング画面 | 画面ファイル | ec_force/shop/sale_rankings/show.html.liquid |
ログイン・会員登録
| 画面名 | 役割 | ファイル |
|---|---|---|
| 会員ログイン/会員登録画面 | 画面ファイル | ec_force/shop/customers/sessions/new.html.liquid |
| 会員登録画面 | 画面ファイル | ec_force/shop/customers/registrations/new.html.liquid |
| パスワードリセット案内画面 | 画面ファイル | ec_force/shop/customers/passwords/new.html.liquid |
| パスワードリセット画面 | 画面ファイル | ec_force/shop/customers/passwords/edit.html.liquid |
マイページ
| 画面名 | 役割 | ファイル |
|---|---|---|
| マイページ画面 | 画面ファイル | ec_force/shop/customer/base/show.html.liquid |
| マイページ画面 | サイドバー | ec_force/shop/sections/customer_sidebar.liquid |
会員情報
| 画面名 | 役割 | ファイル |
|---|---|---|
| 会員情報変更画面 | 画面ファイル | ec_force/shop/customer/base/edit.html.liquid |
| パスワード変更画面 | 画面ファイル | ec_force/shop/customer/passwords/edit.html.liquid |
お届け先情報
| 画面名 | 役割 | ファイル |
|---|---|---|
| お届け先情報一覧画面 | 画面ファイル | ec_force/shop/customer/shipping_addresses/index.html.liquid |
| お届け先情報の編集画面 | 画面ファイル | ec_force/shop/customer/shipping_addresses/edit.html.liquid |
| お届け先情報の登録画面 | 画面ファイル | ec_force/shop/customer/shipping_addresses/new.html.liquid |
クレジットカード
| 画面名 | 役割 | ファイル |
|---|---|---|
| クレジットカード情報一覧/登録画面 | 画面ファイル | ec_force/shop/customer/cards/index.html.liquid |
| クレジットカード情報の編集画面 | 画面ファイル | ec_force/shop/customer/cards/edit.html.liquid |
購入履歴
| 画面名 | 役割 | ファイル |
|---|---|---|
| 購入履歴一覧画面 | 画面ファイル | ec_force/shop/customer/orders/index.html.liquid |
| 購入履歴詳細画面 基本情報 | 画面ファイル | ec_force/shop/customer/orders/show.html.liquid |
| 購入履歴詳細画面 お届け先情報 | なし | 基本情報の画面ファイルに表示 |
| 購入履歴詳細画面 お届け先情報の編集 | 画面ファイル | ec_force/shop/customer/orders/shipping_addresses/edit.html.liquid |
| 購入履歴詳細画面 受取店舗情報 | なし | 基本情報の画面ファイルに表示 |
定期注文
| 画面名 | 役割 | ファイル |
|---|---|---|
| 定期注文一覧画面 | 画面ファイル | ec_force/shop/customer/subs_orders/index.html.liquid |
| 定期注文詳細画面 基本情報 | 画面ファイル | ec_force/shop/customer/subs_orders/show.html.liquid |
| 定期注文詳細画面 基本情報の編集 | 画面ファイル | ec_force/shop/customer/subs_orders/edit.html.liquid |
| 定期注文詳細画面 停止・キャンセル理由選択 | 画面ファイル | ec_force/shop/customer/subs_orders/cancel.html.liquid |
| 定期注文詳細画面 お届け先情報 | なし | 基本情報の画面ファイルに表示 |
| 定期注文詳細画面 お届け先情報の編集 | 画面ファイル | ec_force/shop/customer/subs_orders/shipping_addresses/edit.html.liquid |
| 定期注文詳細画面 商品情報 | 画面ファイル | ec_force/shop/customer/subs_orders/order_items/index.html.liquid |
| 定期注文詳細画面 商品の編集 | 画面ファイル | ec_force/shop/customer/subs_orders/order_items/edit.html.liquid |
| 定期注文詳細画面 購入情報 | なし | 購入履歴一覧・マイページで確認 |
| 定期注文詳細画面 セット商品の編集 | 画面ファイル | ec_force/shop/customer/subs_orders/sets/edit.html.liquid |
| 定期注文詳細画面 お届け予定日カレンダー | 画面ファイル | ec_force/shop/customer/subs_orders/calendars/show.html.liquid |
| 定期注文詳細画面 商品の追加 | 画面ファイル | ec_force/shop/customer/subs_orders/variants/show.html.liquid |
| 定期注文詳細画面 頒布会商品の編集 | 画面ファイル | ec_force/shop/customer/subs_orders/distribution_clubs/edit.html.liquid |
| 定期注文詳細画面 一部商品の配送サイクル変更 | 画面ファイル | ec_force/shop/customer/subs_orders/delivery_cycles/edit.html.liquid |
| 定期注文詳細画面 商品の一括編集 | 画面ファイル | ec_force/shop/customer/subs_orders/variant_bulk_changes/edit.html.liquid |
ポイント・招待クーポン
| 画面名 | 役割 | ファイル |
|---|---|---|
| ポイント履歴一覧画面 | 画面ファイル | ec_force/shop/customer/points/index.html.liquid |
| 招待クーポン一覧画面 | 画面ファイル | ec_force/shop/customer/invite_coupons/index.html.liquid |
お気に入り
| 画面名 | 役割 | ファイル |
|---|---|---|
| お気に入り一覧画面 | 画面ファイル | ec_force/shop/customer/favorites/index.html.liquid |
| お気に入り一覧画面 | 商品カード | ec_force/shop/snippets/_product.html.liquid |
スマレジ
| 画面名 | 役割 | ファイル |
|---|---|---|
| スマレジ会員バーコード画面 | 画面ファイル | ec_force/shop/customer/smaregi/show.html.liquid |
| 本会員登録画面 | 画面ファイル | ec_force/shop/customer/base/show_registration_member.html.liquid |
部分テンプレート
| 画面名 | 役割 | ファイル |
|---|---|---|
| お届け先情報フォーム | 部分テンプレート | ec_force/shop/customer/shipping_addresses/_form.html.liquid |
| アンケート回答結果 | 部分テンプレート | ec_force/shop/customer/base/_one_d_color_answer_results.html.liquid |
| 購入履歴詳細タブ | なし | タブを使わない |
| 定期注文詳細タブ | なし | タブを使わない |
お知らせ
| 画面名 | 役割 | ファイル |
|---|---|---|
| お知らせ一覧画面 | 画面ファイル | ec_force/shop/informations/index.html.liquid |
| お知らせ詳細画面 | 画面ファイル | ec_force/shop/informations/show.html.liquid |
| お知らせカテゴリー画面 | 画面ファイル | ec_force/shop/information_categories/show.html.liquid |
お問い合わせ
| 画面名 | 役割 | ファイル |
|---|---|---|
| お問い合わせ登録画面 | 画面ファイル | ec_force/shop/contacts/draft.html.liquid |
| お問い合わせ確認画面 | 画面ファイル | ec_force/shop/contacts/confirm.html.liquid |
| お問い合わせ完了画面 | 画面ファイル | ec_force/shop/contacts/complete.html.liquid |
パスワード保護
| 画面名 | 役割 | ファイル |
|---|---|---|
| パスワード保護画面 | 画面ファイル | ec_force/password/index.html.liquid |
| パスワード保護画面 | ヘッダー | ec_force/password/sections/password_header.liquid |
| パスワード保護画面 | 本文 | ec_force/password/sections/password_content.liquid |
| パスワード保護画面 | フッター | ec_force/password/sections/password_footer.liquid |
| パスワード入力画面 | 画面ファイル | ec_force/password/new.html.liquid |
| パスワード入力画面 | ヘッダー | ec_force/password/sections/password_header.liquid |
| パスワード入力画面 | フッター | ec_force/password/sections/password_footer.liquid |
レイアウト
| 名前 | 役割 | ファイル |
|---|---|---|
| 購入（レイアウト） | レイアウト | layouts/ec_force/shop/order.html.liquid |
| 購入以外（レイアウト） | レイアウト | layouts/ec_force/shop.html.liquid |
| パスワード保護（レイアウト） | レイアウト | layouts/ec_force/password.html.liquid |
共通パーツ
テーマガイドにページが無い snippets も、原則ここに載せています。
shared_partial 相当や、複数の画面から使うパーツです。
テーマカスタマイズで足りる場合は触りません。
| 名前 | 役割 | ファイル |
|---|---|---|
| header | メタ情報 | ec_force/shop/sections/_head.html.liquid |
| header | ヘッダー | ec_force/shop/sections/header.liquid |
| header | ヘッダー共通 | ec_force/shop/snippets/_header_common.html.liquid |
| nav | グローバルナビ | ec_force/shop/snippets/_global_navi.html.liquid |
| footer | フッター | ec_force/shop/sections/footer.liquid |
| preview_footer | プレビューフッター | ec_force/shop/snippets/_preview_footer.html.liquid |
| sidebar | マイページのサイドバー | ec_force/shop/sections/customer_sidebar.liquid |
| body_google_tag_manager | GTM（body） | ec_force/shop/sections/_body_google_tag_manager.html.liquid |
| head_google_tag_manager | GTM（head） | ec_force/shop/sections/_head_google_tag_manager.html.liquid |
| cart_modal | カートモーダル（読み込み） | ec_force/shop/sections/_cart_modal.html.liquid |
| cart_modal | カートモーダル（中身） | ec_force/shop/snippets/_cart_modal.html.liquid |
| available_coupon_list | 利用可能クーポン一覧 | ec_force/shop/sections/_available_coupon_list.html.liquid |
| 会員メニュー | ヘッダー | ec_force/shop/snippets/_member_menu.html.liquid |
| ゲストメニュー | ヘッダー | ec_force/shop/snippets/_guest_menu.html.liquid |
| ログインメニュー | ヘッダー | ec_force/shop/snippets/_login_menu.html.liquid |
| セット商品選択 | セット選択・定期のセット編集 | ec_force/shop/snippets/_set_group_item.html.liquid |
| SNS | 商品詳細・お知らせ詳細など | ec_force/shop/snippets/_sns.html.liquid |
編集を推奨しないファイル
次のパス配下は、コード編集を推奨しません。
| パス | 内容 |
|---|---|
ec_force/assets/ | スタイルシート、スクリプト、画像、フォント |
ec_force/config/ | テーマカスタマイズの保存結果 |
ec_force/shop/section_schema/ | カスタマイズ項目の定義 |
ec_force/password/section_schema/ | パスワード保護のカスタマイズ項目の定義 |
ec_force/locales/ | 文言。言語の編集 (opens in a new tab) から変更します |
ec_force/shop/sections/ のうち、上の表に無いファイル | トップページやマイページのカスタマイズ枠など |
ec_force/shop/customer/base/dummy_show.html.liquid | カスタマイズのプレビュー用 |
ec_force/shop/orders/dummy_order_confirm.html.liquid | カスタマイズのプレビュー用 |
ec_force/shop/snippets/_product_dummy.html.liquid | カスタマイズのプレビュー用 |