Shopifyの狭い商品説明部分をカスタマイズ！【ECサイト制作ビギナー】

by TAKADA

｜ 14107 PV ｜ 2022.12.14

favorite_border

ShopifyでECサイトを制作していると「商品説明を作り込みたいのに、幅が狭くて見にくい」と感じることもあります。商品ページの下部に詳細説明を載せられるよう、カスタマイズしてみましょう。

税込表示の設定や、メタフィールドを商品登録に活用する方法など、商品ページのカスタマイズでよく使う項目もまとめて解説。コピペで使えるコードもご用意しています。

制作するストアの想定・作業準備

使用する開発ストアについて
カスタマイズ用テーマを作ろう

今回の目標
税込み表示設定と商品登録

表示金額を「税込み」にする
メタフィールドを定義する
商品登録をする
金額表示（通貨表示）の調整

テーマ（商品ページ）をカスタマイズ

1.新規セクションファイル作成
2.ブロックを作る
3.カスタマイズ画面から設定
4.セクション＆ブロックの利便性アップ
5.HTML&CSSで見た目を整える

制作するストアの想定・作業準備

Shopifyで架空の和菓子屋『江戸屋』のECサイトを制作していきます。
テーマはShopifyデフォルトテーマ“Dawn”をベースに、要望に合わせてカスタマイズしていく想定です。

使用する開発ストアについて

前回までのブログで使われていた開発ストアを使っても、別の開発ストアを作っても構いません。税率やメタフィールドなど、ストア全体の設定にも触りますので新しい開発ストアで作業するのがおすすめです。

開発ストアの作成方法は、下記記事を参照してください。

Skillhubブログ

完全無料! 15分でできるShopifyパートナーアカウント登録＆開発ストアの作成方法

カスタマイズ用テーマを作ろう

制作する『江戸屋』の要望に合わせて、テーマのカスタマイズを行います。
テーマディレクトリ内のファイルも追加・変更していきます。カスタマイズ用にテーマはストア専用のものを用意しましょう。

Dawnを複製します。

複製したテーマの名前を、わかりやすいものに変更してください。

運用中のストアでない場合、メインテーマにしておくと表示の確認がしやすいです。
今回は開発ストアなので「メインテーマとして設定」しましょう。

このテーマを使って、ストアの制作・テーマカスタマイズを行っていきましょう!

今回の目標

今回カスタマイズするのは、Shopifyの商品ページです。
下図の4箇所を変更します。

特に、PCモニターだと横幅が狭い“商品説明”部分の変更が大きいです。
Amazonなどのモールや、自社ECサイトでよく見られる、下図のような画像も使って作り込んだ商品説明。こういったものを見やすく表示できるよう、変更しましょう。

出典：https://amzn.asia/d/enOY4E5

税込み表示設定と商品登録

まずは、Shopifyのストア管理画面から、商品登録などの操作を行います。

表示金額を「税込み」にする

ストアに表示される価格を、税込み価格に変更しましょう。
手順は以下のとおりです。

1.ストアの設定を総額表示にする
2.商品（和菓子）は軽減税率8%を適用
3.送料には標準税率10%を適用する
4.税込価格で商品登録をする

※ 軽減税率対象外の商品であれば2、3の設定は不要です。
※ 軽減税率対象の商品でも、3の設定は不要な場合もあります。

なお、例えば、「送料込み商品」の販売など、別途送料を求めない場合、その商品が「飲+食料品」に該当するのであれば、軽減税率の適用対象となります
出典：消費税軽減税率制度対策 - 日本商工会議所

総額表示に設定した場合、登録されている価格は「税込み価格」と判定されます。
商品登録で税抜価格を登録した状態で、総額表示の設定を行うと商品価格をすべて変更する必要があります。総額（税込み）表示設定は、最初に行っておきたいですね。

1.総額（税込み）表示に設定する

税金や配送関連の設定は、ストア管理画面の“設定”から行います。
左下に表示されている、設定をクリックして開いてください。

左のメニューから関税と税金を開きます。

スクロールダウンしていくと「税金の請求方法を決める」という項目があります。
下記２箇所へチェックを入れてください。
・税込価格にする
・配送料に課税する

2.軽減税率8%を設定する

そのまま、スクロールアップして最上部まで戻ります。
「物品税の徴収を管理する」項目の、日本をクリック。

一番上の“国の税”を8％に設定します。

3.送料の税率を10％に設定する

物品税の徴収を管理する > 日本のページをスクロールダウン。
一番下にある「税の優先適用」を使って、送料の税率を10％に適用します。
税の優先適用を追加をクリック。

優先適用の対象で「送料」を選択。
税率を10％に設定して、優先適用を追加ボタンをクリック。

右上の保存ボタンで、変更を保存してください。

これで税率の設定は完了です。

メタフィールドを定義する

食品販売でよく使う、以下7つの項目をメタフィールドで登録できるようにします。

名前	ネームスペースとキー	コンテンツタイプ
概要	custom.description	複数行のテキスト
原材料名	custom.ingredients	複数行のテキスト
特定原材料名	custom.allergen	複数行のテキスト
保存方法	custom.preservation	単一行のテキスト
発送予定	custom.shipment-date	単一行のテキスト（※選択肢で作成）
賞味期限	custom.best-by-date	単一行のテキスト
そのほか	custom.supplement	複数行のテキスト

ネームスペースとキーは、お好きに設定していただいて構いません。

下記では、「発送目安」の設定方法を解説します。ここは、予め選択肢を作成し、商品登録画面では選択肢から選ぶだけで設定できるようにしてみましょう。

そのほかの商品メタフィールドは各自作成してください。
基本の定義方法・並び替え方法は、下記のブログをご確認ください。

Skillhubブログ

Shopifyのメタフィールドとは? 独自の情報を登録できるようにしよう

メタフィールドの値を選択肢にする

設定の左側メニューから、メタフィールドを開きます。
商品をクリックして、右上にある「定義を追加する」ボタンで、メタフィールドの新規作成（定義）画面を開いてください。

名前、ネームスペースとキーを入力。
コンテンツタイプを選択するから“単一行のテキスト”を選択します。

下の検証ブロックで「プリセットの選択肢に制限する」にチェックを入れてください。
選択肢を作るための入力欄に切り替わります。

下にある「アイテムを追加」ボタンで、入力欄を増やせます。
3つくらい作ってみましょう。

選択肢を作り終えたら、緑色の保存ボタンで登録してください。

保存方法なども、記述内容をパターン化できる場合は、こちらの方法を使うと良いでしょう。今回は架空の和菓子屋なので、単一業のテキストで入力欄（テキストフィールド）を作るだけでも、選択肢化してもどちらでもOKです。

メタフィールドの作成が終わったら、商品登録に進みましょう。

商品登録をする

いよいよ、商品登録を行います。
ストア管理画面 > 商品管理 > 商品を追加するから、商品を1つ登録します。

商品登録の方法はコチラ

Skillhubブログ

【Shopify初心者はまずコレ】商品登録、コレクションを作成してみよう

見本で作った“江戸屋の琥珀糖”の、本文やメタフィールドのテキストは下記よりダウンロード可能です。コピー＆ペーストでご利用いただけます。
ご自身で、お好きな商品を作って登録して頂いても良いです。

素材ダウンロード

使用画像に関して

画像はAdobe Stockのプレビュー版を使わせていただいております。
ファイル番号は以下のとおりです。

523782354
525315901
521630312
259164826

※他の画像、お手持ちの画像を設定していただいても構いません。

価格・在庫・配送は必須箇所のみ適当に
オプションは無し
メタフィールドは「そのほか」を空にする
右サイドバー側はデフォルトのままでOK

保存して、商品登録を終了してください。

金額表示（通貨表示）の調整

Shopifyデフォルトだと、金額の表示が「¥○○○ JPY」とちょっと見慣れない表示になっています。このJPYという表示を無くしたいと思います。

