Shopify テーマ作成 プログラミング

Shopifyでオリジナルテーマを作成しよう~No.2[開発環境のセット]~

この記事は約 8 分で読めます。

こんな方におすすめ

  • Shopifyでオリジナルテーマを作成したい
  • Shopifyのテーマををローカル環境で開発したい

このシリーズでは、Shopifyのオリジナルテーマを全15回で作成できるようにノウハウを提供しています。

Shopifyテーマをローカル環境で開発

まずはShopifyテーマをローカル環境で開発できるよう、セットしていきましょう。

ステップ0:Shopifyパートナーの登録

Shopifyパートナーに登録していない人はこちらから登録をお願いします

Shopifyパートナーとは無料でShopifyのテーマ開発、アプリ開発などを行えるものとなっています。

https://www.shopify.jp/partners

ステップ1:Shopifyストアの構築

Shopifyパートナーにログインできたら、「ストア管理」→「ストアを追加する」を選択します。

その後、ストアタイプで「開発ストア」を選択し、ストア名、URL、パスワード、目的、住所など、選択欄を満たします。

完了したら「保存」をクリックしてください。

ストアが作成されます。

ステップ2:APIキーの発効

アプリ(テーマ)を開発する上で開発をしても良い、という権限を取得する必要があります。

「アプリ開発」→「プライベートアプリを管理する」をクリックします。

「プライベートアプリの開発を有効にする」をクリックします。

同意を求められるので、良ければチェックボックスにチェックを入れて再度「プライベートアプリの開発を有効にする」をクリックします。

その後、「プライベートアプリを作成する」をクリックします。

まず、アプリの名前、メールアドレスを入力します。

その後、下の「Admin API」の部分まで移動して「非アクティブな・・・」をクリックしてください。

開いたメニューから「テーマ」を探し「読み取りおよび書き込み」を選択します。

完了したら保存をしてください。

すると、「Admin API」の部分にAPIキーやパスワードなどが発行されていると思います。

ここで出てきたパスワードは次に使うのでコピーなどしておいてください。

ステップ3:スターターテーマのインストール

Shopifyはデフォルトでスターターテーマを公開して、インストール可能な状態にしてくれています。

スターターテーマとは、必要なファイルがそろっているため、漏れがなく開発を行うことが出来ます。

(スケルトンテーマとも呼ばれたりしています)

インストール方法はShopify公式ドキュメントに書いてあります。

https://shopify.github.io/themekit/

Macの方は

brew tap shopify/shopify
brew install themekit

Windowsの方は

choco install themekit

でtheme kit というものをインストールしてください。

その後、バージョン確認でインストールされているか確認してください。

theme version

それでは、新しいテーマをインストールします

インストールするディレクトリに移動したら下記コマンドを実行してください

そのディレクトリにいろんなファイルが入るため中身が空のディレクトリに移動した方が良いです
(私の場合:Desktop\shopify-training←新規作成)
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
  • [your-password] : 先ほどのパスワード(Admin APIのところのもの)
  • [your-store.myshopify.com] : your-storeの部分に自分のショップの名前を入力(urlを見ると分かります)
  • [theme name] : テーマの名前を自由に決めます

※なお、[]の部分は必要ありません

インストールできたら「オンラインストア」→「テーマ」で自分の作成したテーマができているのが確認できると思います。

「アクション」→「公開する」で公開しましょう。

ステップ4:コードの変更をリアルタイムで反映させる

theme watch

とコマンドを打ち込むことでリアルタイムでの変更が可能になります。

ファイル・フォルダの役割を確認

assets

config

layout

locales

templates

config.yml

ディレクトリ構造はこのようになっていると思います。

簡単に説明をしていきます。

assets

assetsはお馴染み、cssファイルやjsファイルを入れるフォルダとなっています。

今回はassetsの中の「application.scss」にcssのコードを入れて編集していきます。

config

configフォルダには二つのファイルがあります

  • settings_data.json : カスタマイズしたデータを保存しておく場所になります。
  • settings_schema.json : 全体的なスキーマを設定する場所になります。(スキーマを編集することでカスタマイズが可能になります)

layout

layoutフォルダには「theme.liquid」ファイルがあります。

これはテーマの基準となるファイルで、<head>や<meta>などを設定します。header,footer,bodyにあたるものもここで読み込みます。

locales

言語の設定などを行うフォルダになります。(今回は使用しません)

templates

ページのテンプレートを入れるフォルダになります。

基本的にはデフォルトのファイルだけで大丈夫ですが、今回はこれに「about」「お問い合わせ」にあたるページを追加します。

config.yml

パスワードやAPIなどが記載されています

フォルダを追加

Shopifyのテーマ作成では、デフォルトのこれらのフォルダに加えて「sections」「snippets」フォルダを追加します

sections

sectionsフォルダはheaderやfooterといった様々なページで使われる部分を作成したファイルを入れます。

また、sections内のファイルではスキーマを設定できます。

snippets

snippetsはsectionsよりもさらに細かい部分を登録します。(パンくずリストなど)


まとめ

テーマのインストールはできましたか?

それぞれのフォルダは使っていく内になんとなく使用方法が分かってくると思うので、今は完璧に理解していなくても大丈夫です!

それでは、次回からコードを触っていきましょう!

ページ一覧

全体像の確認

https://agata-code.com/programming/original-no1/

開発環境のセット

https://agata-code.com/programming/original-no2/

ヘッダーの作成

https://agata-code.com/programming/original-no3/

フッターの作成

https://agata-code.com/programming/original-no4/

トップページの作成

https://agata-code.com/programming/original-no5/

Aboutページの作成

https://agata-code.com/programming/original-no6/

お問い合わせフォームの作成

https://agata-code.com/programming/original-no7/

コレクションページの作成

https://agata-code.com/programming/original-no8/

個別商品ページの作成

https://agata-code.com/programming/original-no9/

カートページの作成

https://agata-code.com/programming/original-no10/

ブログの作成

https://agata-code.com/programming/original-no11/

ログイン機能の実施

https://agata-code.com/programming/original-no12/

-Shopify, テーマ作成, プログラミング

© 2021 AGATA CODE Powered by AFFINGER5