header (shared_partial)

全画面で共通利用する shared_partial です。

本ファイルについて

2021年6月より、デフォルトの記載方法を変更しました。
詳細はこちら

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

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

必要なコンポーネント

特に必要な記述はございません。以下、記述例となります。

{% 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>