ウェブノウハウ

WEB KNOWHOW

ShopifyをカスタマイズしてオリジナルのECサイトを作る

メタフィールドを使ってショップ独自の商品情報を追加する【テーマ:Debut】

Shopifyでショップを構築・運営していると、商品情報にショップ独自の項目を追加したいことがしばしばあります。
今回はその方法についてご紹介。
 
Shopifyにおける商品情報には、デフォルト状態で、
商品名、説明文、価格、オプション(色やサイズ)、バリエーションごとの価格や在庫
などがありますが、さらにショップ独自の商品情報を追加したい場合には、

メタフィールド

というショップごとのカスタム項目を登録できる機能を使います。
 
今回はこのメタフィールドを使って、デフォルトの説明文とは別の場所にもうひとつ追加の説明文を任意の場所に設置したいと思います。
 
手順は簡単。

  1. Shopifyの管理画面で「設定」を選択
  2. 「メタフィールド」を選択
  3. 「商品」を選択し、商品メタフィールドの定義を追加
  4. 名前には、メタフィールド名を入力。
    ここでは「XXXXXX」と入力することにします。
    ※ これが変数名になりますので、識別しやすい半角英数文字で入力しましょう。
  5. コンテンツタイプに「テキスト」を選び、「複数行のテキスト」を選択して、追加
    ※ 「複数行のテキスト」ではpタグやbrタグも有効です。
  6. 一覧に戻ると「product.metafields.my_fields.XXXXXX」(ここでのXXXXXXはメタフィールド名)といった具合に、変数名が表示されているので、コピーする
  7. コード編集画面を開き、商品詳細ページのテンプレートLiquidファイル sections/product-template.liquid を開き、この説明文を表示したい箇所に
    {{ product.metafields.my_fields.XXXXXX}}
    

    と記述

以上です。
 
それでは商品編集画面を開いて、画面を上から下までさらりと眺めてみてみましょう。
「メタフィールド」という欄があり、入力することができるようになっていますね。
そこに任意の文章(pタグやbrタグも使えます)を入力すれば、商品詳細ページの sections/product-template.liquid で記述した場所にメタフィールドの説明文が表示されているはずです。
 
なお今回はDebutテーマでの説明になりましたが、メタフィールドはShopifyの標準機能ですので、別のテーマでも同じような方法で使うことができます。
 
メタフィールドで商品ページでの商品紹介の自由度がグンと広がりますね。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!