Shopify

[Shopify]ECサイト開設方法から販売まで【53枚のスクショ画像で完全ガイド】

Shopify ストア 完全ガイド アイキャッチ

こんにちは、Shopify大好きマンのECペンギンです!

今回は

  • Shopify気になっている!けど始め方わからない。。
  • 開設したけど、途中でつまづいた
  • これから始めるけど、具体的な手順がわからない。

って人向けに、画像付きでShopifyでECサイトの始め方をお伝えします。

まず登録はめちゃくちゃ簡単です。5秒で終わります笑

しかし、いざ登録してもドメインの接続方法や商品登録など、色々なハードルがあり、途中で挫折者が出てきそうでしたので、こちらの記事を書くことにいたしました。

この記事通りに最後まで進めていけば、Shopifyを使ったECサイトが完成しているはずです!(ちなみにGIFなので画質荒いですが、こんな感じ。)

Shopify ECサイト 完成図 イメージ

わくわくしましたか??

ちょっと長いですが、一緒に頑張りましょう!!

Shopifyにアカウント登録する

それでは、まずShopifyにアクセスしましょう。

2020年5月時点では、こんな画面でしたが多少変わっているかもしれません。イケメンのお兄さんにお出迎えされました。

Shopify 開設画面 ECサイト

メールアドレスを入力し、『無料登録をはじめる』をクリックします。

Shopify 開設画面 無料登録

キャンペーン中で90日間の無料体験期間でしたが、一般的には14日間となっています。ストア名とストアURLは適当で大丈夫です。

ここら辺もパパッと記入。

Shopify 開設画面 ユーザー情報

住所は大事なので、ちゃんと記入しましょう笑

Shopify 開設画面 ストアの情報

これで、Shopifyへの登録は完了です!簡単でしたね。

ちなみに登録完了後の下記画面が『管理画面』となっています。

Shopify 開設画面 完了画面

Shopifyにドメインを接続する

次にカスタムドメインをセットアップしていきます。

もしまだドメインを取得していないのであれば、GoDaddyというサイトがおすすめです。Shopifyと連携していて、ドメイン接続の手間が大幅に省けます。

Shopify 管理画面 ドメイン接続方法

Shopify 管理画面 ドメイン管理画面

既存のドメインを接続するを押します。

Shopify 管理画面 既存ドメイン 接続方法

ここでGo Daddyの管理ページに移動します。

GoDaddy ドメイン管理画面

セットアップを選択します。

GoDaddy ドメイン 管理 選択

既存のサイトに接続をクリック。

GoDaddy 送信先 ドメイン Shopify

こんなにたくさんのサービスに自動で接続できるんですね。超便利。

もちろん選ぶのは、下の方のShopifyです!

GoDaddy ドメイン接続

ドメインを接続をクリック。

GoDaddy ドメイン接続 待機画面

上記の画面が出たら、Shopifyの管理画面に戻り、接続を確認するを押します。

Shopify 管理画面 接続を確認

するとこんな画面が出てくるので、少々待ちます。

Shopify 管理画面 ドメインの接続 既存

こちらが完了すると、プライマリードメインの部分で接続済みになりました!

Shopify 管理画面 ドメイン 接続 正常 完了
Shopify 管理画面 外部サービスのドメイン 設定

ですが、下の方の外部サービスのドメインという部分がまだ接続されていませんでしたので、こちらも接続します。『接続を再施行する』をクリックしましょう。

Shopify 管理画面 ドメイン GoDaddy 接続

GoDaddyはなんと、自動で接続してくれます。ほんとShopify使うならGoDaddyが相性抜群ですね。

GoDaddy 接続 DNSレコード

すると、このようなウィンドウがポップアップされますので、『接続』をクリックしましょう。

GoDaddy の接続画面

ちゃんとポップアップウィンドウの『閉じる』ボタンを押しましょう。でないと、処理中のまま動きませんでした。※知らなくて、5分くらい待ちました笑

Shopify 管理画面 外部サービスのドメイン 連携

これで成功です!! 外部サービスのドメインが連携されました。

※すぐには反映されないようで、ドメイン接続まで最大24時間くらいかかるみたいです。少したったら、管理画面の『オンラインストア』の横にある目マークをクリックしましょう。(サイトのプレビューがみれます。)

Shopify 管理画面 オンラインストア プレビュー

こんな画面が出てくれば成功です!

Shopify EC サイト プレビュー EC PENGUIN

これがShopifyのデフォルト画面になります!

これにて、ドメイン接続、ECストアの開設が完了しました。これであなたもECサイトオーナーです!これからサイトのデザインや、商品登録などに進みますが結構ボリュームが多いので、休憩しながら自分のペースで進んで行ってくださいね ( ・∇・)

作ったECサイトのデザインを整える

それでは、作成したECサイトのデザインを整えていきます。

