こんにちは、Shopify大好きマンのECペンギンです!
今回は
- Shopify気になっている!けど始め方わからない。。
- 開設したけど、途中でつまづいた
- これから始めるけど、具体的な手順がわからない。
って人向けに、画像付きでShopifyでECサイトの始め方をお伝えします。
まず登録はめちゃくちゃ簡単です。5秒で終わります笑
しかし、いざ登録してもドメインの接続方法や商品登録など、色々なハードルがあり、途中で挫折者が出てきそうでしたので、こちらの記事を書くことにいたしました。
この記事通りに最後まで進めていけば、Shopifyを使ったECサイトが完成しているはずです!(ちなみにGIFなので画質荒いですが、こんな感じ。)
(ブラウザ環境などでGIFみれていない人、ごめんなさい)
わくわくしましたか??
ちょっと長いですが、一緒に頑張りましょう!!
ちなみにShopify登録はこちらからできます。
Shopifyにアカウント登録する
それでは、まずShopifyにアクセスしましょう。
2020年5月時点では、こんな画面でしたが多少変わっているかもしれません。イケメンのお兄さんにお出迎えされました。
メールアドレスを入力し、『無料登録をはじめる』をクリックします。
キャンペーン中で90日間の無料体験期間でしたが、一般的には14日間となっています。ストア名とストアURLは適当で大丈夫です。
ここら辺もパパッと記入。
住所は大事なので、ちゃんと記入しましょう笑
これで、Shopifyへの登録は完了です!簡単でしたね。
ちなみに登録完了後の下記画面が『管理画面』となっています。
Shopifyにドメインを接続する
次にカスタムドメインをセットアップしていきます。
もしまだドメインを取得していないのであれば、GoDaddyというサイトがおすすめです。Shopifyと連携していて、ドメイン接続の手間が大幅に省けます。
既存のドメインを接続するを押します。
ここでGo Daddyの管理ページに移動します。
セットアップを選択します。
既存のサイトに接続をクリック。
こんなにたくさんのサービスに自動で接続できるんですね。超便利。
もちろん選ぶのは、下の方のShopifyです!
ドメインを接続をクリック。
上記の画面が出たら、Shopifyの管理画面に戻り、接続を確認するを押します。
するとこんな画面が出てくるので、少々待ちます。
こちらが完了すると、プライマリードメインの部分で接続済みになりました!
ですが、下の方の外部サービスのドメインという部分がまだ接続されていませんでしたので、こちらも接続します。『接続を再施行する』をクリックしましょう。
GoDaddyはなんと、自動で接続してくれます。ほんとShopify使うならGoDaddyが相性抜群ですね。
すると、このようなウィンドウがポップアップされますので、『接続』をクリックしましょう。
ちゃんとポップアップウィンドウの『閉じる』ボタンを押しましょう。でないと、処理中のまま動きませんでした。※知らなくて、5分くらい待ちました笑
これで成功です!! 外部サービスのドメインが連携されました。
※すぐには反映されないようで、ドメイン接続まで最大24時間くらいかかるみたいです。少したったら、管理画面の『オンラインストア』の横にある目マークをクリックしましょう。(サイトのプレビューがみれます。)
こんな画面が出てくれば成功です!
これがShopifyのデフォルト画面になります!
これにて、ドメイン接続、ECストアの開設が完了しました。これであなたもECサイトオーナーです!これからサイトのデザインや、商品登録などに進みますが結構ボリュームが多いので、休憩しながら自分のペースで進んで行ってくださいね ( ・∇・)
作ったECサイトのデザインを整える
それでは、作成したECサイトのデザインを整えていきます。
まず管理画面から『販売チャネル』→『オンラインストア』→『テーマ』をクリックします。
デフォルトのテーマは Debut というテーマです。
今回はこちらのDebutテーマをカスタマイズしていきますが、有料テーマや他の無料テーマが気になる人は、下部にあるShopifyテーマストアをクリックし自分の好みにあった物を探してみてください。
しかし、どのようなテーマを選んでも、基本的な操作方法は同じですのでご安心ください。(1回このガイド通りにデフォルトのDebutテーマで進めてみて、慣れたら他テーマに変更・購入することをお勧めします。)
TOP PAGEの内容を整える
それでは、さっそくDebutの青色ボタン『カスタマイズ』を押してTOP PAGEのコンテンツを編集していきましょう。
この左の『セクション』という部分、そして、『テーマ設定』という部分でカスタマイズしていきます。
セクション
- テキストオーバー
- テキスト付き画像
- 画像付きテキスト例
- 特集コレクション
- お客様の声
- ギャラリー etc
こちらの一つ一つをセクションと呼びます。
例えば、一番最初のセクションである “テキストオーバーレイ付き画像” をクリックすると、このように内容を編集することができます。
ちなみに、画像選択部分で “無料の画像を探す” をクリックすると、無料素材一覧から画像を選べます。(この無料画像一覧はクオリティがだいぶ高いです。)
今回は、画像、見出し、テキストを編集してみました。
HTMLやCSSを触ることなく、ここまで簡単にサイトを編集できるのはShopify最大の強みですね!
セクションの横にある目ボタンで、各セクションを表示 / 非表示 にすることができます。また、一番下のセクションを追加から、新たなセクションを追加することも可能になっています。
ここまでで、セクションの大まかな使い方はご理解いただけたかと思います。
======EC PENGUIN の例=======
それでは、事例として、EC PENGUINのテストECサイトの場合です。
今回僕が使用したセクションは、
- スライドショー
- テキスト付き画像
- テキスト付き画像
- テキスト付き画像
- 特集コレクション
- テキストオーバーレイ付き画像
です。画像は全て無料画像から選びました。
大まかな流れ
いらないセクションを消去
(セクションを選択して消去ボタンを押す)
↓
セクションを追加ボタンから必要なセクションを追加
↓
各セクションの内容を編集
(画像やテキスト、配置など)
ざっとこのようなデザインになります。(画質荒いです。)
こんな高クオリティのサイトが10分くらいでできちゃいました。すごい。。
デザインが整ったらちゃんと右上の保存ボタンを押しましょう。押さずに戻ると変更点が反映されないどころか、消えますのでご注意を。
AboutとPrivacy Policyページを作成する
次に、必要なページを作成していきましょう。
今回は、最低限
- About ページ
- Privacy Policy ページ
があった方が良いと思うので、上記2ページを作成していきます。
基本的にShopifyで新規ページを作成する際は、管理画面の『ページ』から作成します。(カスタマイズ画面の方は、左上のShopifyロゴをクリックし、管理画面に戻りましょう)
『オンラインストア』→『ページ』→『ページを追加』を押します。
取り急ぎページのみ作成し、中身はあとで充実させましょう。
同様に、Privacy Policyのページも作成しましょう。
これで、新規ページの作成が終わりました。まだ他にも、必要なページがあれば中身はあとでも良いので、ページだけ作成しちゃいましょう。
ヘッダー、フッターの設定
それでは、デザインの最後に全ページ共通となるヘッダーとフッターの設定です。
だいぶデザインが整ってきたので、楽しくなってきましたか?自分のECサイトが着々とできてきています。わくわくですね!
ヘッダー、フッターの設定は、管理画面から行います。
『オンラインストア』→『メニュー』から、
- メインメニュー(ヘッダー)
- フッターメニュー(フッター)
をそれぞれ編集していきます。
メインメニューをクリックし、変更した項目の編集を押します。
すると、項目の名前とリンク先の編集ができます。今回は、英語の方がかっこよかったので、どちらも英語表記に直しました。リンク先は変えていません。
ちなみにリンク先は、クリックしてみると分かりますが、ドロップダウンメニュー方式ですので、簡単に設定できます!
先ほど追加したページもメニューに加えてみましょう。
これで追加を押して保存すると
ちゃんとヘッダーにAboutが追加されました!
同様に、フッターメニューにもAboutとPrivacy Policyを追加します。
すると、こんな感じで反映できました。(カスタマイズ画面からニュースレターを消去したり、テキストをいじったりもできます。)
これで一通りサイトのデザインが完成しました!
残るは商品登録のみです!
サイトに商品を登録する
みなさま、、、お疲れ様です!!
ここまで長い道のりでしたがもうすぐです。パパッと商品を登録して、完成させちゃいましょう!!
商品を追加する
それでは管理画面に戻り『商品管理』→『商品を追加する』をクリックします。
商品を追加できたら、商品情報を追記していきます。
最低限下記部分は編集するようにしましょう。
- タイトル (商品名)
- 説明 (商品下の説明詳細部分)
- 分類 (カテゴリー)
- メディア (商品画像)
- 価格
- 在庫数量
こんな感じになります。
試しに4商品くらい登録してみましょう。
コレクションを設定する
これで一通り、ECサイトの設定は終わりました。
しかし、トップページの特集コレクション部分がまだ空欄になっています。
これだと、まだサイトを公開できませんね。
ちなみにコレクションは、複数商品のまとまりで、例えばファッションストアだったら、「春物コレクション」として春物アイテムを複数追加し、トップページに追加することができるのです。これは結構便利機能です!
なのでコレクションを設定していきます。
まず『管理画面』→『コレクション』→『コレクションを作成する』を押します。
今回はタイトルを “おすすめコレクション” として、コレクションの種類を「手動」に設定します。
手動 → 自分で商品を追加する
自動 → 条件を設定し、その条件にあった商品が自動で追加される
では、右上の保存ボタンを押しましょう。
保存すると、下の方に商品追加欄が出てくるので、ここで商品を検索し、コレクションに追加していきます。
僕は、これらの商品を追加しました。(4商品すべて複製ですが、、)
これで、”おすすめコレクション”という名前のコレクションが作成できました! さっそくトップページに表示させましょう。
『カスタマイズ』 → 『特集コレクション』を選択し、『Select Collection』ボタンを押して、先ほど作った”おすすめコレクション”を追加しましょう。
これで保存ボタンを押すとこんな感じでコレクションが反映されました!
ということは、、、、、
おめでとうございます!!これであなたの、あなただけのECサイトの枠組みが完成しました!!
サイトを公開にする
現状、ストアは『パスワード付き限定公開』になっており、一般ユーザーが見れない設定になっています。
なので、サイトを公開する設定をしてしまいましょう!
『カスタマイズ』→『オンラインストア』→『各種設定』をクリックします。その下の方にパスワード保護という項目があります
無料体験期間中ですと、プラン選択が必要ですので「プランを選ぶ」を押します。(無料期間中にキャンセルすれば請求は発生しないのでご安心ください!)
めちゃくちゃ大企業とかじゃない限り、基本的には一番下のBasic Shopifyプランで大丈夫です。このプランを選択するをクリック。
クレジットカード情報を入力し、プランを開始するをクリック。
プランの選択が完了したら、先ほどの各種設定のパスワード保護の項目に戻り、『パスワードを有効にする』というチェックを外します。
そして、保存を押すと、、、
あなたのECサイトがライブになりました。これで、誰でも閲覧できるようになりました!
Shopifyのストア開設完全ガイド まとめ
お疲れ様でした!!
だいぶ長めの記事でしたが、つまづくことが無いように丁寧に解説したつもりです。大丈夫でしたでしょうか。
なにはともあれ、これであなたもShopifyのECストアオーナーです!!
あなたのECサイトはどんな見た目になりましたか?
もしよければTwitter(@ec_penguin_)にて、スクショとリンクを送ってください!サイトで紹介させていただくかも知れません!(被リンク獲得ですねw)
皆さんのECサイトを見れるのを楽しみにしています。