独自CSS追加でShopifyを簡単にカスタマイズできます。
管理画面>オンラインストア>アクション>コードを編集
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-11.36.12-1.png)
画面が変わり「Assets」の中に「新しいassetを追加する」>空のファイルを作成するで
「style(好きなファイル名でOK).css.liquid」を作成します。.cssでも大丈夫です。
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-11.42.07.png)
「アセットを追加」で完了になります。
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-11.21.26.png)
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-11.29.49.png)
次に「Layout」>「theme.liquid」ファイルを開き
<head></head>の中に下記のコードをに記述します。
{{ 'style.css' | asset_url | stylesheet_tag }}
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-22.18.51.png)
以上でCssのカスタム準備完了です。
目次
カスタムliquidで独自セクションパーツを作成
あとはセクションパーツの「カスタムliquid」で独自htmlを入れ、追加したCssファイルに記述すれば
簡単にカスタムliquidパーツが完成できます。
![](https://mellowlife.maisondelamer-design.com/mellowlife/wp-content/uploads/2022/03/スクリーンショット-2022-03-20-11.13.52.png)
コメント