デイトラShopifyアドバンスコースでShopifyカスタマイズを極めよう！

デイトラのShopifyアドバンスコースでは、Liquidを始めとしたコーディングでのカスタマイズ方法を、案件で出くわす順に徹底的に学ぶことができます。

今回はそんな「Shopifyアドバンスコース」を実際に受講している筆者がレビューしていきます。

ありさちゃん

Shopidyカスタマイズを仕事にしたいのですが、学べる教材を探しています

まさひろくん

デイトラのShopifyコード編集編ってぶっちゃけ仕事できるレベルになれるのかな？

こういった疑問に答えていきます。

2024年時点で、Liquidの編集・コーディングができる人材はかなり足りていないので、チャンスのある分野です！！

内容の更新・追加が激しいので、この記事では最初の1/3程度を解説します。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

コース名	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コースを完走したので内容・評判が本当か徹底解説【受講生レビュー】 デイトラのShopifyコースでは、ストアの構築から配送などのバックヤード業務効率化、集客のマーケティングまで幅広く学ぶことで、デザイ...

しょーご

協賛企業も多く、Shopifyニーズの高さが伺えます。特にLiquidスキルは制作会社にもアピール力強いです！

デイトラ公式サイトへ

Shopifyアドバンスコース最新の更新情報

Shopifyアドバイスコースとは？

「Shopifyアドバンスコース」で学べることはざっくり以下の内容です。

この講座を受講することで「Shopifyテーマのカスタマイズ案件」を受注したり、

Shopifyエキスパートの会社に応募する際に「スキルと学習意欲」の面で有利になる可能性があります。

しょーご

今回のOS2.0の内容を学べる教材が他にほぼ存在しない上に、業界でもリリースされたばかりの最新機能を扱っているためです。

＼無料動画が複数あり／

Shopifyアドバンスコースへ

どんな人に向いているか

これらの知識が必要になります。

しょーご

最初の環境構築の段階でターミナルなど黒い画面を触ることになるので、Gulpなどで多少触った経験があるとスムーズかもです。

しょーご

以下両方取り組まれた人なら心配ないかなと思います。

ShopifyEC構築コースとの違いは？

ShopifyEC構築コースは基本的には「NoCodeでのサイトの立ち上げやマーケティング面」を学びます。

こちらも以前記事にしています。

デイトラShopifyコースを完走したので内容・評判が本当か徹底解説【受講生レビュー】 デイトラのShopifyコースでは、ストアの構築から配送などのバックヤード業務効率化、集客のマーケティングまで幅広く学ぶことで、デザイ...

この「Shopifyコード編集編」はコーディングでのカスタマイズを中心に学びます。

Shopifyのカスタマイズはニーズがかなりある

コロナ禍以後ネットショップの開設関連の案件がかなり増えています。

そういった案件がWeb制作会社にも流れてきたりするんですが、社内にノウハウがないので受けられていない所が一定数あります。

今このタイミングで「Shopifyカスタマイズ」のスキルを付けることは大きな意義があります。

しょーご

本当に人がいない…!!

また、ニーズがある証拠として、運営側からも案件募集がかけられることがあります。

受講方法

管理画面の右下に「コース一覧」があるので、そこから受講してください。

まだデイトラに登録していない人は、登録すればアドバンスコースも無料動画を見ることができます。

デイトラの無料体験について

まずはデイトラから「無料で講座を体験する」のボタンを押してください。

その後、デイトラに登録してください（お金はコースを購入しない限り、かかりません）

その後、管理画面に入ったら、下の方の「コース一覧」から気になるコースを選べば、複数の無料講義動画を閲覧することが可能です！

＼無料動画が複数あり／

デイトラの無料体験はこちら！

Shopifyアドバンスコース受講生の口コミ

環境構築編

ローカル開発環境を構築しよう

ここではOnline Store 2.0から導入されたShopify CLIを用いてローカル環境を構築していきます。
インストール方法からコマンドの使い方まで学習していきます。

テーマと商品データを揃える

今回のレッスンで使用するのはShopifyEC構築コースDay8, Day9の追加コンテンツで制作した「スニーカーショップ」のサイトをベースに講座を行っていきます。

テーマファイルと商品csvデータが共有されているので、開発ストアにダウンロードすれば同じ環境を揃えることができます。

Ruby2.7以上にする

しょーご

初めてターミナルやコマンドプロンプトを触る人は、いきなりで少しびっくりするかもです。

とはいえエラーが出なければ全然難しくはないです。

Shopify CLI

Shopifyテーマの開発は直接オンラインサイトを触るのではなく、ローカル環境に落としてからVSCodeなどで開発していくことになります。

OS1.0の頃はTheme kitを触っていましたが、OS2,0からのShopify 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.

これでいけました。

VSCode上で開発しつつ、ローカルにテスト環境を立ち上げられるため、ホットリロードで変更をリアルタイムで確認することができます。

お客さんに確認してもらう用のURLも発行されるので、とても便利ですね！

＼無料動画が複数あり／

Shopifyアドバンスコースへ

テーマフォルダ構造を学ぼう

Shopifyテーマの各フォルダの意味と役割について学習していきます。

凄まじいファイル数だが…

