Invalid CSS in assets/sectionhub.scss.liquid

Technical Q&A
,

Topic summary

CSS compilation error in assets/sectionhub.scss.liquid when customizing a Shopify theme: “Invalid CSS after ’ font-family: ': expected expression … was ‘;’ at line 237.” The snippet shows font-family set via a Liquid setting variable.

  • Suspected cause: the Liquid variable {{ settings.sh_paragraph_family.family }} resolves to an empty value, producing CSS like “font-family: ;” which is invalid.
  • Context: Liquid placeholders ({{ … }}) pull values from theme settings; if unset, they can render empty and break SCSS/CSS.

Suggested action: ensure the theme setting for sh_paragraph_family.family is populated (a default/fallback should exist, but may not in this theme). Setting a valid font family should resolve the error.

Follow-up question: the OP asks where to find or verify settings.sh_paragraph_family.family to check if it’s empty, indicating uncertainty about the file/location of that setting.

Status: unresolved/ongoing. A concrete fix (locate and set the theme setting) is suggested, but guidance on where to find the setting was not provided. The provided code snippet is central to understanding the issue.

Summarized with AI on February 1. AI used: gpt-5.
1

Hi whenever I try to customize my Shopify theme an error saying:

The following error was found in assets/sectionhub.scss.liquid

Invalid CSS after " font-family: ": expected expression (e.g. 1px, bold), was “;” at 237 appears.

I had a look at it but everything looks fine to me; here I leave you the css code.

  }
  font-family: {{ settings.sh_paragraph_family.family }};
  font-weight: {{ settings.sh_paragraph_family.weight }};
  font-style: {{ settings.sh_paragraph_family.style }};    
  color: {{ settings.sh_paragraph_color }};
  font-size: {{ settings.sh_paragraph_font_size }}px; 
  line-height: {{ settings.sh_paragraph_line_height }};
  h1,h2,h3,h4,h5,h6 {
    @include sh_initial;
    @include sh_inherit;      
    font-family: {{ settings.sh_header_family.family }};
    font-weight: {{ settings.sh_header_family.weight }};
    font-style: {{ settings.sh_header_family.style }};      
    color: {{ settings.sh_header_color }};
    font-size: {{ settings.sh_header_font_size }}px;
    line-height: {{ settings.sh_header_line_height }};
  }

Do you have any suggestions?

Thanks in advance for your support

2

I would expect that the value…

{{ settings.sh_paragraph_family.family }}

… is empty/blank. Generally speaking a theme should always have a default/fallback in place but it’s possible yours does not. Make sure that setting has a value and isn’t left empty.

1 Like
3

Thanks for the reply but I can’t figure out in which file settings.sh_paragraph_family.family is placed to see if it is empty or has a value.