まず管理画面から『販売チャネル』→『オンラインストア』→『テーマ』をクリックします。

Shopify 管理画面 テーマ一覧

デフォルトのテーマは Debut というテーマです。

今回はこちらのDebutテーマをカスタマイズしていきますが、有料テーマや他の無料テーマが気になる人は、下部にあるShopifyテーマストアをクリックし自分の好みにあった物を探してみてください。

Shopify 管理画面 無料テーマ テーマストア

しかし、どのようなテーマを選んでも、基本的な操作方法は同じですのでご安心ください。(1回このガイド通りにデフォルトのDebutテーマで進めてみて、慣れたら他テーマに変更・購入することをお勧めします。)

TOP PAGEの内容を整える

それでは、さっそくDebutの青色ボタン『カスタマイズ』を押してTOP PAGEのコンテンツを編集していきましょう。

Shopify 管理画面 カスタマイズ テーマ Debut

この左の『セクション』という部分、そして、『テーマ設定』という部分でカスタマイズしていきます。

セクション

  • テキストオーバー
  • テキスト付き画像
  • 画像付きテキスト例
  • 特集コレクション
  • お客様の声
  • ギャラリー etc

こちらの一つ一つをセクションと呼びます。

例えば、一番最初のセクションである “テキストオーバーレイ付き画像” をクリックすると、このように内容を編集することができます。

Shopify 管理画面 カスタマイズ セクション

ちなみに、画像選択部分で “無料の画像を探す” をクリックすると、無料素材一覧から画像を選べます。(この無料画像一覧はクオリティがだいぶ高いです。)

今回は、画像、見出し、テキストを編集してみました。

Shopify 管理画面 カスタマイズ 画像編集 セクション

HTMLやCSSを触ることなく、ここまで簡単にサイトを編集できるのはShopify最大の強みですね!

セクションの横にある目ボタンで、各セクションを表示 / 非表示 にすることができます。また、一番下のセクションを追加から、新たなセクションを追加することも可能になっています。

Shopify 管理画面 カスタマイズ セクションの説明

ここまでで、セクションの大まかな使い方はご理解いただけたかと思います。

======EC PENGUIN の例=======

それでは、事例として、EC PENGUINのテストECサイトの場合です。

今回僕が使用したセクションは、

  • スライドショー
  • テキスト付き画像
  • テキスト付き画像
  • テキスト付き画像
  • 特集コレクション
  • テキストオーバーレイ付き画像

です。画像は全て無料画像から選びました。

大まかな流れ

いらないセクションを消去
(セクションを選択して消去ボタンを押す)

セクションを追加ボタンから必要なセクションを追加

各セクションの内容を編集
(画像やテキスト、配置など)

ざっとこのようなデザインになります。(画質荒いです。)

Shopify 全体の流れ プレビュー GIF

こんな高クオリティのサイトが10分くらいでできちゃいました。すごい。。

デザインが整ったらちゃんと右上の保存ボタンを押しましょう。押さずに戻ると変更点が反映されないどころか、消えますのでご注意を。

AboutとPrivacy Policyページを作成する

次に、必要なページを作成していきましょう。

今回は、最低限

  • About ページ
  • Privacy Policy ページ

があった方が良いと思うので、上記2ページを作成していきます。

基本的にShopifyで新規ページを作成する際は、管理画面の『ページ』から作成します。(カスタマイズ画面の方は、左上のShopifyロゴをクリックし、管理画面に戻りましょう)

Shopify 管理画面 ページ作成 方法

『オンラインストア』→『ページ』→『ページを追加』を押します。

取り急ぎページのみ作成し、中身はあとで充実させましょう。

Shopify 管理画面 About ページ 作成

同様に、Privacy Policyのページも作成しましょう。

Shopify 管理画面 Privacy Policy ページ 作成

これで、新規ページの作成が終わりました。まだ他にも、必要なページがあれば中身はあとでも良いので、ページだけ作成しちゃいましょう。

ヘッダー、フッターの設定

それでは、デザインの最後に全ページ共通となるヘッダーとフッターの設定です。

だいぶデザインが整ってきたので、楽しくなってきましたか?自分のECサイトが着々とできてきています。わくわくですね!

ヘッダー、フッターの設定は、管理画面から行います。

Shopify 管理画面 ヘッダー フッター 設定

『オンラインストア』→『メニュー』から、

  • メインメニュー(ヘッダー)
  • フッターメニュー(フッター)

をそれぞれ編集していきます。

メインメニューをクリックし、変更した項目の編集を押します。

Shopify 管理画面 メインメニュー 設定 

すると、項目の名前とリンク先の編集ができます。今回は、英語の方がかっこよかったので、どちらも英語表記に直しました。リンク先は変えていません。

Shopify 管理画面 メインメニュー 項目 設定

ちなみにリンク先は、クリックしてみると分かりますが、ドロップダウンメニュー方式ですので、簡単に設定できます!