「¥○○○ JPY」という表記はストア管理画面 > 設定から変更できます。
ストアの詳細の中にある“ストア通貨”の項目、日本円の右にある「表示形式を変更する」をクリックしてください。

「表示形式を変更する」をクリックすると、下に通貨の表示形式という表示が出現します。“通貨があるHTML”の末尾にあるJPYを削除すると、Shopifyストア上のJPY表記が消えます。

JPYを削除して保存。

実際の商品ページ、もしくはテーマのカスタマイズ画面で表示を確認してください。

越境ECの場合、JPYは残したほうが良い

中国元の通貨表示も同じく￥マークが使われます。
越境ECで中国にも対応したい場合は、JPY表記を残しておいて、中国元（CNY）表示との区別を明確にしたほうが親切です。

テーマ（商品ページ）をカスタマイズ

プレビュー用の商品が登録できたら、商品ページの表示をカスタマイズしてきましょう。商品の説明とメタフィールドを、商品イメージや購入ボタンの下に表示できるようにテーマを変更します。

1.新規セクションファイル作成

Shopifyテーマ“Dawn”に用意されている商品情報セクション（main-product.liquid）は、商品イメージ+ユーザーが設定可能なブロック、という2ブロックの構成です。

この構成で１つのセクションの中で「指定した項目（ブロック）だけ、２カラムレイアウトの外に出す」という設定を行うのは大変です。

ですので、セクションごと新しく作ってしまいましょう。
新しいセクションを今ある２カラムの“商品情報”セクションの下に配置して、商品説明など広く表示させたいものを選択するイメージです。

新しく、商品説明用のセクションを作っていきます。
コード編集画面 > 新しいセクションを追加するをクリック。
「main-product-custom.liquid」を作成してください。

まずは、schema内で下記の3つを設定しましょう。

1.nameの値を「商品説明」に打ち替えて、セクション名を変更する
2.テーマのカスタマイズ画面で使えるよう、presets属性を追加する
3.商品ページでのみ使えるよう、templates属性を追加する

main-product-custom.liquid

{% schema %}
  {
    "name": "商品説明",
    "settings": [],
    "presets" : [
      {
        "name" : "商品説明"
      }
    ],
    "templates" : [
      "product"
    ]
  }
{% endschema %}

※templates属性では、このセクションを呼び出せるテンプレートを制限します。
今回の場合は、商品ページテンプレート（product）のみで使えるように設定しています。

Shopify公式ドキュメント / Section Schema
https://shopify.dev/themes/architecture/sections/section-schema#templates

コードを上書き保存し、テーマのカスタマイズ画面を開いてください。
「セクションを追加」から、作ったセクションを選択可能か確認します。

商品説明セクションが表示されていればOKです。
コード編集画面に戻って、セクションファイルの中身を書いていきましょう。

2.ブロックを作る

2-1.基本のブロック設定

テーマカスタマイズ画面で、ブロックとして商品説明やメタフィールドを追加・削除できるように、ブロックを設定します。下記2箇所を追加しましょう。

ブロックを取り出すためのfor文と、分岐を作るcase文
schema内にblocksプロパティを追加

main-product-custom.liquid

{%- for block in section.blocks -%}
  {%- case block.type -%}

  {%- endcase -%}
{%- endfor -%}

