2020.7.10

【Shopify】仕様や用語、開発の流れの解説 - #03

前回の記事では、Shopifyの無料テーマのディレクトリ構造の解説をしました。

今回は、Shopify独自の仕様や用語について解説してきます。

 

また、私はこれまでWordPressをよく触っていたので、解説の際にWordPressで例えることがしばしばあるのでご了承ください...。

 

■バックナンバー

Shopify独自の用語

Shopifyの管理画面やサイト、解説記事などを見ていると、あまり聞き慣れない用語が出てきます。

ややこしい用語もあるので、最低限これだけ理解していれば大丈夫!というのをまとめました。

 

用語名解説
カタログ商品の一覧のこと。
カタログページ=商品一覧ページ
コレクション商品のカテゴリーのこと。
コレクションページ=カテゴリーページ
所属商品のタグのこと。
カテゴリーより更に細かい情報を設定したい時に使用する。
プロダクト商品自体を指す。
カタカナでプロダクトと表記されることは少ないですが、アルファベットで「product」と表記される場合が多いです。
プロダクトページ=商品詳細ページ
アプリShopifyのサイトに機能を追加できる拡張機能。
WordPressでいうプラグイン。
ストアShopifyのサイトのこと。
チェックアウト商品の「購入」という意味。

 

開発の流れ

これまでの記事(前回の#1, #2を含む)を読んでいれば、ローカルに開発環境を構築する方法やShopifyについての基本的な知識は得られたと思います。

 

この項では、Shopifyで開発する主な流れを解説していきます。

とはいえ、開発の流れは至ってシンプルです。

 

  1. ローカルのテーマファイルのディレクトリにターミナルで移動
  2. theme watchコマンドを実行
  3. テーマ内のファイルを編集(場合に応じて管理画面からも設定など編集する)
  4. watchしているので、編集して保存したファイルがサイトに反映される
  5. サイトで表示確認
  6. 以後、3〜5の繰り返し

これだけです。

 

theme watchをしなければ、サイト上には反映されません。

theme watchだと編集した全てのファイルが反映されてしまうので、任意のファイルのみ反映させたい場合は、theme build ファイル名というコマンドを使用しましょう。

 

また、以前の記事でも軽く解説しましたが、Shopifyにはローカル環境という概念がなく、ファイルを編集したら本番の環境に反映されます。

 

本番環境、開発環境の切り分けをどうするかはこちらの記事で解説されています。

Shopifyテスト環境の構築方法。複製テーマおよび開発用ストアへのインポート手順まで | non-standard world株式会社
こんにちは、エンジニアの川島です。 Shopifyテーマ開発を行うにあたって、必要不可欠なのがテスト環境です。 Shopifyは(WordPressなどと異なり)ローカルサーバーを構築できないため、開

まとめ

私の場合ですが、Shopify独自の用語、特にコレクションやカタログなどがゴチャゴチャになってしまいました。

このように分かりにくい用語は自身でメモったりすると、意外と簡単に覚えられるかもしれません。

次回は、Shopify独自のプログラミング言語「liquid」の基本的な部分を解説します。

 

■バックナンバー

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア