更新日 2023年11月29日

Docy Child

商品メタフィールド (高度な設定)

メタフィールドを使用すれば、ある特定の商品やページなどに、独自のインプットフィールド追加し、独自のデータを保持することが可能です。

『MISEル』テーマで用意している。セールカウントダウン、サイズチャート、カスタムタブなどを実装するにはShopifyの管理画面からメタフィールドを追加してください。

｢Shopify管理画面→設定→カスタムデータ｣ からメタフィールドを追加することが可能です。

Shopify管理画面

Shopifyの管理画面から、商品にメタフィールドを追加することができます。

Shopifyの管理画面から商品にメタフィールドを追加する方法

｢Shopify管理画面 → 設定 → カスタムデータ｣ の手順でメタフィールドのフォーマットを追加します。

カスタムデータ画面
Shopify管理画面 → 設定 → カスタムデータ

メタフィールドを追加

今回は例として『MISEル』に内蔵されているいくつかの機能を使うために商品データにメタフィールドを追加していきます。
商品を選択し、｢定義を追加する｣をクリックします。

Shopify管理画面:カスタムデータ->商品メタフィールドの定義

｢定義を追加する｣をクリックすると下記のような画面になります。

Shopify管理画面:カスタムデータ->商品メタフィールドの定義を追試する

｢名前｣ ・｢ネームスペースとキー｣ ・｢説明｣が入力できるようになっています。

そして、どんなタイプのデータをメタフィールドに入力できるようにするかを選べるようになっています。

では『MISEル』内蔵されている機能を利用するためのメタフィールドを設定する方法紹介してきます。

ラベル機能の利用

『MISEル』ではメタフィールドの機能を利用し、各商品に下記のような｢おすすめ｣と｢新商品｣ の2つのラベルを追加できます。

ステップ 1　 テーマ側の設定

商品ページでのラベル表示は｢テーマ設定 > 商品ページとクイックビュー｣からラベルに関する表示をオンにします。 

コレクションページでのラベル表示は｢テーマ設定 > 商品→コレクションページ ｣からラベルに関する表示をオンにします。

ステップ 2　メタフィールドの追加

新商品に関するラベルのためのメタフィールドを下記のように設定します。

  • 名前 = 新商品のラベル
  • ネームスペースとキー = labels.new
  • 説明 = 商品に’新商品’のラベルをつける。
  • タイプを選択する -> テキスト -> 単一行のテキスト
Shopify管理画面: カスタムデータ > 商品 > 新商品のラベル

おすすめに関するラベルのためのメタフィールドを下記のように設定します。

  • 名前 = おすすめのラベル
  • ネームスペースとキー = labels.hot
  • 説明 = 商品に’おすすめ’のラベルをつける。
  • タイプを選択する > テキスト > 単一行のテキスト
Shopify管理画面: カスタムデータ > 商品 > おすすめのラベル

ステップ 3　商品のメタフィールドに情報を追加

ステップ2で商品データにメタフィールドを追加すると、商品の登録画面にて下記のように新しくインプットフィールドが現れます。

Shopify管理画面: カスタムデータ > 商品 > おすすめのラベル

新商品ラベルを表示したい場合は｢新商品のラベル｣に ｢true｣と入力します。

おすすめラベルを表示したい場合は｢おすすめのラベル｣に｢true｣と入力します。

商品を保存します。

商品ページを見ると該当の商品に下記のようにラベルが表示されていることが確認できると思います。

補足 : ラベルの文言の変更

｢新商品｣・｢おすすめ｣ラベルの文言を変更したい場合は、｢テーマライブラリ > デフォルトテーマのコンテンツを編集する｣から好きな文言に変更することが可能です。

｢Products> Product Labels｣からお好きな文言に変更してください。

デフォルトでは文言は｢新商品｣・｢おすすめ｣となっています。

Shopify管理画面: オンラインストア > … > デフォルトテーマのコンテンツを編集する

