Shopify テーマ作成

[2つの方法]Shopify でSassを使う方法

この記事は約 3 分で読めます。

こんにちは、Masayukiです。

「Shopifyでオリジナルのサイトを作りたい!」

「Shopifyで独自のCSSファイルを使いたい!」

という人は必ず通る道である、Sassの使う方法について紹介します。

タイトルにもある通り2つの方法を紹介します。

コンパイルをする方法(Visual Studio Code 使用)

私自身Visual Studio Codeを使っているため、その説明となります。

まず、下記サイトを参考にVSコードにLive Sass Compilerを入れます。

続いて、Shopifyのassetsフォルダ内に「filename.scss」ファイルを作成します。

その後、上記サイトを参考に.scssのファイルをコンパイルすると、assetsフォルダ内に「filename.css」が作成されます。

その後、shopifyのlayoutフォルダ内の<head>内に

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

を入れます。(できれば、</head>の上辺りが良いです)

そうすると、表示されると思います。

ここでうまく表示されない人もいると思います(私自身そうでした)

その方はshopifyの管理画面に移動してください。

「オンラインストア→テーマ→コードの編集」で上記画像の画面に移動したら、「Assets」フォルダの中に「filename.css」があるか確認します。

もしなかった場合は「新しいassetを追加する」から「filename.css」を追加してください。

そのファイルに先程コンパイルによって生成された、「filname.css」のコードを貼り付けることで表示されます。

コンパイルをしない方法(簡単)

assetsフォルダの中に「filname.scss.liquid」のファイルを作成します。

そのファイルにSassを書き込むだけです。

その後、layoutフォルダの「theme.css」に

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

を書き込むことで表示されます。


以上の方法でSassを使ってみてください!

-Shopify, テーマ作成

© 2021 AGATA CODE Powered by AFFINGER5