いまや米国のECサイトでAmazonについで2位となったShopify。
個人でECサイトを簡単に始められる！ということを聞いて早速作成してみました。
その時の始めた時の記録を本記事で記載しています。
すいみんWordPressを始めた時と同じ気持ちになりました。
Shopifyの始め方
まずはアカウントを登録して14日の無料体験を始めてみましょう！
実際のショップの開設の手順は下記の5つになります。
- テーマのカスタマイズ
- アプリ（拡張機能）のインストール
- 商品の追加
- ドメインの追加
- プランの支払いしてショップ開設
公式HPへアクセス
メールアドレスを入力して｢無料体験をはじめる｣ボタンを押しましょう。
14日間は無料でお試しできます。
ちなみに14日過ぎて支払いをしない場合は、凍結されるので注意しましょう。
支払い期限を過ぎた場合、または支払いが3回失敗した場合、Shopifyの決済が完了するまでストアは凍結されます。 ストアが凍結された場合、管理画面にアクセスできなくなり、お客様にストアが表示されなくなります。
必要な情報を入力しましょう。
- パスワード
- サイト名
- 仮のドメイン
サイト構築が自動で始まります。
その後にアンケートを記入しましょう。
あとはストアの情報を入力すれば、管理画面に移動できます。
管理画面を設定する前にまず入力したメールに｢メールアドレスを確認する｣というメールが届いてますので、メールを確認するボタンを押してメール認証しておきましょう。
管理画面の確認
管理画面は最初から日本語で表示されているのでわかりやすいです。
あとは有料のプランを選択しないとサイトは公開状態にはなりません。
まずは無料の14日間でECサイトを作成してしまいましょう。
テーマの選択
オンラインストアのアイコンを押してメニューを開き、テーマを選択しましょう。
テーマライブラリーに無料テーマを探すというボタンがありますので
今回は無料テーマSimpleを選択してみました。
すいみんテーマストアにも無料テーマがありますので、見てみることをおすすめします！
あとはテーマをメインに適応させましょう。
アクション>公開するを選択しましょう。
以上で、テーマの変更が完了です。
テーマのカスタマイズ
テーマからカスタマイズを選択して、編集画面に移動します。
テーマの編集画面に移動します。
最低限設定するべきことを書いておきます。
- ヘッダー > ロゴ
- セクションを追加する > コレクションを追加
- フッター > 後でプライバシーポリシー/利用規約/特定商取引法の項目を追加する
- テーマ設定 > ワイドレイアウトを有効する（※テーマによる）
- テーマ設定 > SNS
- テーマ設定 > ファビコン
すいみんこのカスタマイズ画面でサイトの見た目を作ります。
デザインの依頼があればデザノマへお問い合わください
アプリのインストール
Shopifyのアプリは拡張機能のようなもので、機能を拡張することができます。
今回はデジタルコンテンツをダウンロードできる機能を追加してみます。
まずShopifyのアプリストアにアクセスします。
Digital Downloads（無料）というアプリをダウンロードしましょう。
インストールするだけで機能が追加されます。
商品の追加
商品管理から商品を追加するボタンを押しましょう。
商品の情報を入力しましょう。
- タイトル（商品名）
- 説明（商品の説明）
- メディア（商品画像）
- 価格設定
- 商品タイプ（カテゴリー）の設定等
今回はデジタルコンテンツなのでダウンロードできるデータを入れます。
その他の操作から、先程入れたアプリ（Digital Downloads）を選択します。
アプリ管理メニューに移動するのでUPLOAD FILEボタンからデータをアップロードしましょう。
以上で商品の追加の完了です。
ドメインの設定
今回は元々所持しているドメインからサブドメインを作成してShopifyに割り当ててみます。
オンラインストアからドメインを選択、既存のドメインを接続するを選択しましょう。
追加したいサブドメインを入力します。
接続を確認してみましょう。
CNAMEが正しく入力されていませんと出ます。
契約しているサーバーのDNSの設定で下記の情報を追加してあげます。
- タイプ：
CNAME - 名称：
shop - TTL：
3600 - 値：
shops.myshopify.com.
もう一度確認するボタンを押しましょう。
ドメインが登録されました。15分くらい待つとSSLの設定も自動で完了します。以上で独自ドメインでのショップ作成が完了です。
その他の各種設定
オンラインストアから各種設定で設定するもの
- ショップのタイトル
- ショップのアイキャッチ
- GoogleアナリティクスのID
続いてShopifyの左下の設定ボタンを押します。
- 一般設定：個人情報の入力
- ファイル：ショップで使い画像が格納されています。
- 法務関連：プライバシーポリシー/利用規約/特定商取引法に基づく表記を入力しておきましょう
最後は一番下に表示されているプランを選択するボタンを押して、プランの支払いをすればショップを開設することができます。
すいみんあとは商品を追加して素敵なショップを作成していきましょう！
Shopifyのよくあるカスタマイズ
Shopifyのよくあるカスタマイズをまとめました。
日本語の文言を直したい
｢私たちをフォローする｣などSopifyの日本語は直訳すぎるので修正してあげます。
テーマのカスタマイズ > テーマアクション > 言語を編集する
から文言を変更できます。
日本語フォントを使いたい
Shopifyは英語フォントしかないので日本語の表示がいまいちです。
今回は游ゴシックに変更してみましょう。（Google Fontsは重いのでパスしました）
テーマの編集
オンラインストア > テーマ > カスタマイズマ > テーマアクション > コードを編集するを選択します。
フォントの指定
Assets > theme.scss.liquidを開きます。
このデータの一番下にCSSを追加で記述します。
Google Chromeを右クリック>検証を押します。
メニューが開き、左上の矢印アイコンを押して、調べたい要素をクリックします。
要素がハイライトされましたら、font-family要素を調べます。
日本語にしたい要素（CSSのクラス名）を調べましたらtheme.scss.liquidの一番下に記述します。
body, input, textarea, button, selec {
font-family: YuGothic,'Yu Gothic',sans-serif;
}
.grid-link__title{
font-family: YuGothic,'Yu Gothic',sans-serif;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: YuGothic,'Yu Gothic',sans-serif;
}
文字の表示の確認
ちゃんとフォントが変更されました！
Shopifyの始め方まとめ
本記事では｢Shopifyの始め方とサイト構築方法｣について書きました。
月額料金はかかるものShopifyは自分でECサイトを作ることができます！
本記事はコンテンツを販売する時に是非参考にしてみてください！
