こんな方におすすめ
- Shopifyでオリジナルのテーマを1から作成したい！
- 既存のテーマをカスタマイズするためにShopifyのコードがどうなっているか知りたい
はじめに
最近、Shopifyが日本でも流行りだしてきました。
Shopifyでは様々なテーマやアプリを購入することができ、それらを使うだけでも十分クオリティーの高いショップを作ることは可能です。
ですが、お客様からのご要望や、既存テーマの部分的に変更したいところ、完全オリジナルのショップをデザインしたいなど、テーマをカスタマイズする場面に出会うと思います。
ただ、ShopifyではWordPressのように機能がたくさんあるため、テーマを編集しようにもどこから手を付ければ良いか分からない状態になってしまいます。
そして、参考書や日本語の情報が少ないため、テーマ編集を諦めてしまっている人もいると思います。
そんな方のために、この記事を通してShopifyのテンプレートの基本的な編集方法を知ってもらえたら良いと思って、このシリーズを書こうと思いました。
学ぶこと
Shopifyテンプレートの基本的な作成方法を学習します。
固定ページ、商品ページ、カート、ブログ、ログイン、検索機能などなど、ネットショップに必要な要素を学習できます。
学ばないこと
Shopifyの基本的な動作（商品追加など）は省略する部分があります。
Shopifyでの商品の売り方、マーケティングなどは行いません。
前提条件、学習前に必要となる知識
基本的なHTMLやCSSの使い方
Shopifyでの商品追加やコレクションなど、Shopifyを少し触ったことがあると学習が進めやすくなると思います。
if文やfor文など、プログラミング言語の基本的な要素
私が使用している開発環境
Shopifyパートナーを使用します（無料で使用できます）
OS：Windows10（Macでも基本的には操作は変わりません）
エディタ：Visual Studio Code
ターミナル：コマンドプロンプト
参考文献
・Shopify developers の公式ドキュメント
コードの編集方法などはだいたいここに乗っています
・Udemyのコース（2つ）
1．Intro to Shopify Theme and Store Development with Liquid
既存のテーマを編集するような講義となっています
2．Build a Shopify Theme From Scratch
1からテーマを作成するものとなっています
・デザイン
このテンプレートを作成するに当たって下記ページのものを参考にさせていただきました。ありがとうございます。
HTMLコードの配布
今回作成するテーマのHTMLコードを配布します。
なお、時短のためBootstrapを使用していますが、Bootstrapを理解していない方でも学習を進める上で問題はありません。
githubからダウンロードをお願いします。
作るもの（コースの全体像の確認）
No.2 インストール、ローカル開発環境との接続
https://agata-code.com/programming/original-no2/
No.2ではインストールやローカル開発環境との接続を行います。
No.3 ヘッダーの作成
https://agata-code.com/programming/original-no3/
下記写真のようなヘッダーを作成します。
また、検索機能をつけます。
No.4 フッターの作成
https://agata-code.com/programming/original-no4/
フッターを作成します。
下記写真のように、SNSのURLの有無によって表示が切り替えられるような機能もつけていきます。
また、プライバシーポリシーページの簡単な作成方法を学習します。
No.5 トップページの作成
https://agata-code.com/programming/original-no5/
下記写真のようなトップページを作成します。
表示する商品はコレクションを選択することでカスタマイズすることができます。
No.6 Aboutページの作成
https://agata-code.com/programming/original-no6/
この章では、固定ページの作成方法を学習します。
No.7 お問い合わせページの作成
https://agata-code.com/programming/original-no7/
この章では、formの書き方を学習します。
No.8 コレクションページの作成
https://agata-code.com/programming/original-no8/
この章では、コレクションページの商品の表示やページネーションの使用方法を学習します。
No.9 個別商品ページの作成
https://agata-code.com/programming/original-no9/
この章では、商品の詳細ページを作成します。
カートに入れたり、関連商品を表示する機能も実施します。
No.10 カートページの作成
https://agata-code.com/programming/original-no10/
カートの商品の表示方法、個数の更新方法を学習します。
No.11 ブログ作成
https://agata-code.com/programming/original-no11/
ブログ一覧とタグ一覧を表示する方法を学習します。
また、ブログの記事の表示方法を学習します。
No.12 ログイン機能の実施
https://agata-code.com/programming/original-no12/
会員登録、ログイン、パスワードリセット、ログアウト、といったアカウントの認証に必要な機能を学習します。
また、残りの必要となるページを作成します。
それでは、さっそく学習を始めて行きましょう！
なお、質問や要望がありましたら、お問い合わせフォームまたはコメント欄によろしくお願いします。
ページ一覧
全体像の確認
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/
ログイン機能の実施