Shopifyテーマは大きく7つのフォルダで構成されています。

例えば以下はsectionsフォルダに格納されているliquidファイル群です。

まさひろくん

いや…多すぎでは…

しょーご

ここでは一つ一つのフォルダの役割を学んでいくのと、どのテーマも構成は変わらないので、そんなに絶望的ではないよ

OS1.0からOS2.0へ移行する方法を学ぼう

テーマファイルのTemplatesフォルダにあるLiquidテンプレートをJSONテンプレートへ変換して既存テーマをオンラインストア2.0に移行する方法を学びます。

移行を学ぶ理由

Shopifyデベロッパーとして案件を受注する際に、まだまだOS1.0仕様で構築されたストアをカスタマイズすることは多くあります。

またOS2.0で構築されるストアでも部分的にOS1.0のLiquidテンプレートを使用することもデザインの特性や機能実装の理由であるようですので、両方使えるようになっておきます。

これができるようになると、テーマのフォルダ構造、各テンプレートの理解が深まります。

しょーご

アップデートしなければならないページはたくさんあります

しょーご

実務でパニックにならないように、ここで手順を確かめておきましょう。

コード編集編

Liquidの基礎とセクション作成

Liquidの基本文法とセクションの作成に必要なschemaについて学習していきます。

オブジェクトの概念やschemaの作成は最初難しいと感じるかもしれませんが、
慣れれば自由なレイアウトのセクションを作成できるようになります。

セクションとは？

管理画面から自由にコンテンツを編集できる機能のことで、例えばこのパートでは以下のようなセクションを作成します。

タイトルや写真、写真下のテキストを管理画面から変更することが可能です。

こういった機能を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をされていたりプログラムを書く方ならなんとなく意味は分かると思います。

しょーご

全然分からん！と思った方も、講座内ではかなり丁寧に解説してくれるので、この記述も理解できるぐらいになれます。

Liquid reference

https://shopify.dev/api/liquid

liquidオブジェクト、タグ、フィルターについて学ぼう

ここではそれぞれどういったものかの解説は割愛しますが、全部Shopify開発の基本になるのに、解説している教材がほとんどないので、かなり貴重なパートだと思います。

しょーご

これ、デイトラが出てくる前は自分で英語の公式ドキュメント見て一個一個勉強しなきゃいけなかったんですが、Shopifyアドバンスコースのおかげでその必要もなくなりました、神！！

実践カスタマイズ編

よくあるカスタマイズを学ぼう

Shopifyストア構築時、お客様からの要望によってはコード編集が必要な時があります。

今回はコード編集が必要なよくあるカスタマイズ例について学習していきます。

しょーご

このあたりは実務最前線情報が多いので購入後のお楽しみにしたいのですが、これをご覧の皆さんにはごく一部だけを紹介したいと思います🙈

ベストセラーに順位を表示しよう

「販売個数順に商品を並べる実装」は実務でもかなり頻繁に行うそうです。

ここで実装するものだと、チェックボックスのオンオフで、商品右上のNo.1などのタグが付いたり外れたりします。

変数を使って住所情報を変更しよう

こちらもShopifyでのカスタマイズとしてはよくある実装になるようです。

Shopifyの標準機能だとマイページに表示される住所変更項目が欧米仕様で

例）マンション名101　1-1-1　〇〇　〇〇市　〇〇県　

と表示されてしまうため、日本の利用者は違和感を抱いてしまうので、こちらを直す必要があります。

特定の商品が入っていたら、カート画面で確認メッセージを表示する

このレッスンをこなすことで、もしお酒などを取り扱うショップだった場合、「２０歳以上ですか？」というチェックを設けることが可能になります。

ここではコレクションが「キッズ」の商品に対して、「子供靴ですがお間違えはありませんでしょうか？」という確認チェックを出します。

チェックボックスを押下しないと、チェックアウトボタンが活性化しないので、購入画面に進むことができません。

その他の内容について

更に発展点的な内容を学ぶことができますが、内容の追加・更新が激しすぎるので、一旦ここまでとさせていただきますm(_ _)m

デイトラShopifyアドバンスコースコード編集編ぶっちゃけどう？

Web制作やプログラムの基礎知識のある層向け

どういった層にぴったりか箇条書きにしてみます。

これぐらいの事前知識が欲しいかなと思います。

特に「動的サイト」への理解がないと、「schema」「liquid」のあたりで多少躓く可能性はあります。

デイトラの「Web制作コース」もしくは「Railsコース」と、「ShopifyEC構築コース」を受講していれば特に問題ないかなと思います。

OS2.0対応は価値あり

OS2,0でShopify CLIを使用した開発を学べる場所はほとんど存在しません。

そんな中「よくある実装」も含めて学べる「Shopifyコード編集編」は確実に買う価値があるでしょう。

また、デイトラは買い切りなのにコンテンツはどんどん追加されていき、

この「Shopifyコード編集編」も今後コンテンツ拡充に伴って値上げされるので、これをお読みのあなたもお早めに！！

しょーご

個人的にはここまで読んでくれるような、熱心な「次なる道を模索するWeb製作者」にぜひ活用していただきたいですね！

＼無料動画が複数あり／

Shopifyアドバンスコースへ

デイトラの他コース紹介