Shopifyでストアを作ってみた！…のは良いものの、入力・設定する箇所が多そうで、何から手を付けたら良いか困ってしまいませんか？
そんな場合は、最初に商品登録をしておきましょう。商品の情報があると、コレクションを作ったり、テーマのカスタマイズを行ったりと、出来ることが広がっていきます。
Shopifyストアへ商品を登録しよう
Shopify開発では、アプリで一気にダミーの商品データを登録することも可能です。 が、Shopify制作案件を受けた場合でも、クライアントから「どうするの？」と聞かれることも結構あります。一回は、基本的な操作を行っておきましょう。
このレッスンでは、Shopifyテーマの確認や編集に最低限必要なサンプル登録を行います。 細かな設定方法については、ストアダッシュボードから開ける公式マニュアル「Shopifyストア解説ガイド」をご確認ください。
本講座で行う商品登録・コレクションの設定は、全てストアダッシュボードから行います。
SETP1.商品登録ページを開く
Shopifyストアダッシュボード、左メニューから商品管理をクリック。
商品を追加、ボタンを押します。
商品の追加画面が開きます。
STEP2.必要な情報を入力する
では、サンプル商品を登録していきましょう。
と言っても、私たちはECショップを始めたいわけではありません。 売る予定のものもありませんので「こんな感じの商品があったら良いかな～」と思う架空の商品を登録してみましょう。
メインカラム部分
タイトル・説明
1：タイトルには商品名を入力します
2：商品の説明やPRを入力します
商品説明の入力部分はWordPressやブログなどのような、エディタになっています。 上部のツールバーを使って見出しや文字装飾を設定したり、画像を挿入することもできます。 HTMLモードもあるので、HTMLの手打ちまで含めるとかなり自由度は高いです。
まずはシンプルに説明を入力してみましょう。 見出しと、通常テキストのみにしてみました。
メディア
3：商品画像や動画を設定します。
ファイルのアップロードは、以下３つの方法が使えます。 * 点線の枠内をクリックして、ファイルを指定する * 点線枠内にファイルをドラッグ・アンド・ドロップ * 「URLから追加」の文字をクリックし、URLを入力
メディアに登録した画像は、商品一覧ページなどでも使用されます。 どこに、どのように表示されるかを確認したいので、複数枚画像を追加してみます。 3枚以上あると、分かりやすいかと思います。
※商品画像は適当に、お手持ちのものなどを使ってみてください。
価格設定
4：販売したい価格を入力します
5：割引価格で販売したい時に、元値を入力します
6：商品価格に課税するか否かを決めます
7：（必要があれば）商品の原価を入力します
価格設定は、そのまま、商品のお値段を設定します。
ちょっと紛らわしいのが、価格と割引前価格。 値引きをしたい時には、元々の価格を割引前価格に入力して、価格のところは「割り引いて、最終的に売りたいお値段」に打ち直す必要があります。商品が大量にあって、季節セールをする時には大変そうですね。だからこそ、セールプライスの一括設定アプリの導入が検討されるのでしょう。
今回は表示確認なので、そのまま価格と割引前価格を入力しました。
在庫
8：商品のSKUを入力します
9：商品にバーコード（ISBNなど）があれば入力
10：商品が売れた際、在庫数がマイナスされていきます
11：チェックを入れると在庫が0でも購入できます
12：在庫の数を登録します（SKUを入力すると設定可能）
在庫数を設定するためには、SKU（店舗独自の管理番号）の入力が必要です。 実際に稼働させるECサイトではありませんので、半角英数字で適当に入力してください。
SKUを登録すると、在庫数の部分が「変更を保存してください」に変わります。 保存ボタンをクリック。
保存が完了すると、在庫数を登録できるようになります。 在庫数-新規に在庫数を設定し、保存ボタンで確定します。
配送
13：配送する商品であればチェックを入れます
14：重量毎に送料を変える場合、商品の重さを入力
15：越境ECの場合は設定が必要
16：越境ECの場合は商品に応じたHSコードを入力
全て登録すると以下のようになります。 使わない項目は未設定のままでも大丈夫です。
オプション
17：オプションを登録したい時はチェックを入れる
18：オプションの名前（種類）、値を設定する
19：オブション名＆値の入力欄を追加する
オプションでは、商品のバリエーションを登録します。 商品にサイズバリエーション、カラーバリエーションなどがある商品に使います。
オプションを入力すると「バリエーション」という設定欄が表示されます。 左端の画像アイコンクリックで、バリエーションの画像を追加できます。 サイズバリエーションの場合はいらないですね。
横スクロールなので少し見にくいですが、右側にSKUと在庫数の設定があります。
別のオプションを追加する、をクリックして、カラーバリエーションも作ってみましょう。
BLACKのSサイズ、WHITEのSサイズ、L.BLUEのSサイズ……とバリエーション数が増えます。
全部設定は面倒なので、一部だけ別の画像を入れてみるなど調整してください。 空欄の部分と表示に違いがあるかも確認できます。
検索結果
20：検索結果でのプレビュー、編集が可能です
検索結果では商品ページが、Googleなどの検索エンジンでどう表示されるか確認ができます。
ボックス右上の「編集」をクリックすると、以下3つを手動で設定可能。 * ページタイトル：商品ページのタイトル * メタディスクリプション：商品ページの概要 * URLハンドル：商品ページのURL
変更はリアルタイムでプレビューに反映されます。
ここまででメインカラムは終わり。 一旦保存しておきましょう。
右サイドバーの項目
上部にある商品のステータスでは、商品を公開するか、非公開（下書き）として置いておくかが選べます。販売チャンネルでは、SNSと連携などを行うと「この商品をどこで販売するか」を選択できるようになります。 インサイトは開発ストアの場合、ほとんど使わないです。
右側で最もよく使うのが商品管理のブロック。 タイプやタグなどを設定する部分です。
タイプ（検索タイプ）は商品カテゴリーのようなものです。 オーソドックスな商品カテゴリーは、Shopifyが用意している選択肢が使えます。 使いたいタイプがなかったり、全商品が同じタイプになってしまうような専門店だったりする場合は、カスタムタイプとして自分で作成することも可能です。
タグは商品のカテゴライズ、検索キーワードの追加など、より柔軟に活用できます。 ショップ運営者が管理しやすい、購入ユーザーが商品を探しやすいよう、設定していきましょう。タグは複数追加も可能です。
コレクションはのちほどレッスンで紹介します。 今は、そのままにしておいてください。
これで、商品登録画面ほぼすべての項目に入力が出来ました。 保存ボタンで保存し、できたページを見てみましょう。
STEP3.商品ページのプレビューを確認
商品登録ページの上部、右側にプレビューというリンク文字があります。 こちらをクリックして、商品ページのプレビューを見てみましょう。
プレビューが表示されます。 ECショップっぽい見た目ですね！
上記アニメーションのように、バリエーションを選ぶと「在庫数0の時は購入ボタンが使えない」「バリエーションで画像を登録していないと、色を切り替えてもメイン画像が切り替わらない」などの動きもわかりますね。
空の謎パーツは？
商品ページをスクロールダウンしていくと、以下のようなパーツが出てきます。 下図、オレンジ色の点線を引いているよりも下の部分です。
クリック/タップで開くようになっているMaterials（素材）などの部分は、開いてみても空欄になっています。その下のImage with text～のセクションも、ダミー感満載ですね。
これらのパーツは、テーマの方で設定します。 本講座の中で解説していますので、今はこのまま置いておいてください。