はじめに

「shopify fontawesome」でググった時に日本語の記事1件、qiitaでは記事が見当たらず、3時間ほど溶かしたため(・ω・;)書いておきます。

shopifyでFontAwesomeを使う場合、以下の２パターンに大別されるはず。

FontAwesomeのファイルをassetsに格納して呼び出す
CDNをテーマファイルに記述する

動作環境に左右されづらい、１が推奨だが、自分の環境ではAseetsに格納して呼び出すことができなかったため、2で対応しました。

以下の環境で動作確認済。
shopifyテーマのバージョン : Dawn 11.0.0
FontAwesomeバージョン: 6系（v6.2.1）
※ 使用するFontAwesomeアイコンは無償版のみ

参考:
Shopifyのテーマのバージョン確認方法
 Versions of Font Awesome

導入手順

theme.liquid の<head>タグ内に以下の一文を挿入

<!-- この一文を挿入 -->
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css">

theme.liquid

<html class="no-js" lang="{{ request.locale.iso_code }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">
    <!-- この一文を挿入 -->
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css">
...

以上。後は、FontAwesomeを使いたい箇所にFontAwesomeのhtml記法<i class=""></i>を記述するだけ。

FontAwesomeアイコンを画面に表示する

以下は、shopifyのコード編集を始めて触る方向けの参考例。

FontAwesomeアイコン用snippetsを作成する(liquidファイル)

例としてFontAwesomeアイコンcircle-arrow-upを使用
※ 自前の作成クラスを併用する場合は、class = custom-cssの記述を参考。

font-awesome.liquid

<i class="fa-solid fa-circle-chevron-up fa-3x custom-css" style="color: #424242;"></i>

<style>
.custom-css{
  position: fixed;
  bottom: 15px;
  right: 10px;
  background-color: white;
  border-radius: 28px;
}

FontAwesomeアイコンを埋め込む

theme.liquidの</body>タグ直前に以下の記述を挿入

theme.liquid

...
    <!-- FontAwesomeアイコン -->    
    {% render "font-awesome" %}
  </body>
</html>

"font-awesome"がFontAwesomeアイコン用snippetsのファイル名に対応しています。

以下のようにshopify画面のヘッダー右下にFontAwesomeアイコンが表示されていれば成功です。

参考記事

ShopifyにFont Awesome（無料版）を導入する
 Can't Get FontAwesome Brand Font To Work In Footer