{% schema %}
  {
    "name": "商品説明",
    "blocks": [

        ],
    "presets...以下略

2-2.商品説明のブロックを追加

商品の“説明”を呼び出すブロックは、既存の商品情報セクション（main-product.liquid）にもあります。イチから書くのは面倒なので、使えるコードをもらいましょう。

shopify.devでproductオブジェクトのプロパティ一覧を見ると、商品の説明はdescriptionもしくはcontentプロパティで呼び出せることがわかります。

出典：https://shopify.dev/api/liquid/objects/product

main-product.liquidを開きます。
以下のショートカットキーで、検索機能を立ち上げください。

Win:Ctrl + F
Mac:command + F

main-product.liquid内のdescriptionを検索してみましょう。

ファイル内で、いくつかヒットする箇所があるはずです。

まず、商品の説明を表示する部分。
{%- when 'description' -%} ~ {%- endif -%} までをコピーしてください。

コピーしたコードをmain-product-custom.liquidの、case文の中に貼り付けます。

再び、main-product.liquidの方で「description」を検索します。
Nextボタンで進めていくと、1261行目あたりにブロックの設定があります。
{ から } までをコピーしてください。

コピーしたコードをmain-product-custom.liquidの、 blocks: [ ]の中に貼り付けます。

上書き保存してください。

2-3.メタフィールド表示用のブロック作成

次に、メタフィールドで設定した原材料名などを表示するブロックを作ります。

ダイレクトにLiquidに書くことも出来ますが、今回はカスタマイズ画面の「動的ソースを挿入」からメタフィールドを呼び出す形にします。これは、ストア運営者が必要に応じてメタフィールドを増減した際、カスタマイズ画面から自分で設定できるようにするためです。

では、main-product-custom.liquidのschema内で、2つ目のブロックを設定しましょう。
タイトル、メタフィールドに登録した情報の２つを呼び出せるようにします。

main-product-custom.liquid

{% schema %}
  {
    "name": "商品説明",
    "settings": [],
    "blocks": [
      {
        "type": "description",
        "name": "t:sections.main-product.blocks.description.name",
        "limit": 1
      },
      {
        "type" : "textblock",
        "name" : "商品の追加情報",
        "settings" : [
          {
            "type": "text",
            "id": "heading",
            "label": "見出し"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "テキスト"
          }
        ]
      }
    ],
    "presets...以下略

case文の中で、作成したブロックを表示できるよう記述します。

main-product-custom.liquid

{%- case block.type -%}
  {%- when 'description' -%}
    {%- if product.description != blank -%}
      <div class="product__description rte quick-add-hidden">
        {{ product.description }}
      </div>
    {%- endif -%}

  {%- when 'textblock' -%}
    <p>{{ block.settings.heading }}</p>
    <div>{{ block.settings.text }}</div>
{%- endcase -%}

コードを上書き保存してください。

3.カスタマイズ画面から設定

カスタマイズ画面から、表示するセクションとブロックを設定していきます。

アイコンを押して、テーマをカスタマイズを選択。

上部のテンプレート選択で商品 > デフォルトの商品を開いて、編集の用意をしてください。

3-1.商品説明セクションを設定

左サイドバーの「セクションを追加」から、自作した商品説明セクションを追加し、商品情報の下に配置してください。
ブロックを追加で、まずは商品説明を追加します。

商品説明のブロックを追加から、商品の追加情報を選択。
見出しに原材料名と入力してください。
テキストの部分は、動的ソースを挿入 > 原材料名を選びます。

ブロックを追加 > 商品の追加情報を繰り返して、他のメタフィールドの情報も表示させていきましょう。概要は“商品情報”の方で表示するので、ここでは追加しないでください。

見た目は後ほど調整します。そのまま進めてください。

3-2.商品情報セクションの調整

次に、既存の商品情報セクションを調整しましょう。
商品説明～Care Instructionsまでは必要ないので、非表示化します。

商品情報セクションのブロックを追加 > カスタムLiquid を選びます。
メタフィールド“概要”をLiquidで呼び出しましょう。

<!-- 概要を表示 -->
{{product.metafields.custom.description}}

3-3.使わないセクションも非表示化

テキスト付き画像、マルチカラムのセクションも使わないので、セクションごと非表示にします。おすすめ商品は、売上に繋がりそうなので残しておきます。

4.セクション＆ブロックの利便性アップ

ここまでで、表示したい情報の取得は出来ています。
次はカスタマイズ画面からの設定のしやすさ、見やすさをアップさせていきましょう。

1.セクション見出しを登録できるようにする
2.セクションの上下余白を設定できるようにする
3.選択ブロックを分かりやすくする

4-1.セクション見出し部分を作成

まず、セクションの見出し設定。
schema内、nameの下にある"settings": []の中に記述して入力箇所を作ります。

main-product-custom.liquid

{% schema %}
  {
    "name": "商品説明",
    "settings": [
      {
        "type" : "text",
        "id"  :  "title",
        "label": "セクションタイトル",
        "default": "商品説明"
      }
    ],
    "blocks"...以下略

schemaタグの外側、表示部分の一番上にセクション見出しを出力します。

main-product-custom.liquid

{%- if section.settings.title != blank -%}
  <h3>
    {{section.settings.title}}
  </h3>
{%- endif -%}

更にカスタマイズするなら

settingsのオブジェクトを増やすと、カスタマイズ画面から見出しの文字サイズを変更できるようにすることも可能です。

コードは、この設定箇所が既にあるマルチカラムのセクション（multicolumn.liquid）からコピーしてきましょう。以下のようになります。

main-product-custom.liquid

{%- if section.settings.title != blank -%}
  <h3 class="title {{ section.settings.heading_size }}">
    {{section.settings.title}}
  </h3>
{%- endif -%}

<!-- 中略 -->

{% schema %}
  {
    "name": "商品説明",
    "settings": [
      {
        "type" : "text",
        "id"  :  "title",
        "label": "セクションタイトル",
        "default": "商品説明"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      }
    ],
    "blocks"...以下略

これは、セレクトのオプションで選んだvalueの値を、h3タグのクラス {{ section.settings.heading_size }} に出力する、という設定です。
defaultであれば、h3タグは<h3 class="title h1">となります。

4-2.セクションの余白設定

商品情報のセクションだと設定できる、上下余白を選ぶスライダー。
これもあるとストア運営者に優しそうなので、追加しましょう。
自作セクションの表示幅を、他セクションと揃えるのも同時に出来ます。

main-product.liquidから、必要箇所のコードをコピーしましょう。
ファイルの一番下までスクロールダウンすると、idがpadding_topとpadding_bottomのオブジェクトがあります。この２つをコピーします。

コピーした部分を、main-product-custom.liquidの"settings": []内に貼り付けます。
} と { の間に、区切りのカンマ,を忘れずに入れてください。

次に、上下paddingをセクション全体に適用する設定です。

main-product.liquidから以下2箇所をコピー。
自作セクション（main-product-custom.liquid）の方へ貼り付けます。

1行目～5行目のsedtionタグ
{%- style -%} から {%- endstyle -%}まで

main-product-custom.liquidに、それぞれのコードを貼り付けたら、</section>タグを追加しましょう。{% schema %}タグのすぐ上に書けばOKです。

main-product-custom.liquid

<section
  id="MainProduct-{{ section.id }}"
  class="page-width section-{{ section.id }}-padding"
  data-section="{{ section.id }}"
>
  {%- style -%}
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }

    @media screen and (min-width: 750px) {
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top }}px;
        padding-bottom: {{ section.settings.padding_bottom }}px;
      }
    }
  {%- endstyle -%}

  {%- if section.settings.title != blank -%}
    <h3 class="title {{ section.settings.heading_size }}">
      {{section.settings.title}}
    </h3>
  {%- endif -%}

  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when 'description' -%}
        {%- if product.description != blank -%}
          <div class="product__description rte quick-add-hidden">
            {{ product.description }}
          </div>
        {%- endif -%}
      {%- when 'textblock' -%}
        <p>{{ block.settings.heading }}</p>
        <div>{{ block.settings.text }}</div>
    {%- endcase -%}
  {%- endfor -%}