先ほど追加したページもメニューに加えてみましょう。

Shopify 管理画面 メインメニュー ページ リンク 追加

これで追加を押して保存すると

Shopify 管理画面 メインメニュー 編集 完了

ちゃんとヘッダーにAboutが追加されました!

Shopify EC テストサイト プレビュー

同様に、フッターメニューにもAboutとPrivacy Policyを追加します。

Shopify テストサイト フッター プレビュー

すると、こんな感じで反映できました。(カスタマイズ画面からニュースレターを消去したり、テキストをいじったりもできます。)

これで一通りサイトのデザインが完成しました!

残るは商品登録のみです!

サイトに商品を登録する

みなさま、、、お疲れ様です!!

ここまで長い道のりでしたがもうすぐです。パパッと商品を登録して、完成させちゃいましょう!!

商品を追加する

それでは管理画面に戻り『商品管理』→『商品を追加する』をクリックします。

Shopify 管理画面 商品登録 方法

商品を追加できたら、商品情報を追記していきます。

Shopify 管理画面 商品を追加する 方法 説明

最低限下記部分は編集するようにしましょう。

  • タイトル (商品名)
  • 説明 (商品下の説明詳細部分)
  • 分類 (カテゴリー)
  • メディア (商品画像)
  • 価格
  • 在庫数量

こんな感じになります。

Shopify 管理画面 商品を追加する 商品登録 プレビュー

試しに4商品くらい登録してみましょう。

コレクションを設定する

これで一通り、ECサイトの設定は終わりました。

しかし、トップページの特集コレクション部分がまだ空欄になっています。

Shopify 管理画面 コレクション 追加方法

これだと、まだサイトを公開できませんね。

ちなみにコレクションは、複数商品のまとまりで、例えばファッションストアだったら、「春物コレクション」として春物アイテムを複数追加し、トップページに追加することができるのです。これは結構便利機能です!

なのでコレクションを設定していきます。

まず『管理画面』→『コレクション』→『コレクションを作成する』を押します。

Shopify 管理画面 コレクション タイトル 設定方法

今回はタイトルを “おすすめコレクション” として、コレクションの種類を「手動」に設定します。

手動 → 自分で商品を追加する
自動 → 条件を設定し、その条件にあった商品が自動で追加される

では、右上の保存ボタンを押しましょう。

Shopify 管理画面 コレクション 完了

保存すると、下の方に商品追加欄が出てくるので、ここで商品を検索し、コレクションに追加していきます。

僕は、これらの商品を追加しました。(4商品すべて複製ですが、、)

Shopify 管理画面 コレクション 並べ替え 商品追加

これで、”おすすめコレクション”という名前のコレクションが作成できました! さっそくトップページに表示させましょう。

『カスタマイズ』 → 『特集コレクション』を選択し、『Select Collection』ボタンを押して、先ほど作った”おすすめコレクション”を追加しましょう。

Shopify 管理画面 コレクション セクション 追加

これで保存ボタンを押すとこんな感じでコレクションが反映されました!

Shopify 管理画面 特集コレクション プレビュー

ということは、、、、、

おめでとうございます!!これであなたの、あなただけのECサイトの枠組みが完成しました!!

サイトを公開にする

現状、ストアは『パスワード付き限定公開』になっており、一般ユーザーが見れない設定になっています。

なので、サイトを公開する設定をしてしまいましょう!

『カスタマイズ』→『オンラインストア』→『各種設定』をクリックします。その下の方にパスワード保護という項目があります

Shopify 管理画面 サイト公開 開設完了

無料体験期間中ですと、プラン選択が必要ですので「プランを選ぶ」を押します。(無料期間中にキャンセルすれば請求は発生しないのでご安心ください!)

Shopify 管理画面 プラン選択 

めちゃくちゃ大企業とかじゃない限り、基本的には一番下のBasic Shopifyプランで大丈夫です。このプランを選択するをクリック。

Shopify 管理画面 プラン選択 確定

クレジットカード情報を入力し、プランを開始するをクリック。

プランの選択が完了したら、先ほどの各種設定のパスワード保護の項目に戻り、『パスワードを有効にする』というチェックを外します。

そして、保存を押すと、、、

あなたのECサイトがライブになりました。これで、誰でも閲覧できるようになりました!

Shopify テストサイト プレビュー 完成 開設

Shopifyのストア開設完全ガイド まとめ

お疲れ様でした!!

だいぶ長めの記事でしたが、つまづくことが無いように丁寧に解説したつもりです。大丈夫でしたでしょうか。

なにはともあれ、これであなたもShopifyのECストアオーナーです!!

あなたのECサイトはどんな見た目になりましたか?

もしよければコメントにて、スクショとリンクを貼っていってください!(被リンク1つ獲得ですよ笑)

皆さんのECサイトを見れるのを楽しみにしています。