例えば下記のように｢新製品｣と｢おすすめ｣をそれぞれ｢新着｣と｢注目｣に文言を変更してみます。
変更を保存をします。

Shopify管理画面: オンラインストア > … > デフォルトテーマのコンテンツを編集する

すると下記のようにラベルの文言が代わります。

補足 : ラベルの色の変更

また｢新着｣・｢おすすめ｣のラベルの色も変更することが可能です。
色の変更は｢テーマ設定 > カラー｣から行えます。

Shopify管理画面: オンラインストア > カスタマイズ > コレクション

タイムカウントダウン

タイムカウントダウンは、コレクションページと商品ページのクイックビューポップアップに表示させることができます。

タイムカウントダウンを表示させたい場合は下記のように行います。

ステップ 1　商品編集

｢Shopify管理画面>商品管理｣にて割引前価格を設定します。

ステップ 2　テーマ編集・テーマ設定

商品テンプレート編集画面にて、タイムカウントダウンのブロックを追加して表示させます。

コレクションページにて表示させたい場合は、｢テーマ設定 > 商品→コレクションページ｣からカウントダウンの表示を有効にします。

ステップ 3　メタフィールドの追加

商品のメタフィールドの定義を下記のように追加します。

  • 名前 = タイムカウントダウン
  • ネームスペースとキー = countdown.date
  • 説明 = タイムカウントダウンの表示
  • タイプを選択する-> テキスト -> 単一行のテキスト

該当する商品のメタフィールドに下記のようなフォーマットでカウントダウン終了の日付を入力します。

値 = (例) 11 November 2021 20:30 もしくは 2021-11-11 20:30 (日付文字列)

サイズガイド

メタフィールドを使用し、各商品に対して独自のサイズガイドを作成できます。

ステップ 1　テーマの編集

商品テンプレート編集画面にて｢ポップアップ｣のブロックを追加します。

｢テーマ設定 > 商品ページとクイックビュー｣の設定にても｢サイズガイドの表示｣を有効にします。

ステップ 2　メタフィールドの追加

下記のようなメタフィールドの定義を追加します。

  • 名前 = サイズガイド
  • ネームスペースとキー = sizeguide.html
  • 説明 = サイズガイドの内容
  • タイプを選択する-> テキスト -> 単一行のテキスト

ステップ 3　商品のメタフィールドにHTMLを追加

サイズガイドの内容の内容はHTMLで入力してください。

<div class="container container--sm px-0">
    <p class="mb-50 text-center">これはお客様がサイズを見つけるためのおおよその換算表です。既に当ブランドの商品を購入されている場合は、ラベルに表示されているサイズと同じサイズを選択することをお勧めします。</p>
