やっとこ案件で来たので開始前に知らべたことや雑感メモ。（2021.11当時）

１）カスタム範囲となんとなく初期にかかる工数

連携方法やカスタム範囲などによる工数の想定パターンをまとめてみた。

■小（通常の項目更新程度）

・文言修正のみ
・デフォルトカラーの上書きのみ

■中（管理画面でコード編集作業）

・cssスタイル差し替え
既存テーマのassets内にあるcss OR css.liquid OR scss.liquidを編集→挙動を変更
→基本設定を変更、それで他の箇所に影響が出ないなら問題ない。後出の上書きとどちらがいいかは運用体制によりけり ・cssスタイル上書き
既存テーマにcssを追加→挙動を上書き
→テーマのデフォルトから変更した編集箇所の差分があるのでわかりやすい。ただファイルが増えるので好き好き。 既存テーマのパーツliquidファイル内にcssをインライン追加→挙動を上書き
→初見でのカスタム箇所の視認性が悪いので運用時に他の人に伝わるように注意が必要 ・表示項目カスタム（liquidタグの出力項目追加など）

■高（ローカルで作業してデプロイしてアップ）

・そもそものテーマのscssをいじって根本的に対応
・JS機能を追加
→パートナーアカウントとアクセストークンが必要
ガッツリチームを組む場合の方法かなって思う

２）使用themeについて

構成が特殊だと工数が増える
こちらも確認できる無料themeだと事前に工数がわかりやすい
また、スタイルにscss使用 or css使用でも工数が変わってくる
Scss →できるだけScssで追記対応・コンパイル必須
Css →上書き用スタイル OR 記述変更で対応 Sassは2020/12以降非推奨に

３）作業環境について

テスト環境は現状どこになっているか。作業をどこですすめる前提か。
（開発者にどこまでアクセスを許すかという話でもあると思う） テストサイト
　OR
テストテンプレート（管理画面）
　OR
テストテンプレート（ローカルDLして作業） 指定なければテストテンプレートで良さそう。
新規作成するか否かの判断は、今後のカスタム具合によりけり。
（よほどドラマチックなカスタムでないかぎりはログインして管理画面からでよさそう）

確認ポイント

オンラインのエディタ上でCSS追記のみで本当にOKそうか？ 今後のために「お作法」は揃えていたほうがいい。

css追加スニペットなどなど

Cssファイルを追加

{{ 'style.css' | asset_url | stylesheet_tag }}

//or(古い)
{{ ‘〜〜.scss.css’ | asset_url | stylesheet_tag}}

パーツにインラインで追加

{% style %}
.c-page_header {
  background: #333;
  /* ~~~ */
}
{% endstyle %}

<div class="c-page_header">
  <h2>{{ title }}</h2>
</div>

調べ物

中級者向け：ローカルでのテーマカスタム

Shopifyテーマカスタマイズを4ヶ月して感じた事と設計について
https://zenn.dev/kazuhe/articles/shopify-theme-customization 2021.01記事
「Shopify Theme Kit」が便利とのこと。 →Shopifyは現在過渡期っぽい
公式を見ると

Shopify CLI replaces Theme Kit for most Shopify theme development tasks. You should use Shopify CLI if you're working on Online Store 2.0 themes. You should use Theme Kit instead of Shopify CLI only if you're working on older themes or you have Theme Kit integrated into your existing theme development workflows.

現在Shopifyの開発ツールは２種類あって、「Shopify CLI」と「Shopify Theme Kit」である。
オンラインスア2.0対応テーマなら新しくできたCLIの方を
それ以前のテーマならTheme Kitを利用してくださいと書いてある。
ちなみに2.0ではSCSSの利用も非推奨。なぁん。別でローカルでコンパイルに使う分はいいってよ。（そらそうやろ）
公式テーマをわざわざ2.0対応させるのも手間なので、今回はそのままscssを更新。 Shopify Theme Kit
https://shopify.dev/themes/tools/theme-kit 初心者向け：管理画面からのテーマカスタム Shopify(ショッピファイ)テーマにHTML・CSSを使って独自にカスタマイズする方法 | FRTEC(フルテック)研究所

Shopify(ショッピファイ)テーマにHTML・CSSを使って独自にカスタマイズする方法

触ったことない人向けに使い方や場所を丁寧に教えてくれてる。 その他：ページトップボタン
参考ヘルプページあったけど、日本語ページはコード引用部分がおかしい・・・どう見ても足らん（2021/11現在） 縦長ページの「トップに戻る」ボタンを追加する · Shopify ヘルプセンター
https://help.shopify.com/ja/manual/online-store/themes/os/customize/add-back-to-top 英語ページに全文があった Add a Back to top button on long pages · Shopify Help Center
https://help.shopify.com/en/manual/online-store/themes/os/customize/add-back-to-top 内容的には結局普通にイチからpagetop実装せぇってかんじ。
なので、英語のコードをベースにスムーススクロール入れたいやなんやかんやでJS追加、CSS追記してカスタム。

参考URL

Liquid解説(初級)
【Shopify】世界一丁寧なLiquidの解説

【Shopify】世界一丁寧なLiquidの解説

Shopifyカスタマイズには欠かせないLiquid言語の基本構文のまとめ – HPcode（えいちぴーこーど）
https://haniwaman.com/liquid/ 【Shopify】CSSをカスタマイズする方法【style.cssを作る】
https://fujikoblog0309.com/shopify_css-customize 公式リファレンス
Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid
https://www.shopify.com/partners/shopify-cheat-sheet デベロッパー登録
Shopify パートナープログラム | Shopify パートナーになる
https://www.shopify.jp/partners 【Shopify独学】Shopify独学完全ロードマップ | Shopify独学から案件獲得まで！ | おつゆのブログ
https://otsuyublog.com/shopify-roadmap/ Theme KitやCLIでのローカル開発環境作成（やや古）
Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2021春Update】｜your shopify team｜non-standard world株式会社
https://www.non-standardworld.co.jp/22987/ Shopifyアプリとテーマの開発方法 — Shopify開発者【2021年版】 https://www.shopify.jp/blog/partner-shopify-app-development ローカルでShopifyテーマの開発環境をセットアップする3ステップ — Shopify開発者【2021年版】 https://www.shopify.jp/blog/partner-local-shopify-theme-setup-three-steps