2024.05.24

商品のキャッチコピーを、商品ページとコレクションに表示しよう【DAWN】

にゃん花子

記事内に商品プロモーションを含む場合があります

商品ごとのキャッチコピーを、商品ページ・コレクションに表示して、特徴を分かりやすく伝えよう！

カスタマーに商品の特徴や魅力を、１フレーズで伝えるキャッチコピー。
コレクション（商品が一覧で表示される箇所）は特に「選びやすさ」に関わってくるため、一工夫してみましょう！

このblogでわかること

メタフィールドを使って、商品毎にキャッチコピーを付ける方法
キャッチコピーを、商品ページに表示させる方法
キャッチコピーを、コレクションページに表示する方法

メタフィールドを使って、キャッチコピーの入力欄を作る
商品ページで、キャッチコピーを入力する
商品ページで、キャッチコピーを表示する。
1. キャッチコピーの表示をカスタマイズしたい（スタイル追加）
2. キャッチコピーの表示をカスタマイズしたい（liquidの追加）
コレクション（商品一覧）で、キャッチコピーを表示する

Google広告

メタフィールドを使って、キャッチコピーの入力欄を作る

まずは、商品ごとにキャッチコピーを入れられるよう、メタフィールドを作りましょう。

メタフィールドとは？
Shopifyがあらかじめ用意したフィールド以外に、任意のフィールドを追加できる機能です。
例えば、洋服であれば「サイズ表」化粧品であれば「成分表」など、どの商品でも必要になる項目を、追加する際に便利な機能です。
詳しくは公式サイトのヘルプにも！
https://help.shopify.com/ja/manual/custom-data/metafields

Shopifyのストアダッシュボード（管理画面）を開いてください。
左下に表示されている「設定」をクリック。

設定の左メニューから、「カスタムデータ 」をクリックします。
メタフィールドの定義できる一覧が表示されます。今回は、商品のキャッチコピーを追加するので、商品の情報を追加することになります。
「商品」をクリックしましょう。

メタフィールドの定義画面は、「追加する」一択。
定義を追加する、というのはメタフィールドを作成するという意味です。2箇所ありますが、どちらかの「定義を追加」をクリックします。

定義の設定画面がひらきます。設定する項目はそれほど多くありません。１つずつ見ていきましょう。

ネームスペースとキーは、システムが認識するためのものなので「アルファベット」で記載します。

今回、ネームスペースは custom の箇所です。こちらは変更せず、必ず[. ドット]を使って、この後に設定するキーと繋げます。

キーは自由に設定して構いません。半角英数字、アンダースコア ( _)、ハイフン (-)を使用して、分かりやすいものにしておきましょう。

商品のキャッチコピーのメタフィールドはこちらです。キーはわかりやすいように「catchcopy」としています。

定義一覧の画面でも、このように表示されます。

商品ページで、キャッチコピーを入力する

では、実際に商品ページで、キャチコピーを入力してみましょう！

「商品管理」から登録済みの商品を選択し、編集画面を表示します。
編集画面を下へスクロールすると「メタフィールド」の入力欄があります。先ほど設定したキャッチコピーの欄が、表示されているかと思います。

メタフィールドにキャッチコピーを入力したら、「保存する」から保存しておきましょう。

商品ページで、キャッチコピーを表示する。

ここまでキャッチコピーを設定してきましたが、まだこれだけでは、商品ページに表示されません。商品ページに表示するためには、カスタマイズから、メタフィールドを表示するための指示をします。

Shopifyの設定画面から「オンラインストア」→「テーマ」とすすみ、「カスタマイズ」を選択します。

商品ページのテンプレートを表示します。
上部の「ホームページ」をクリックして、「商品」を選択します。

表示したいテンプレートを選択しましょう。今回は「デフォルトの商品」のテンプレートへキャッチコピーを表示していきます。

表示したい箇所を決め、テンプレートから追加します。
今回は商品タイトルの下に追加したいため、「テンプレート」の「商品情報」を表示し、
「ブロックを追加」→「テキスト」を選択します。

テキストの入力欄の右上に「動的ソースを接続」のマークがあります。
動的ソースを接続から、追加したメタフィールド「商品キャッチコピー」を選択して、追加します。

こうすれば、商品キャッチコピーがある場合のみ、設定したしたキャッチコピーを、テキストを表示してくれます！

必ず、「保存」しておきましょう。

キャッチコピーの表示をカスタマイズしたい（スタイル追加）

すでに商品ページに、商品キャッチコピーが表示されていますが、
こちらをさらに「見た目をカスタマイズしたい」場合は、CSSで調整しましょう。

今回は「商品情報」にブロックを追加する形にしているため、
CSSを変更したい場合は「商品情報」からカスタムCSSにスタイルを追記します。

スタイルを追加するclass名は、ブラウザの開発ツールを使用して調べることができます。

調べたclassに対して、カスタムしたい内容をcssに追記しましょう。

もし商品情報の追加CSSが行数制限で追記不可だったり、他のブロックへcssスタイルが影響出てしまう場合は、そもそも商品キャッチコピーの追加方法を変更することで解消できます。

次に紹介している、Liquid追加に挑戦してみましょう！

キャッチコピーの表示をカスタマイズしたい（liquidの追加）

ご紹介したブロックの追加で「テキスト」を選択せずに、「カスタムLiquidを追加」を選択します。（こちらはLiquidの記載が必要なので、先ほどの紹介したテキストよりも上級者向けです）

今回の商品キャッチコピーを実際に表示するためには、下記のようなコードとなります。（参考にしてください）

1{% if product.metafields.custom._catchcopy != blank %}
2<span style="
3	margin: 0 .1em .6em 0;
4	padding: .6em;
5	line-height: 1;
6	color: #333;
7	font-size:1rem;">
8{{product.metafields.custom._catchcopy}}</span>
9{% else %}
10<span></span>
11{% endif %}

Liquidの解説
1行目のif文 … もし、商品キャッチコピーがブランクで無い場合は、以下を実行
2~7行目 … こちらはキャッチコピー表示時のスタイルです。
8行目 … {{ メタフィールド }} 実際に商品キャッチコピーを呼び出します
9行目 … もし、商品キャッチコピーがブランク（空白）の場合は以下を実行
※今回は、空白だった場合に10行目の<span></span>のみ追記するようにしています。自由に変更してください。

コレクション（商品一覧）で、キャッチコピーを表示する

次にコレクションページで、商品ごとにキャッチコピーを追加します。
こちらは、「コードの編集」画面での作業になります。先ほどのカスタマイズ画面から、「コードの編集」を選択します。

今回はDawn（8.0.0）にてカスタマイズしています。バージョンにより文法や追記場所が異なる場合があります。また、Shopify公式の方法ではないため、自己責任にておこなってください。

コードの編集画面から、「スニペット」→「card-product.liquid」を探して「鉛筆マーク」からコードを表示します。

続いてコードの編集です。下記のコードを155行目の下に、コピペしましょう。

1<!--キャッチコピー追加-->
2	{% assign product_metafield = card_product.metafields.custom._catchcopy %}
3	{% if product_metafield %}
4	<p style="color: #444444;margin: 7px 0 10px;text-align: left;font-size: 1.2rem;border-top: 1px solid #E8E8E8;padding-top: 1rem;">{{ product_metafield }}</p>
5{% endif %}
6<!--//キャッチコピー追加-->