[Shopfiy]CSSのbackground-image

メタフェイズではShopifyを利用したストア構築を行っています。
今回はassets内のCSSのbackground-imageの扱いを紹介いたします。

assets内のcssのbackground-imageなどでassets内の画像を読み込んでいる場合、該当箇所をLiquidへ書き換える必要があります。

assets/styles.cssというファイルがある場合assets/styles_.css.liquidへコピーします。※ファイル名は任意

次に

background-image: url("./mod_img_sprite.png");

上記を

background-image: url("{{ "mod_img_sprite.png" | asset_url }}");

へ書き換えます。

そして、Liquidテンプレート内のCSS読み込み部分を

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

へ書き換えます。

Shopifyを利用したストアの構築・運用のご相談は株式会社メタフェイズまで！