Lancersで現役エンジニアに相談してみよう!

【図解】Shopifyに自社サイトのサブドメインを設定する方法

「自社で新しくECサイトを立ち上げるためにShopifyを使いたい。既存のホームページと関連性を持たせたいから、サブドメインで運用を考えているんだけど具体的にどうすればいいんだ?」

 

こんな方に向けて、この記事では「現在運用しているホームページのサブドメインを使ってShopifyを設定する方法・手順」を解説します。

 

この記事を書いた人
ペガロー
↪︎運営者情報

福岡にオフィスを構えるフリーランスエンジニア。WordPress/Shopifyを利用したホームページ/ECサイト制作が得意。

ブログ&Twitterを通して、中小企業向けのWebビジネスに関するお役立ち情報を発信中。

 

【注意】ドメイン会社の管理画面は触らなくてOK

 

基本的な流れは以下の通り。

サブドメインをShopifyに設定する流れ
  • 利用中のサーバー会社でサブドメインを取得
  • ↑ のサーバー会社の管理画面からDNS設定を変更
  • Shopifyの管理画面にて、取得したサブドメインを連携

 

僕はここでかなりハマりましたが、基本的に大元のドメインを取得した会社(お名前.com・バリュードメインなど)にログインして何か操作する必要はありません。

 

『サブドメインを外部サービスと連携させるための手続き』は、ドメイン会社ではなく、サーバー会社の管理画面から行う必要があるからです。

 

【参考】ややこしいのですが、大元のドメインと外部サービスを連携させる場合は、ドメイン会社の管理画面から操作する必要があります。『サブドメインはサーバー会社で取得したもの』だと思えば、分かりやすいかと。

 

ここからは、実際にサブドメイン取得〜Shopifyで表示できるようになるまでの流れを解説していきます。

 

【実例】既存サイトのサブドメインをShopifyに設定してみる

こんな感じの条件で、実際に設定してみます。

ドメイン会社 お名前.com
レンタルサーバー エックスサーバー
現在のドメイン pegaro.site(WordPressで運用中)
サブドメイン store.pegaro.site

 

上述していますが、Shopifyをサブドメインで運用する場合は、ドメイン会社の管理画面を触る必要はありません。

 

操作するのは、あくまでサーバー会社の管理画面です。

サブドメインをShopifyに設定する流れ
  • 利用中のサーバー会社でサブドメインを取得
  • ↑ のサーバー会社の管理画面からDNS設定を変更
  • Shopifyの管理画面にて、取得したサブドメインを連携

 

それでは、順番に解説していきます。

 

①利用中のサーバー会社でサブドメインを取得

すでにサブドメインを取得している方には不要な手順です。下の②までスクロールしてください。

まずは、エックスサーバーのサーバーパネルにログインして、画面右上の「サブドメイン設定」を選んでください。

 

サブドメインを設定したいドメインを選択してください。

 

画像①〜④の通りに情報を入力してください。②の部分がサブドメインになるので、間違えないように慎重に入力しましょう。

 

確認画面が表示されるので、確認して間違いがなければ「追加する」を選択してください。

※すみません、僕の入力ミスで「store」→「stores」となっていますが、各自で読み替えて頂ければと思いますm(__)m

 

「サブドメイン設定一覧」タブを選んでみて、画像のように「反映待ち」が表示されていればOKです。

 

以上で、サブドメインの取得が完了しました。「反映待ち」が消えるまで30分くらいかかるので、その間に残りの手続きを済ませてしまいましょう。

 

②サーバー会社の管理画面からDNSの設定を変更

サーバー画面に戻り、「DNSレコード設定」を選んでください。

 

サブドメインを設定したドメインを選択してください。

 

画像①〜⑤の通りに情報を入力してください。⑤はこれをコピペすれば楽だと思います↓↓

⑤に入力する情報 23.227.38.65

 

確認画面が表示されるので、間違いがなければ「追加する」を選択します。

 

再び、画像①の「DNSレコード追加」タブを選び、②〜⑥の通りに情報を入力し、⑦の「確認画面へ進む」を選びます。⑤はこれをコピペしましょう↓↓

⑤に入力する情報 shops.myshopify.com

 

確認画面が表示されるので、間違いがなければ「追加する」を選択します。

 

お疲れ様です。「DNSレコード一覧」のタブを選んで、上の画像のように、先ほど追加した2つの項目が反映されていればOKです ^^

 

以上で、エックスサーバー側での手続きは完了しました。あとはShopify側の設定ですが、こちらは非常に簡単なので2~3分で終わるかと思います。

 

③Shopify管理画面で、取得したサブドメインを連携

shopifyの管理画面に移動し、画像の①〜③の順番で進めてください。

まだアカウントを作っていない方は、この記事で作り方を解説しています↓↓
↪︎Shopifyを利用したECサイトの作り方と使い方
【認定パートナーが伝授】Shopifyを利用したECサイトの作り方と使い方

 

「既存のドメインを接続する」をクリックします。

 

①の赤枠内に、作成したサブドメインを入力して「次へ」を選択します。

 

赤枠の「接続を確認する」をクリックします。

 

接続中の画面が切り替わり、上の画像のような画面が表示されれば、完了です!

サイドバー「オンラインストア」右側の「」をクリックすれば、サイトが見れる筈です。

※真っ白な画面に「無効なURLです」と表示される場合は、数分〜1時間程度待った後にもう一度確認してみましょう。

 

【参考にしたサイト】

参考 外部サービスのドメインに接続するShopifyヘルプセンター 参考 意外と簡単?エックスサーバーで取得したドメインからShopifyに移行・移管する方法【アピロス】