</section>

上記コードの仕組み

main-product.liquidからコピーしたコードは、下図の流れでpaddingを設定します。
{{ section.id }}はセクションのID（動的セクションの場合だと、Shopifyが自動生成するID）を出力しています。{{ section.id }}を使うことで「このセクションだけに有効なidもしくはclass名」を作って、CSSを適用させている、という形です。

ここではpaddingを設定していますが、font-sizeなどの値でも同様に使用できますね。

なお、使われているフィルターの役割は以下のとおりです。

timesフィルター：入力値をtimesで設定した値で乗算する
roundフィルター：小数点以下を四捨五入した整数にする

4-3.選択ブロックを分かりやすくする

テーマカスタマイズ画面でインスペクターをONにしていても、自作した“商品情報”のブロックは、プレビュー部分でハイライト表示がされません。

何かが設定できない…という害はありませんが、ちょっと不便。
ブロックを選択した時に、プレビュー画面の方も反応するように設定しましょう。

方法は簡単。
ブロックを囲む要素に{{ block.shopify_attributes }}属性を加えるだけです。
メタフィールド用のブロック（textblock）は囲む要素がないので、divタグで囲ってから{{ block.shopify_attributes }}属性を追加します。

main-product-custom.liquid

{%- for block in section.blocks -%}
    {%- case block.type -%}
        {%- when 'description' -%}
            {%- if product.description != blank -%}
                <div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
                    {{ product.description }}
                </div>
            {%- endif -%}
        {%- when 'textblock' -%}
            <div {{ block.shopify_attributes }}>
                <p>{{ block.settings.heading }}</p>
                <div>{{ block.settings.text }}</div>
            </div>
    {%- endcase -%}
{%- endfor -%}

