#03 ShopifyテーマキットでBootstrap5のオンラインショップを作る方法［初期設定］

このページではBootstrapをつかったShopifyのテーマの作り方を学ぶことができます。

Shopifyのテーマの中にBootstrapのCSSとJSを追加することで、BootstrapをつかったShopifyのテーマを作成することができます。

Bootstrapのダウンロード

Bootstrapのファイルは公式サイトからダウンロードできます。

ダウンロード

コンパイルされた CSS と JSの見出しの「ダウンロード」ボタンから
ファイルをダウンロード可能（Bootstrap v5.0.0-beta1）

ダウンロードしたZipファイルを解凍し、「css」「js」フォルダから以下のファイルをShopifyのテーマの「assets」フォルダにコピーします。

Bootstrap「css」フォルダにある
・bootstrap.min.css
・bootstrap.min.css.map

Bootstrap「js」フォルダにある
・bootstrap.min.js
・bootstrap.min.js.map

ShopifyのテーマにBootstrapを反映させる

ダウンロードしたBootstrapのファイルをShopifyのテーマに読み込む方法です。「layout」フォルダにある「theme.liquid」を開きます。

「assets」フォルダにあるファイルcssとjsを読み込む方法は「theme.liquid」の中に元々あるコードを参考にします。

「theme.liquid」内のコード
{{ 'application.css.scss' | asset_url | stylesheet_tag }}　
{{ 'application.js' | asset_url | script_tag }}

  {{ 'application.css.scss' | asset_url | stylesheet_tag }}

Liquidについて
① {{ 　}}　　括弧に囲まれている内容を出力する
②'application.css.scss'　
③ |　　縦棒（パイプ）＝条件を追加するときに使う
④asset_url
⑤stylesheet_tag

実際に出力されるHTMLコード
<link href="//cdn.shopify.com/s/files/1/0602/3947/8954/t/2/assets/application.css.scss?v=00000" rel="stylesheet" type="text/css" media="all" />

① {{ 　}}　この中に入れれるもの
Strings　 　  文字列
Numbers 　  数字
Variables　　変数
Objects　　  オブジェクト

②'application.css.scss'　はHTMLではどこか？　太字部分
「assets」フォルダにある読み込むファイル名
<link href="//cdn.shopify.com/s/files/1/0602/3947/8954/t/2/assets/application.css.scss?v=00000" rel="stylesheet" type="text/css" media="all" />

・v=00000はCSSのバージョンを独自の数字で管理している
・Shopifyが勝手に出力している

④asset_url　はHTMLではどこか？　太字部分
Shopifyのテーマの「assets」フォルダまでのパスを出力する
<link href="//cdn.shopify.com/s/files/1/0602/3947/8954/t/2/assets/application.css.scss?v=00000" rel="stylesheet" type="text/css" media="all" />

⑤stylesheet_tag　はHTMLではどこか？　太字部分
HTMLのCSSの記述に必要なコードを出力する
<link href="//cdn.shopify.com/s/files/1/0602/3947/8954/t/2/assets/application.css.scss?v=00000" rel="stylesheet" type="text/css" media="all" />

CSSに関する記述は以上です。

次はJSに関する記述ですが、CSSと同じような考え方で対応ができます。

{{ 'application.js' | asset_url | script_tag }}

実際に出力されるHTMLコード
<script src="//cdn.shopify.com/s/files/1/0602/3947/8954/t/2/assets/application.js?v=2933285453779101894" type="text/javascript"></script>

読み込みたいコードはBootstrapのコードなので、
以下のコードを上書きします。

「theme.liquid」内のコード　太字の箇所を変更する

{{ 'application.css.scss' | asset_url | stylesheet_tag }}　
{{ 'application.js' | asset_url | script_tag }}
↓
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}　
{{ 'bootstrap.min.js' | asset_url | script_tag }}

さらに「bootstrap.min.js」は</body>の直前に
コピー＆ペーストで移動します。

</body>の直前に移動するコード
{{ 'bootstrap.min.js' | asset_url | script_tag }}

ターミナルを開き、自動更新のコマンドを入力

theme watch --allow-live

「theme.liquid」を上書き保存すると、

{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}　
{{ 'bootstrap.min.js' | asset_url | script_tag }}

で記述したHTMLのソースコードが追加されていましたが、実際にファイルがアップロードされていないので、リンク切れの状態になりました。

そこで「assets」フォルダにある「bootstrap.min.css」と「bootstrap.min.js」を開き、適当なところで改行を入れたあとに改行を削除し、上書き保存すると、ファイルがアップロードがされてました。

「theme watch --allow-live」の状態だと、ファイルを編集しないとアップロードされないので、外部から持ってきた新しくShopifyテーマに追加したファイルはこの手順でアップロードする必要があるみたいです。
フォルダに保存するだけで同期される（アップロードされる）方法があれば教えてほしいです。

今回は以下の2つのファイルも使用します。

「theme.liquid」のCSS部分の

{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}　

の下にコードを追加します。

{{ 'application.css.scss' | asset_url | stylesheet_tag }}　

「theme.liquid」のJS部分の

{{ 'bootstrap.min.js' | asset_url | script_tag }}

の下にコードを追加します。

{{ 'application.js' | asset_url | script_tag }}