ecforceテーマガイドについて
shared_partial > header の記載方法変更(2021/06)

shared_partial > header の記載方法変更について

2021年6月より、shared_partial > header のデフォルトの記載方法を変更しました。
(2021年6月以前の記載方法も引き続きご利用いただけます。)
以下の通り、表示の優先順位を設定しております。
上位の項目が設定されていない場合、自動的に下位の項目を表示します。

  1. 各ページで設定したcontent_for内の値
  2. 「ショップの基本設定」メタ情報
  3. 「ショップの基本設定」ショップの名前 ※titleタグのみ
  4. 空欄

※ content_forの使い方については「タイトルタグ等 meta tag を設定する方法」を参照ください。

テーマ管理のファイルパス

ec_force/shared/_header.html.liquid
ec_force/shared/_header.html+smartphone.liquid

2021年6月以前の記載方法

<!-- メタタグ -->
<meta charset="utf-8">
<meta name="description" content="{% yield meta_description %}">
<meta name="keywords" content="{% yield meta_keywords %}">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 
<!-- titleタグ -->
<title>{% yield title %}</title>
 
<!-- 外部CSS/JSの読み込み -->
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>

2021年6月以降の記載方法

{% capture yield_title %}{% yield title %}{% endcapture %}
{% capture yield_description %}{% yield meta_description %}{% endcapture %}
{% capture yield_keywords %}{% yield meta_keywords %}{% endcapture %}
{% capture yield_og_image %}{% yield og_image %}{% endcapture %}
 
{% capture meta_title %}
  {% if yield_title == '' %}
    {% if base_info.meta_title == '' %}
      {{ base_info.shop_name }}
    {% else %}
      {{ base_info.meta_title }}
    {% endif %}
  {% else %}
    {{ yield_title }}
  {% endif %}
{% endcapture %}
 
{% capture meta_description %}
  {% if yield_description == '' %}
    {{ base_info.meta_description }}
  {% else %}
    {{ yield_description }}
  {% endif %}
{% endcapture %}
 
{% capture meta_keywords %}
  {% if yield_keywords == '' %}
    {{ base_info.meta_keyword }}
  {% else %}
    {{ yield_keywords }}
  {% endif %}
{% endcapture %}
 
{% capture og_image %}
  {% if yield_og_image == '' %}
    {{ base_info.sns_ogp_logo.url }}
  {% else %}
    {{ yield_og_image }}
  {% endif %}
{% endcapture %}
 
<!-- メタタグ -->
<meta charset="utf-8">
<title>{{ meta_title | strip }}</title>
<meta name="description" content="{{ meta_description | strip }}">
<meta name="keywords" content="{{ meta_keywords | strip }}">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="{{ meta_title | strip }}">
<meta property="og:description" content="{{ meta_description | strip }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ og_image | strip }}">
 
<!-- 外部CSS/JSの読み込み -->
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src=""></script>