参考サイト
・テーマガイド
https://theme.ec-force.com/
・FAQ
https://support.ec-force.com/hc/ja
知識
１．トップページのURL
トップページのURLが下記の2つあります。
https://ドメイン/
https://ドメイン/shop
この状態は重複コンテンツとなり、SEOとしての評価も下がります。
カスタマーサポートにshopディレクトリをトップにリダイレクト処理するように連絡すると、対応してくれます。
但し、ecforceに乗り換えるときの下層ページの新サイトへのリダイレクト処理は、ページ単位で費用が掛かります。
２．変数の確認
ショップ管理→各種設定→ショップの基本設定
上記ページでサイトタイトルやディスクリプション、会社情報などの情報を設定することができます。
添付のようにデベロッパーツールで、inpuやtextareaなどその情報が入力されているhtmlを確認します。
下記は実際のコードですが、name属性をドットで繋ぐことで、変数として扱うことができます。
// サイトタイトル
<input placeholder="例）大人気のTシャツです" type="text" value="" name="base_info[meta_title]" id="base_info_meta_title">
// サイトタイトルの変数
{{ base_info.meta_title}}
// サイトディスクリプション
<textarea rows="4" name="base_info[meta_description]" id="base_info_meta_description"></textarea>
// サイトディスクリプションの変数
{{ base_info.meta_description}}テーマ構築手順
テーマの編集
ショップ管理→テーマ管理→編集したいテーマのアクション→コードの編集
添付のページに遷移しますので、編集したいページを選択します。
遷移時はページのタイトルで表示されますが、赤枠のボタンをクリックすると、ツリー状のファイル一覧として確認することができます。
後は、下記サイトで編集したページの設定方法を確認しつつ、カスタマイズを行います。
cssや画像のアップロード
赤枠のタブ切り替えで、ファイルのアップロードに切り替えます。
上記ページでフォルダの作成もできますので、cssやimgなどのフォルダを作成して、適宜アップロードいます。
よく使うコード
ファイルパス
<img src="{{ file_root_path }}/テーマ名/img/common/btn.png" alt="">ログインの条件分岐
{% if customer_signed_in %}
<a href="/shop/customer">マイページ</a>
{% else %}
<a href="/shop/customers/sign_up">新規登録</a>
{% endif %}検索フォーム
<form action="/shop/search" accept-charset="UTF-8" method="get">
<input type="search" name="q[freeword]" placeholder="キーワード">
<button type="submit">検索</button>
</form>カート内の商品数
{{ order.order_items.size }}カート内の商品の一覧
{% if order.order_items.size > 0 %}
<ul class="list">
{% for order_item in order.order_items %}
<li class="item">
<!-- 商品サムネイル -->
<div class="thumbnail">
{% if order_item.available_thumbnail %}
{% assign src = order_item.available_thumbnail %}
{% else %}
{% assign src = 'missing' | image_url %}
{% endif %}
<img src="{{ src }}" alt="{{ order_item.product.name }}">
</div>
<div class="content">
<!-- 商品名 -->
<p class="title">{{ order_item.product.name }}</p>
<!-- 商品価格 -->
<p class="price">
￥{{ order_item.price_with_campaign_discount | number_to_currency: format: '%n %u' }}
<small>税込</small>
</p>
<!-- 数量 -->
<div class="amount">数量 {{ order_item.quantity }}</div>
</div>
</li>
{% endfor %}
</ul>
{% else %}
<p>現在カート内に商品はございません。</p>
{% endif %}フリーページなどで商品一覧
下記のコードは定期カテゴリーの商品一覧を表示します。
<ul class="ec-shelfGrid">
{% for product in products %}
{% assign _category = '' %}
{% for category in product.product_categories %}
{% if category.product_category_visibility %}
{% unless _category == '' %}
{% assign _category = _category | append: ', ' %}
{% endunless %}
{% assign _category = _category | append: category.name %}
{% endif %}
{% endfor %}
<!-- 定期カテゴリーの商品のみを表示 -->
{% if _category contains '定期' %}
<li class="ec-shelfGrid__item">
</li>
{% endif %}
{% endfor %}
</ul>下記のコードは、H182072（sku）の商品を取得します。
<ul class="ec-shelfGrid">
{% for product in products %}
{% if product.master.sku == "H182072" %}
<li class="ec-shelfGrid__item">
</li>
{% endif %}
{% endfor %}
</ul>商品名やサムネイル、価格（通常価格と販売価格）、リンクを取得した一覧のコードです。
<ul class="ec-shelfGrid">
{% for product in products %}
{% assign _category = '' %}
{% for category in product.product_categories %}
{% if category.product_category_visibility %}
{% unless _category == '' %}
{% assign _category = _category | append: ', ' %}
{% endunless %}
{% assign _category = _category | append: category.name %}
{% endif %}
{% endfor %}
{% if _category contains '定期' %}
<li class="ec-shelfGrid__item">
<a href="/shop/products/{{ product.master.sku }}">
<p class="ec-shelfGrid__item-image">
{% if product.thumbnail.url %}
{% assign src = product.thumbnail.url %}
{% else %}
{% assign src = 'missing' | image_url %}
{% endif %}
<img src="{{ src }}" alt="{{ product.name }}">
</p>
<p style="font-weight: bold;">{{ product.name }}</p>
</a>
<div class="ec-productRole__btn">
{% if product.set.set_sale_method_product_price? %}
{% if product.master.list_price > product.set.lowest_price %}
<div class="ec-productRole__real-price">
通常価格：<br><span>{{ product.master.list_price_include_tax | number_with_delimiter }}円<small>(税込)</small></span>
</div>
<div class="price02-default">
<div class="price02-sale">
<label>{{ product.set.lowest_price_include_tax | number_with_delimiter }}円~<small>(税込)</small></label>
</div>
</div>
{% else %}
<div class="price02-default">
<div class="price02-sale">
<label>{{ product.set.lowest_price_include_tax | number_with_delimiter }}円~<small>(税込)</small></label>
</div>
</div>
{% endif %}
{% elsif product.master.list_price > product.first_price %}
<div class="ec-productRole__real-price">
通常価格：<br><span>{{ product.master.list_price_include_tax | number_with_delimiter }}円<small>(税込)</small></span>
</div>
<div class="price02-default">
<div class="price02-sale">
<label>{{ product.first_price_include_tax | number_with_delimiter }}円<small>(税込)</small></label>
</div>
</div>
{% else %}
<div class="price02-default">
<div class="price02-sale">
<label>{{ product.first_price_include_tax | number_with_delimiter }}円<small>(税込)</small></label>
</div>
</div>
{% endif %}
<a href="/shop/products/{{ product.master.sku }}">
<button type="button" class="ec-blockBtn--action add-cart">商品詳細へ</button>
</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>