block.shopify_attributesについては、Section Schema - Content内“Render blocks”の項目で紹介されています。

Shopify公式ドキュメント / Section Schema
https://shopify.dev/themes/architecture/sections/section-schema#content

コードを上書き保存して、もう一度カスタマイズ画面を見てみましょう。
ここまでの変更箇所が反映されているかチェックしてみてください。

5.HTML&CSSで見た目を整える

メタフィールド部分を、完成見本のように表示できるようHTMLとCSSを書きます。

5-1.CSSファイルを作成

独自CSSの設定は何通りかやり方がありますが、今回は1つのCSSファイルにまとめて書いていく方法を使います。

アセットディレクトリ内に「edoya.css」を新規作成します。

レイアウトディレクトリ > theme.liquid を開きます。
base.cssの下で、作成したedoya.cssを読み込ませてください。

{{ 'edoya.css' | asset_url | stylesheet_tag }}

5-2.HTMLとCSSを書く

Liquidファイル内のHTMLを調整し、CSSファイルに記述を加えていきます。

このあたりは普通のコーディングです。
やりやすい方法でクラス名をつけたり、CSSを書いちゃえばOKです。

main-product-custom.liquid

{%- when 'textblock' -%}
  <div class="col2list" {{ block.shopify_attributes }}>
    <p class="col2list_heading">{{ block.settings.heading }}</p>
    <div class="col2list_text">{{ block.settings.text }}</div>
  </div>

上ではcol2list、col2list_heading、col2list_textと３つのクラスを付けました。
edoya.cssの方で、作ったクラスをセレクタにCSSを書きます。

edoya.css

.col2list{
  padding: 1.25rem 0;
  border-top: 1px #bbb solid;
}
.col2list:last-child{
  border-bottom: 1px #bbb solid;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) {
  .col2list {
    display: flex;
  }
  .col2list_heading{
    flex: 0 0 25%;
  }
  .col2list_text{
    flex: 1;
  }
}

最低限のCSSとして、見られるレイアウトになっているのではないでしょうか。

オプション：条件分岐を作る

メタフィールドで、商品登録の時に情報を入力していない箇所がありますよね。
下図の場合は「そのほか」は特に無いので、空です。
情報が無い場合は、その行ごと表示したくない！という場合もあるでしょう。

こうした時はLiquidタグで、条件分岐を作って対応します。
block.settings.textに情報がある場合のみ、<div class="col2list">~</div>を出力せよという書き方です。

{%- when 'textblock' -%}
  {%- if block.settings.text != blank -%}
    <div class="col2list" {{ block.shopify_attributes }}>
      <p class="col2list_heading">{{ block.settings.heading }}</p>
      <div class="col2list_text">{{ block.settings.text }}</div>
    </div> 
  {%- endif -%}