Shopifyの始め方とサイト構築方法

メールアドレスを入力して｢無料体験をはじめる｣ボタンを押しましょう。

14日間は無料でお試しできます。

Shopify

ビジネスを開始し、成長させて、拡大する – Shopify オンラインビジネスや小売ビジネスを自分の思い通りに構築できます。どこでも販売でき、いつでもサポートが受けられます。初日でも1,000日目でも、Shopifyがすべてをカバー…

ちなみに14日過ぎて支払いをしない場合は、凍結されるので注意しましょう。

必要な情報を入力しましょう。

サイト構築が自動で始まります。

その後にアンケートを記入しましょう。

あとはストアの情報を入力すれば、管理画面に移動できます。

管理画面を設定する前にまず入力したメールに｢メールアドレスを確認する｣というメールが届いてますので、メールを確認するボタンを押してメール認証しておきましょう。

管理画面は最初から日本語で表示されているのでわかりやすいです。

あとは有料のプランを選択しないとサイトは公開状態にはなりません。

まずは無料の14日間でECサイトを作成してしまいましょう。

オンラインストアのアイコンを押してメニューを開き、テーマを選択しましょう。

テーマライブラリーに無料テーマを探すというボタンがありますので

今回は無料テーマSimpleを選択してみました。

すいみん

テーマストアにも無料テーマがありますので、見てみることをおすすめします！

あとはテーマをメインに適応させましょう。

アクション>公開するを選択しましょう。

以上で、テーマの変更が完了です。

テーマからカスタマイズを選択して、編集画面に移動します。

テーマの編集画面に移動します。

最低限設定するべきことを書いておきます。

すいみん

このカスタマイズ画面でサイトの見た目を作ります。
デザインの依頼があればデザノマへお問い合わください

あわせて読みたい

デザインやカスタマイズのご依頼お受けします［ブログ･LP･サイト］ ちょっとしたデザインをお願いするのは、どうしたら良いか迷いますよね？デザノマではサイトのデザインやカスタマイズのお手伝いをさせていただきます！ブログの見た目…

Shopifyのアプリは拡張機能のようなもので、機能を拡張することができます。

今回はデジタルコンテンツをダウンロードできる機能を追加してみます。

まずShopifyのアプリストアにアクセスします。

あわせて読みたい

Shopify アプリストア: Eコマースアプリマーケットプレイス Shopify アプリストアで無料/有料のEコマースプラグインをダウンロードして、ビジネスを成長させ、マーケティング、販売、SNS戦略を改善しましょう。

Digital Downloads（無料）というアプリをダウンロードしましょう。

あわせて読みたい

Digital Downloads| Shopify アプリストア Sell digital products in your store

インストールするだけで機能が追加されます。

商品管理から商品を追加するボタンを押しましょう。

商品の情報を入力しましょう。

今回はデジタルコンテンツなのでダウンロードできるデータを入れます。

その他の操作から、先程入れたアプリ（Digital Downloads）を選択します。

アプリ管理メニューに移動するのでUPLOAD FILEボタンからデータをアップロードしましょう。

以上で商品の追加の完了です。

今回は元々所持しているドメインからサブドメインを作成してShopifyに割り当ててみます。

前提として、先にサーバー側でサブドメインを作らないようにしておいてください。

オンラインストアからドメインを選択、既存のドメインを接続するを選択しましょう。

追加したいサブドメインを入力します。

接続を確認してみましょう。

CNAMEが正しく入力されていませんと出ます。

契約しているサーバーのDNSの設定で下記の情報を追加してあげます。

.comの後にドット（.）を必ず入れてください。

もう一度確認するボタンを押しましょう。

ドメインが登録されました。15分くらい待つとSSLの設定も自動で完了します。以上で独自ドメインでのショップ作成が完了です。

オンラインストアから各種設定で設定するもの

続いてShopifyの左下の設定ボタンを押します。

最後は一番下に表示されているプランを選択するボタンを押して、プランの支払いをすればショップを開設することができます。

すいみん

あとは商品を追加して素敵なショップを作成していきましょう！

オンラインストア > テーマ > カスタマイズマ > テーマアクション > コードを編集するを選択します。

Assets > theme.scss.liquidを開きます。

このデータの一番下にCSSを追加で記述します。

※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;
}

ちゃんとフォントが変更されました！