Shopify Question posted in
The Shopify help center can be found here.

SCSS Variable to toggle background URL from path to ASSET_URL – Shopify

Is this even possible? Basically I have my static HTML templates which use image paths like url (.../img/Interface/Icon.svg). The templates are then used in a Shopify (slate) theme so all the images need to go straight into the Assets folder, with no sub-folders.

This would be fine as I could just match my static template structure with the Shopify slate theme but apparently the images should be in this format: #selector {background:url({{ 'image.jpg' | asset_url }});}.

Can anyone think of a way of managing the CSS when it’s copied across? Manually changing them all the time will be a pain.

Tags:

2

Answers


  1. 0

    You are not required to write them using the asset_url filter.

    You can just leave them as background:url('image.jpg') and they will work with the only difference that they will be cached this way.

    Login or Signup to reply.
  2. 0

    I’m not sure what you’re struggling with, but if you want to use liquid in your SCSS file, just save it as whateverStylesheet.scss.liquid and then you’ll be able to use any liquid within the file, Shopify processes liquid first and then SCSS before rendering the final CSS document.

    Edit: Read Shopify’s SASS Guide for more information.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search