Changes to .liquid file not updating?

Solved
Highlighted
New Member
3 0 0

Hi! I'm new to shopify theme developing, and I'm getting a bit frustrated...

I installed themekit and setup everything to develop locally, and when I change regular .css files they seem to update just fine.

But when I change css.liquid files changes don't seem to update. 

I do see these messages:

04:20:50 [development] processing assets/custome_style.css
04:20:51 [development] Updated assets/custome_style.css
04:22:13 [development] processing layout/theme.liquid
04:22:13 [development] Updated layout/theme.liquid
04:24:56 [development] processing assets/custome_style.css
04:24:57 [development] Updated assets/custome_style.css
04:33:16 [development] processing snippets/critical-css.liquid
04:33:16 [development] Updated snippets/critical-css.liquid
04:35:28 [development] processing snippets/critical-css.liquid
04:35:29 [development] Updated snippets/critical-css.liquid
04:42:33 [development] processing assets/custome_style.css
04:42:34 [development] Updated assets/custome_style.css
04:53:54 [development] processing assets/custome_style.css
04:53:55 [development] Updated assets/custome_style.css
04:55:52 [development] processing assets/custome_style.css
04:55:53 [development] Updated assets/custome_style.css
04:56:07 [development] processing assets/custome_style.css
04:56:08 [development] Updated assets/custome_style.css
11:34:26 [development] processing layout/theme.liquid
11:34:27 [development] Updated layout/theme.liquid

 

And I also see file updated in the online editor:

Screen Shot 2020-07-13 at 11.49.24 AM.png 

 

But no matter how many times a clear cache I still see this in the Chrome inspector:

Screen Shot 2020-07-13 at 11.51.00 AM.png

Which are the old values.

 

So what's going on? How can I make sure my liquid changes are posted?

Thank you

0 Likes
Highlighted
Shopify Partner
2294 117 356

This is an accepted solution.

Multiple things are going on here

  1. to use liquid to render CSS in critical.css the liquid file needs to be critical.css.liquid in ,  not critical-css.liquid as all that does is make a file critical-css.liquid(no processing)
  2. if you are using critical.css ONLY as a snippet it still needs to be included in the proper place in the theme
  3. if you are trying to serve critical.css as a web file it needs to be in the assets directory
  4. the css your viewing in developer tools is coming from theme.scss.css (theme.scss.liquid,etc) NOT the file you assume should be there regardless of UI feedback
  5. if critical.css comes before theme.css in the source|loading then of course you wont see critical.css because the Cascade makes theme.css styles have priority once it loads
    1. the main way to be able to see critical.css before other assets loads is to use developer tools to throttle your connection to make it slow.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
Highlighted
New Member
3 0 0

Hi @PaulNewton thank you for your reply. Let me explain how I got to that file in the first place. 

This is a theme I inherited from another developer. I'm just trying to scrap the surface of how things work here on shopify. 

Basically what I did was that I inspected on chrome what was the class name that was driving a specific element. In this case: .site-header__cart svg

Then I went into the files, and searched for where this class was being set. And the ONLY place in the code where I found that class name was in that critical-css.liquid file that I mentioned. Nowhere else... 

 

BUT, as I was writing this response, and reading your answer, I actually started searching directly on theme.scss.liquid and now I found this:

.site-header__cart {
  svg {
    width: 22px;
    height: 30px;
    margin: -15px 0 0 -2px;

    @include media-query($medium-up) {
      width: 26px;
    }
  }

  &::after {
    border-color: $color-header-links;
  }
}

 

which explains everything. I now changed that one and it works as expected. Guess I won't be searching for the full css class name going forward. 

 

Thank you for your insight! I'll mark your answer as correct now. But just out of curiosity, on my theme.liquid file I also found this:

 

        {{ content_for_header }}

        {% include 'critical-css' %}
        {% include 'load-css' %}

 

which is why I assumed that critical-css file was the one being used... Are you telling me this file is probably not being used at all then? 

0 Likes
Highlighted
Shopify Partner
2294 117 356

@jlubeck wrote:

Guess I won't be searching for the full css class name going forward. 

 

If SASS(.scss), or BEM, is involved then start from the end and work up,  though sometimes you just have go to the rendered .css urls or the rendered .scss urls so liquid based outputs will be findable.

{{ theme.scss.liquid | asset_url }} will get cdn.shopify....../assets/theme.scss.css along with an unminfied theme.scss 

 


 But just out of curiosity, on my theme.liquid file I also found this:

 

        {{ content_for_header }}

        {% include 'critical-css' %}
        {% include 'load-css' %}

 

which is why I assumed that critical-css file was the one being used... Are you telling me this file is probably not being used at all then? 


Critical Css is an Performance Optimization technique https://web.dev/extract-critical-css/

It's just enough CSS to have a reasonably styled page quickly before waiting for larger files to load.

Arguably critical.css should be immediately after the opening <head> tag literally after no line breaks no excess whitespace either, and definitely not after {{ content_for_header}} which is always bloated.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
New Member
3 0 0

Thank you for the insight Paul. Much appreciated

0 Likes