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ファイルと変更箇所の一覧です。

ファイルの修正を管理画面から行う場合、
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. 定義を設定します。
※名前／ネームスペースとキー／説明の設定内容は任意です。

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の仕様変更などにより、記事の内容通りに設定できない場合があります。