BLOG ECブログ : Shopify and more

Shopify 小技 タイトルやメニュー内にHTMLタグを挿入する方法

Shopifyの商品/ブログ記事/ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用するとき、次のような問題が発生する場合があります。

1. タイトルやメニューに入力したHTMLタグが文字列(通常のテキスト)として表示されてしまう。
※<span>や<br>などをHTMLタグとして出力する必要がある。

2. 詳細ページのタイトルにはHTMLタグを使用したいが、一覧ページのタイトルにはHTMLタグを使用したくない。
※商品/ブログ記事/ページなどの詳細ページと、コレクション/ブログ/検索結果などの一覧ページで、別のタイトルを設定する必要がある。

この記事では、Shopifyの商品/ブログ記事/ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用する小技や、メタフィールドの活用方法をご紹介します。

タイトルやメニューに入力したHTMLタグを、HTMLタグとして出力

商品/ブログ記事/ページなどのタイトルや、メニュー項目の名前に入力した<span>や<br>などを、文字列ではなくHTMLタグとして出力するには、それぞれ該当するliquidファイルの一部を変更します。
以下はDawnのバージョン10.0.0で確認したliquidファイルと変更箇所の一覧です。

名称(出力内容) liquidファイル 変更箇所
商品(商品タイトル) section/main-product.liquid {{ product.title | escape }}
コレクション(商品タイトル) snippets/card-product.liquid {{ card_product.title | escape }}
ブログ記事(ブログ記事タイトル) section/main-article.liquid {{ article.title | escape }}
ブログ一覧(ブログ記事タイトル) snippets/article-card.liquid {{ article.title | truncate: 50 | escape }}
ページ(ページタイトル) section/main-page.liquid {{ page.title | escape }}
検索結果(各種タイトル) section/main-search.liquid {{ item.title | truncate: 50 | escape }}
メニュー(メニュー項目の名前)
※バージョン9以前
sections/header.liquid {{ link.title | escape }}
{{ childlink.title | escape }}
{{ grandchildlink.title | escape }}
ドロップダウン(メニュー項目の名前)
※バージョン10以降
snippets/header-dropdown-menu.liquid {{- link.title | escape -}}
{{ childlink.title | escape }}
{{ grandchildlink.title | escape }}
メガメニュー(メニュー項目の名前)
※バージョン10以降
snippets/header-mega-menu.liquid {{- link.title | escape -}}
{{ childlink.title | escape }}
{{ grandchildlink.title | escape }}
ドロワー(メニュー項目の名前)
※バージョン10以降
snippets/header-drawer.liquid {{ link.title | escape }}
{{ childlink.title | escape }}
{{ grandchildlink.title | escape }}

ファイルの修正を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面右下にある『…』ボタンをクリックして『コードを編集』します。
※解説に使用しているのはDawnのバージョン10.0.0の画面です。

例えば商品ページの場合、section/main-product.liquidファイルの以下の記述を

{{ product.title | escape }}

以下のように書き換えます。

{{ product.title }}

liquidのfilter『escape』を削除することで、HTMLのエスケープが解除され、<span>や<br>などがHTMLタグとして出力されます。

詳細ページと一覧ページに別のタイトルを設定

商品/ブログ記事/ページなどの詳細ページと、コレクション/ブログ/検索結果などの一覧ページで、表示するタイトルを変更したい場合があります。そんなときはメタフィールドを使用しましょう。
今回は商品ページにメタフィールドを使ったHTMLタグを含むタイトル、コレクションページにデフォルトのタイトルを使用する想定で解説していきます。
※解説に使用しているのはDawnのバージョン10.0.0の画面です。

1. メタフィールドの追加

まずはメタフィールドを追加します。
Shopifyの管理画面の左下にある『設定』をクリックします。

設定メニューの『カスタムデータ』をクリックします。

カスタムデータの画面で、メタフィールドを追加したい項目(今回は『商品』)をクリックします。

メタフィールドの定義一覧が表示されます。
画面右上にある『定義を追加する』ボタンをクリックします。

1. 定義を設定します。
※名前/ネームスペースとキー/説明の設定内容は任意です。

名前 HTMLタグを含むタイトル
ネームスペースとキー custom.title_with_html_tags
説明 タイトルに<span>や<br>などのHTMLタグを使用できます。
タイプを選択する 単一行のテキスト
ストアフロント チェック

2. 画面右上の『保存』ボタンをクリックします。

メタフィールドの定義が追加されました。
定義名の下段に表示されている
product.metafields.custom.title_with_html_tags
という部分がliquidのobject名です。

忘れないようにメモしておきましょう。

2. メタフィールドの入力

次に商品管理画面でタイトルを入力します。
※ブログ記事やページに対してメタフィールドを追加した場合は、ブログ記事やページの管理画面でタイトルを入力します。

デフォルトのタイトルに商品名(HTMLタグが含まれていないもの)を入力します。
※コレクションページには通常通り、ここへ入力した内容が表示されます。

1. ページ下部に先程追加したメタフィールド『HTMLタグを含むタイトル』の入力欄があるので、HTMLタグを含めた商品名を入力します。
※商品ページには、ここに入力した内容が表示されるようにします。
2. 画面右上の『保存する』ボタンをクリックします。

3. liquidファイルの修正

それではメタフィールドへ入力した内容を、実際のページに表示させてみましょう。
今回は商品ページへ表示するため、section/main-product.liquidファイルを修正します。
以下の記述を

<h1>{{ product.title | escape }}</h1>

先程メモしたliquidのobject名で書き換えます。

<h1>{{ product.metafields.custom.title_with_html_tags }}</h1>

メタフィールドに入力がなければ、デフォルトのタイトルを表示するような仕組みにしておくと、幅広い運用ができます。
その場合は以下のように書き換えます。

<h1>
  {%- if product.metafields.custom.title_with_html_tags != blank -%}
    {{ product.metafields.custom.title_with_html_tags }}
  {%- else -%}
    {{ product.title | escape }}
  {%- endif -%}
</h1>

CSSを追加する前なので、まだ見た目に変化はありませんが、デベロッパーツールなどでソースコードを確認すると、商品ページにHTMLタグを含むタイトルが表示されていることがわかります。

4. CSSの追加

最後にCSSを追加して、<span>で囲ったテキストを小さくしてみましょう。
CSSは以下のように指定します。
※設定値は任意です。

.product__title h1 span {
  display: block;
  font-size: 1.8rem;
}

CSSの追加を管理画面から行う場合、
Shopifyの管理画面 > 販売チャネル > オンラインストア
の画面で『カスタマイズ』ボタンをクリックします。

1. カスタマイズ画面左側にある『テーマ設定(歯車のアイコン)』をクリックして、
2. 『カスタムCSS』の項目へCSSを入力します。

CSSが適用されて、<span>で囲った部分だけが小さくなりました。

Shopify 小技 タイトルやメニューにHTMLタグを使用する方法 まとめ

この記事では、Shopifyの商品/ブログ記事/ページなどのタイトルや、デフォルトのメニュー機能で、spanやbrなどのHTMLタグを使用するときに生じる

  • タイトルやメニューに入力したHTMLタグが文字列(通常のテキスト)として表示されてしまう。
  • 詳細ページのタイトルにはHTMLタグを使用したいが、一覧ページのタイトルにはHTMLタグを使用したくない。

などの問題を、liquid filterやメタフィールドで解決する方法をご紹介しました。

Shopifyのサイト構築に、少しでも役立てていただけると幸いです。

※2023年7月時点の情報です。テーマのアップデートやShopifyの仕様変更などにより、記事の内容通りに設定できない場合があります。