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

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

 

 

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

今回は

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

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

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

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

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

 

(ブラウザ環境などでGIFみれていない人、ごめんなさい)

わくわくしましたか??

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

ちなみにShopify登録はこちらからできます。

Shopify登録

 

Shopifyにアカウント登録する

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

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

shopify account register

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

 

shopify free account register

 

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

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

shopify about you

 

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

shopify address fill out screen

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

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

shopify account admin screen

 

Shopifyにドメインを接続する

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

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

 domain connect shopify

 

admin domain 管理画面 

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

domain connect shopify site

 

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

godaddy shopify partner domain

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

 

domain shopify godaddy

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

 

shopify account godaddy connect

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

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

shopify godaddy connect 

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

shopify godaddy almost done

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

shopify admin confirm domain

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

shopify confirming domain godaddy

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

domain confirmed by shopify

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

shopify domain 外部サービス

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

shopify godaddy domain connected 

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

godaddy shopify

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

shopify 外部サービス 承認

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

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

shopify admin online store

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

shopify admin store preview

 

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

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

 

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

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

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

shopify admin

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

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

shopify admin theme 一覧

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

 

TOP PAGEの内容を整える

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

shopify debut theme

 

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

セクション

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

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

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

shopify customize theme from admin

 

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

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

 

shopify demo store preview

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

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

shopify store customize image

 

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

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

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

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

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

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

大まかな流れ

 

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

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

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

 

 

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

 

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

 

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

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

 

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

 

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

今回は、最低限

  • About ページ
  • Privacy Policy ページ

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

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

 

shopify admin ページ

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

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

shopify adding page

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

 

add privacy policy page shopify

 

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

 

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

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

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

 

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

shopify menu modify

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

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

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

 

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

main menu modify shopify

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

shopify menu japanese to english

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

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

about page add to menu shopify

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

shopify menu added

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

shopify menu preview changed

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

footer shopify menu modified 

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

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

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

 

サイトに商品を登録する

 

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

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

 

商品を追加する

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

shopify 商品登録 管理画面

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

shopify 商品登録 商品追加

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

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

こんな感じになります。

shopify 商品登録 プレビュー

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

 

コレクションを設定する

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

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

Shopify debut テーマ カスタマイズ コレクション

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

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

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

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

コレクション  作成方法 Shopify

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

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

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

Shopify コレクション 作成 管理画面

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

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

shopify コレクション 画面適用 テーマ

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

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

特集コレクション Shopify テーマ

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

Shopify コレクション 反映済

ということは、、、、、

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

 

サイトを公開にする

 

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

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

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

Shopify サイト公開 管理画面

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

Shopify トライアル 無料期間

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

Shopify plan 選択

 

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

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

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

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

 

Shopify ストア 開設 完了

 

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

お疲れ様でした!!

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

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

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

もしよければTwitter(@ec_penguin_)にて、スクショとリンクを送ってください!サイトで紹介させていただくかも知れません!(被リンク獲得ですねw)

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

 

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら