Chapter 01

変更履歴、各キャプチャーの概要

hiroki
hiroki
2021.12.18に更新

変更履歴

  • [2021年12月07日] 公開
  • おまけ ~テーマ1.0から2.0への移行~を追加
  • [2021年12月12日]おまけ ~Shopifyとドメインを紐づける~を追加
  • [2021年12月18日]おまけ ~ShopifyにGoogleタグマネージャーを設定する~を追加

本書を取り組むのに必要な前知識

  • HTML,CSS,JavaScriptの基本知識
  • Linuxの基本知識
  • Gitの基本知識

本書を取り組むのに必要なアカウント

  • Shopifyパートナーアカウント(開設はこちら)
  • Githubアカウント(開設はこちら)

各キャプチャーの概要

Part1 環境構築 ~WindowsにShopify-CLIをインストールする~

このキャプチャーでは、WindowsのPCにShopify-CLIをインストールするまでの工程を解説します。今までのShopifyのテーマ改修ではTheme Kitが使用されていましたが、Shopify2.0からShopify-CLIを使用する必要があります。

Part2 環境構築 ~Shopify-CLIの使い方からGithubの連携~

このキャプチャーでは、Part1でインストールしたShopify-CLIの使い方からGithubの連携方法を解説します。

おまけ Shopify ~CSVによる商品登録~

このキャプチャーでは、CSVによる商品登録の仕方を紹介します。おまけなので本書の手順に影響しません。スキップで問題ありません。筆者のメモになります。

Part3 テーマ改修 ~Shopify のフォントを書き換える~

このキャプチャーでは、Shopifyのフォントについて解説します。Shopifyは、2021年の時点では日本語のフォントを扱っていません。日本語フォントを対応させる方法や、フォントは「テーマ設定」の「タイポグラフィー」はどのような方法で対応されているのか見ていきたいと思います。

Part 4 テーマ改修 ~Shopify のメタフィールド~

このキャプチャーでは、Shopify Online Store 2.0以降で追加された機能メタフィールドについて解説していきたいと思います。

Part5 テーマ改修 ~新規セクションを作成(モックアップ編)~

このキャプチャーから、新規セクションを追加する方法を解説します。本書では、Dawnにスライダーセクションを追加します。スライダーセクションのHTML,CSS,JSのみで雛形までを解説します。

Shopify Online Store 2.0からセクションの需要は上がりました。いままでのセクションは、ホームページに限定されていました。2.0からアプリ不要で全ページのセクションが変更することができるようになり、かなりのカスタマイズ性が上がりました。

Part6 テーマ改修 ~新規セクションを作成(Liquid編)~

このキャプチャーでは、Part5で作成したモックアップをShopify用に書き換えていきたいと思います。Part5で作成したスライダーセクションは、Shopify(管理画面)の設定を変更しても反映されません。Shopifyとスライダーセクションを紐づけていきます。

おまけ ~テーマ1.0から2.0への移行~

おまけ ~Shopifyとドメインを紐づける~

おまけ ~ShopifyにGoogleタグマネージャーを設定する~