</div>
<div class="row mt-60">
    <div class="col-12 col-md-9">
        <h4 class="mb-15 text-center">レディースアパレルのサイズ表</h4>
        <div class="table-wrap">
            <table class="table-size-guide responsive-table table-center mb-35">
                <tbody>
                    <tr>
                        <th>国際サイズ</th>
                        <th>XS</th>
                        <th>S</th>
                        <th>M</th>
                        <th>L</th>
                        <th>XL</th>
                        <th>XXL</th>
                        <th>XXXL</th>
                    </tr>
                    <tr>
                        <td>ヨーロッパ</td>
                        <td>32</td>
                        <td>34</td>
                        <td>36</td>
                        <td>38</td>
                        <td>40</td>
                        <td>42</td>
                        <td>44</td>
                    </tr>
                    <tr>
                        <td>アメリカ</td>
                        <td>0</td>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>8</td>
                        <td>10</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>胸囲（インチ）</td>
                        <td>28"</td>
                        <td>30"</td>
                        <td>32"</td>
                        <td>34"</td>
                        <td>36"</td>
                        <td>38"</td>
                        <td>40"</td>
                    </tr>
                    <tr>
                        <td>胸囲（cm）</td>
                        <td>716</td>
                        <td>76</td>
                        <td>81</td>
                        <td>86</td>
                        <td>91.5</td>
                        <td>96.5</td>
                        <td>101.1</td>
                    </tr>
                    <tr>
                        <td>ウエスト（インチ）</td>
                        <td>21"</td>
                        <td>23"</td>
                        <td>25"</td>
                        <td>27"</td>
                        <td>29"</td>
                        <td>31"</td>
                        <td>33"</td>
                    </tr>
                    <tr>
                        <td>ウエスト（cm）</td>
                        <td>53.5</td>
                        <td>58.5</td>
                        <td>63.5</td>
                        <td>68.5</td>
                        <td>74</td>
                        <td>79</td>
                        <td>84</td>
                    </tr>
                    <tr>
                        <td>ヒップ（インチ）</td>
                        <td>33"</td>
                        <td>34"</td>
                        <td>36"</td>
                        <td>38"</td>
                        <td>40"</td>
                        <td>42"</td>
                        <td>44"</td>
                    </tr>
                    <tr>
                        <td>ヒップ（cm）</td>
                        <td>81.5</td>
                        <td>86.5</td>
                        <td>91.5</td>
                        <td>96.5</td>
                        <td>101</td>
                        <td>106.5</td>
                        <td>111.5</td>
                    </tr>
                    <tr>
                        <td>スコート</td>
                        <td>36.5</td>
                        <td>38</td>
                        <td>39.5</td>
                        <td>41</td>
                        <td>42.5</td>
                        <td>44</td>
                        <td>45.5</td>
                    </tr>

補足 : 商品ごとのサイズガイドのポップアップを非表示にする

先ほど追加したサイズガイドにメタフィールドに ｢hide｣と入力することにより、サイズガイドを非表示にする事もできます。

Shopify管理画面:商品管理 - メタフィールド設定 カスタムタグのためのメタフィールド設定 #1

カスタムタブ

メタフィールドを使用し、独自のタブを4つ作成することができます。

各タブにつき、tab、tab1、tab2、tab3 のいずれかのネームスペースを使用し、タブのメタフィールドを2つ追加してください。

ステップ 1　メタフィールドの追加 (タイトル)

下記のようにメタフィールドの定義を追加します。

  • 名前 =(例) カスタムタブ1
  • ネームスペースとキー = tab.title (tab1.title, tab2.title, tab3.title)
  • 説明 = カスタムタブのタイトル
  • タイプを選択する-> テキスト -> 単一行のテキスト

ステップ 2　メタフィールドの追加(コンテンツ)

下記のようにメタフィールドの定義を追加します。

  • 名前 = カスタムタブコンテンツ
  • ネームスペースとキー = tab.content (tab1.content, tab2.content, tab3.content)
  • 説明 = カスタムタブのコンテンツ
  • タイプを選択する-> テキスト -> 単一行のテキスト

ステップ 3　商品のメタフィールド入力

カスタムタブにはタイトルを入力します。カスタムタブのコンテンツはHTMLを入力します。

<div style="text-align: center;"><img style="float: none;" src="https://cdn.shopify.com/s/files/1/0022/9913/3998/files/about_1024x1024.jpg?v=1650350109"></div>
<div class="mt-40 text-center">
<div class="container container--sm px-0">
<p>&nbsp;</p>
<p>あなたのお店の紹介をこちらに記載して、お客様とお店の信頼を構築しましょう。より詳しい情報を記載することはお客様の信頼向上につながり、お店から商品を購入する信用に繋がります。</p>
<p class="mt-30"><img height="55" width="204" alt="" src="https://cdn.shopify.com/s/files/1/0022/9913/3998/files/sign_480x480.jpg?v=1644470797"></p>
</div>
</div>

下記のようにメタフィールドによりカスタムタブが追加されました。