【Shopify】独自CSSカスタマイズ方法｜初心者でも分かりやすい

2022年7月9日

独自CSS追加でShopifyを簡単にカスタマイズできます。

管理画面＞オンラインストア＞アクション＞コードを編集

画面が変わり「Assets」の中に「新しいassetを追加する」＞空のファイルを作成するで
「style(好きなファイル名でOK).css.liquid」を作成します。.cssでも大丈夫です。

「アセットを追加」で完了になります。

次に「Layout」＞「theme.liquid」ファイルを開き
<head></head>の中に下記のコードをに記述します。

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

以上でCssのカスタム準備完了です。

カスタムliquidで独自セクションパーツを作成

あとはセクションパーツの「カスタムliquid」で独自htmlを入れ、追加したCssファイルに記述すれば
簡単にカスタムliquidパーツが完成できます。