デイトラのShopifyアドバンスコースでは、Liquidを始めとしたコーディングでのカスタマイズ方法を、案件で出くわす順に徹底的に学ぶことができます。
今回はそんな「Shopifyアドバンスコース
」を実際に受講している筆者がレビューしていきます。
こういった疑問に答えていきます。
2024年時点で、Liquidの編集・コーディングができる人材はかなり足りていないので、チャンスのある分野です！！
内容の更新・追加が激しいので、この記事では最初の1/3程度を解説します。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
| コース名 |  Web制作コース |  Webアプリ開発コース |  Webデザインコース |  ShopifyEC構築コース |  動画編集コース |  Pythonコース |  Webマーケティングコース |  ドローンコース |  ECクリエイティブコース |
| 学習内容 | Webサイトの構築 | Rails,Reactでアプリ開発 | Webやアプリデザイン | Shopifyサイトの構築と 運用 | YouTubeや ショート動画編集 | Pythonや分析スキル | 広告やSEO LINEやレポーティング | ドローン空撮 点検業務や農業活用 | ECの総合サポート |
| 料金 | ￥129,800 | ￥119,800 | ￥119,800 | ￥79,800 | ￥99,800 | ￥89,800 | ￥109,800 | ￥99,800 | ￥99,800 |
| 卒業後の進路例 | Web制作会社に就職 フリーランスコーダー | Railsエンジニアとして 企業に就職 | フリーランスデザイナー デザイン会社に就職 | EC構築フリーランス Shopifyエキスパートの会社に就職 | YouTube,TikTokeの編集者 企業の動画広報担当 映像編集会社へ就職 | AI系企業への就職 自社商品の分析に利活用 | フリーランスで広告運用 マーケターとして就職 | ドローンパイロット （正社員や業務委託） | ECコンサルやEC企業インターン(紹介あり) |
| 解説記事リンク | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら |
| 公式サイト | Web制作コース | Webアプリ開発コース | Webデザインコース | ShopifyEC構築コース | 動画編集コース | Pythonコース | Webマーケティングコース | ドローンコース | ECクリエイティブコース |
動画でもデイトラを徹底解説しています！！
動画では15:45からShopifyアドバンスコースに触れています。
デイトラのアドバンスコースについて
この「Shopifyコード編集編」はデイトラのアドバンスコースで、ShopifyEC構築コースの発展版となっています。
ShopifyEC構築コースに関しては以前記事を書いているので、そちらを御覧ください。
協賛企業も多く、Shopifyニーズの高さが伺えます。特にLiquidスキルは制作会社にもアピール力強いです！
Shopifyアドバンスコース最新の更新情報
Shopifyアドバイスコースとは？
「Shopifyアドバンスコース」で学べることはざっくり以下の内容です。
- Shopify CLIを用いたローカル環境構築
- Liquidの基本
- よくあるカスタマイズ
この講座を受講することで「Shopifyテーマのカスタマイズ案件」を受注したり、
Shopifyエキスパートの会社に応募する際に「スキルと学習意欲」の面で有利になる可能性があります。
今回のOS2.0の内容を学べる教材が他にほぼ存在しない上に、業界でもリリースされたばかりの最新機能を扱っているためです。
＼無料動画が複数あり／
どんな人に向いているか
- HTML,CSS.の基礎が分かる人
- ShopifyでNoCodeでもサイトを立ち上げたことがある人
これらの知識が必要になります。
最初の環境構築の段階でターミナルなど黒い画面を触ることになるので、Gulpなどで多少触った経験があるとスムーズかもです。
以下両方取り組まれた人なら心配ないかなと思います。
ShopifyEC構築コースとの違いは？
ShopifyEC構築コースは基本的には「NoCodeでのサイトの立ち上げやマーケティング面」を学びます。
こちらも以前記事にしています。
この「Shopifyコード編集編」はコーディングでのカスタマイズを中心に学びます。
Shopifyのカスタマイズはニーズがかなりある
コロナ禍以後ネットショップの開設関連の案件がかなり増えています。
そういった案件がWeb制作会社にも流れてきたりするんですが、社内にノウハウがないので受けられていない所が一定数あります。
今このタイミングで「Shopifyカスタマイズ」のスキルを付けることは大きな意義があります。
本当に人がいない…!!
また、ニーズがある証拠として、運営側からも案件募集がかけられることがあります。
受講方法
管理画面の右下に「コース一覧」があるので、そこから受講してください。
まだデイトラに登録していない人は、登録すればアドバンスコースも無料動画を見ることができます。
デイトラの無料体験について
まずはデイトラから「無料で講座を体験する」のボタンを押してください。
その後、デイトラに登録してください（お金はコースを購入しない限り、かかりません）
その後、管理画面に入ったら、下の方の「コース一覧」から気になるコースを選べば、複数の無料講義動画を閲覧することが可能です！
＼無料動画が複数あり／
Shopifyアドバンスコース受講生の口コミ
環境構築編
ローカル開発環境を構築しよう
ここではOnline Store 2.0から導入されたShopify CLIを用いてローカル環境を構築していきます。
インストール方法からコマンドの使い方まで学習していきます。
- Rubyをパソコンにインストール
- Shopify CLIのインストール
- ローカル環境とストアの接続とShopify CLIコマンドの使い方
- VSCodeと拡張機能をインストール
- 【参考】OS1.0のテーマの開発はどうすればいいの…？
テーマと商品データを揃える
今回のレッスンで使用するのはShopifyEC構築コースDay8, Day9の追加コンテンツで制作した「スニーカーショップ」のサイトをベースに講座を行っていきます。
テーマファイルと商品csvデータが共有されているので、開発ストアにダウンロードすれば同じ環境を揃えることができます。
Ruby2.7以上にする
初めてターミナルやコマンドプロンプトを触る人は、いきなりで少しびっくりするかもです。
とはいえエラーが出なければ全然難しくはないです。
Shopify CLI
Shopifyテーマの開発は直接オンラインサイトを触るのではなく、ローカル環境に落としてからVSCodeなどで開発していくことになります。
OS1.0の頃はTheme kitを触っていましたが、OS2,0からのShopify CLIはかなりローカル開発が行いやすくなったようです。
- オンラインストアからCLIでテーマをダウンロード
- VSCodeで開発(場合によってはGitでチーム開発)
- その後CLIでオンラインストアにアップロード
Shopify CLIのshopify theme pullでダウンロードできない場合（エラー）
私はshopify theme pullする際に以下のエラーに直面しましたので、解決策を置いておきます。
✗ An unexpected error occured.
To submit an issue include the stack trace.
To print the stack trace, add the environment variable SHOPIFY_CLI_STACKTRACE=1.- 開発ストアからログアウト
- shopify logoutでCLIでもログアウト
- 再度開発ストアにログインする
- shopify login –storeでCLIでもログインする
- shopify theme pullを実行
これでいけました。
VSCode上で開発しつつ、ローカルにテスト環境を立ち上げられるため、ホットリロードで変更をリアルタイムで確認することができます。
お客さんに確認してもらう用のURLも発行されるので、とても便利ですね！
＼無料動画が複数あり／
テーマフォルダ構造を学ぼう
Shopifyテーマの各フォルダの意味と役割について学習していきます。
- テーマファイルの全体概要
- assets、config、localesフォルダ編
- layout、templatesフォルダ編
- sections、snippetsフォルダ編
- おさらいとコードの関係
凄まじいファイル数だが…
Shopifyテーマは大きく7つのフォルダで構成されています。
- layout
- assets
- locales
- config
- templates
- sections
- snippets
例えば以下はsectionsフォルダに格納されているliquidファイル群です。
ここでは一つ一つのフォルダの役割を学んでいくのと、どのテーマも構成は変わらないので、そんなに絶望的ではないよ
OS1.0からOS2.0へ移行する方法を学ぼう
テーマファイルのTemplatesフォルダにあるLiquidテンプレートをJSONテンプレートへ変換して既存テーマをオンラインストア2.0に移行する方法を学びます。
移行を学ぶ理由
Shopifyデベロッパーとして案件を受注する際に、まだまだOS1.0仕様で構築されたストアをカスタマイズすることは多くあります。
またOS2.0で構築されるストアでも部分的にOS1.0のLiquidテンプレートを使用することもデザインの特性や機能実装の理由であるようですので、両方使えるようになっておきます。
これができるようになると、テーマのフォルダ構造、各テンプレートの理解が深まります。
アップデートしなければならないページはたくさんあります
- 404ページ
- 固定ページ
- 問い合わせページ
- 商品詳細ページ
- コレクションページ
- コレクションリストページ
- カートページ
- ブログページ
- ブログ投稿ページ
- 検索ページ
- ホームページ（TOPページ）
実務でパニックにならないように、ここで手順を確かめておきましょう。
コード編集編
Liquidの基礎とセクション作成
Liquidの基本文法とセクションの作成に必要なschemaについて学習していきます。
オブジェクトの概念やschemaの作成は最初難しいと感じるかもしれませんが、
慣れれば自由なレイアウトのセクションを作成できるようになります。
- 1からセクションを作ってみよう
- Liquidの基礎を学ぼう
セクションとは？
管理画面から自由にコンテンツを編集できる機能のことで、例えばこのパートでは以下のようなセクションを作成します。
タイトルや写真、写真下のテキストを管理画面から変更することが可能です。
こういった機能をShopifyでは「schema」というのを記述することで実装可能です。
{% schema %}
{
"name": "Slideshow",
"tag": "section",
"class": "slideshow",
"settings": [
{
"type": "text",
"id": "title",
"label": "Slideshow"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
}
{% endschema %}いやこんなの書くんかい！と思うかもですが、型は決まっているし、動画で一緒に書いていけるのでそこまで難しくはないです。
liquidの基礎を学ぶ
ところで、liquidは実際どういったコードなんでしょうか？
例えばですが、以下は「ログインや会員登録関連の処理」で条件により表示情報を出し分けています
また、for文などプログラムでは基本の構文もliquidでは出てきます。
WordPressをされていたりプログラムを書く方ならなんとなく意味は分かると思います。
全然分からん！と思った方も、講座内ではかなり丁寧に解説してくれるので、この記述も理解できるぐらいになれます。
講座内では頻繁に公式ドキュメントを見に行くので、良い癖がついて良いと思います。Shopifyの公式ドキュメントは大半が英語ですが、慣れておくことが大切です。
Liquid reference
https://shopify.dev/api/liquid
liquidオブジェクト、タグ、フィルターについて学ぼう
ここではそれぞれどういったものかの解説は割愛しますが、全部Shopify開発の基本になるのに、解説している教材がほとんどないので、かなり貴重なパートだと思います。
実践カスタマイズ編
よくあるカスタマイズを学ぼう
Shopifyストア構築時、お客様からの要望によってはコード編集が必要な時があります。
今回はコード編集が必要なよくあるカスタマイズ例について学習していきます。
- ベストセラーに順位を表示しよう
- 変数を使って住所情報を変更しよう
- 会員登録の項目を増やそう【メモ編】＆【タグ編】
- 特定の商品が入っていたら、カート画面で確認メッセージを表示する
- サンクスページを編集して、LINE登録用のQRコードを設置しよう
- 決済方法によってサンクスページ、サンクスメールの文面を変えよう
このあたりは実務最前線情報が多いので購入後のお楽しみにしたいのですが、これをご覧の皆さんにはごく一部だけを紹介したいと思います🙈
ベストセラーに順位を表示しよう
「販売個数順に商品を並べる実装」は実務でもかなり頻繁に行うそうです。
ここで実装するものだと、チェックボックスのオンオフで、商品右上のNo.1などのタグが付いたり外れたりします。
変数を使って住所情報を変更しよう
こちらもShopifyでのカスタマイズとしてはよくある実装になるようです。
Shopifyの標準機能だとマイページに表示される住所変更項目が欧米仕様で
例）マンション名101 1-1-1 〇〇 〇〇市 〇〇県
と表示されてしまうため、日本の利用者は違和感を抱いてしまうので、こちらを直す必要があります。
特定の商品が入っていたら、カート画面で確認メッセージを表示する
このレッスンをこなすことで、もしお酒などを取り扱うショップだった場合、「２０歳以上ですか？」というチェックを設けることが可能になります。
ここではコレクションが「キッズ」の商品に対して、「子供靴ですがお間違えはありませんでしょうか？」という確認チェックを出します。
チェックボックスを押下しないと、チェックアウトボタンが活性化しないので、購入画面に進むことができません。
- アパレル業界；予約商品がカートに入っていた場合、「配送日時指定ができません」と注記を出す
- 飲食業界；発送温度帯が違う商品が入っている場合、同時注文ができませんとアラートを流す
- ギフト業界；ギフト商品と設定しているものがカートに入っている場合、ギフトオプションを出す
その他の内容について
更に発展点的な内容を学ぶことができますが、内容の追加・更新が激しすぎるので、一旦ここまでとさせていただきますm(_ _)m
デイトラShopifyアドバンスコースコード編集編ぶっちゃけどう？
Web制作やプログラムの基礎知識のある層向け
どういった層にぴったりか箇条書きにしてみます。
- HTML,CSSは理解している
- WordPressなど動的サイトへの多少の理解がある
- ShopifyストアをNoCodeでもいいから開設したことがある
これぐらいの事前知識が欲しいかなと思います。
特に「動的サイト」への理解がないと、「schema」「liquid」のあたりで多少躓く可能性はあります。
デイトラの「Web制作コース」もしくは「Railsコース」と、「ShopifyEC構築コース」を受講していれば特に問題ないかなと思います。
OS2.0対応は価値あり
OS2,0でShopify CLIを使用した開発を学べる場所はほとんど存在しません。
そんな中「よくある実装」も含めて学べる「Shopifyコード編集編」は確実に買う価値があるでしょう。
また、デイトラは買い切りなのにコンテンツはどんどん追加されていき、
この「Shopifyコード編集編」も今後コンテンツ拡充に伴って値上げされるので、これをお読みのあなたもお早めに！！
個人的にはここまで読んでくれるような、熱心な「次なる道を模索するWeb製作者」にぜひ活用していただきたいですね！
＼無料動画が複数あり／
| コース名 | Web制作コース | Webアプリ開発コース | Webデザインコース | ShopifyEC構築コース | 動画編集コース | Pythonコース | Webマーケティングコース | ドローンコース | ECクリエイティブコース |
| 学習内容 | Webサイトの構築 | Rails,Reactでアプリ開発 | Webやアプリデザイン | Shopifyサイトの構築と 運用 | YouTubeや ショート動画編集 | Pythonや分析スキル | 広告やSEO LINEやレポーティング | ドローン空撮 点検業務や農業活用 | ECの総合サポート |
| 料金 | ￥129,800 | ￥119,800 | ￥119,800 | ￥79,800 | ￥99,800 | ￥89,800 | ￥109,800 | ￥99,800 | ￥99,800 |
| 卒業後の進路例 | Web制作会社に就職 フリーランスコーダー | Railsエンジニアとして 企業に就職 | フリーランスデザイナー デザイン会社に就職 | EC構築フリーランス Shopifyエキスパートの会社に就職 | YouTube,TikTokeの編集者 企業の動画広報担当 映像編集会社へ就職 | AI系企業への就職 自社商品の分析に利活用 | フリーランスで広告運用 マーケターとして就職 | ドローンパイロット （正社員や業務委託） | ECコンサルやEC企業インターン(紹介あり) |
| 解説記事リンク | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら | 解説記事はこちら |
| 公式サイト | Web制作コース | Webアプリ開発コース | Webデザインコース | ShopifyEC構築コース | 動画編集コース | Pythonコース | Webマーケティングコース | ドローンコース | ECクリエイティブコース |
デイトラの他コース紹介
Web制作コース
実際にWeb制作コース受講生にインタビューしてきました
ShopifyEC構築コース
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
