Cannot find the 'theme.scss.liquid' file in Assets folder - Debut Theme

Store Design

Topic summary

Main issue: Several users can’t find theme.scss.liquid in the Debut theme while trying to add custom fonts or adjust CSS (e.g., header/button text and product title alignment).

Key update: Shopify deprecated Sass in themes, so Debut no longer includes theme.scss.liquid. Styles now live in assets/theme.css, and some Liquid previously in that file is handled in layout/theme.liquid. A Shopify blog link confirming the deprecation was shared.

Suggested solutions:

  • Use assets/theme.css instead of theme.scss.liquid for CSS changes and @font-face rules.
  • Alternatively, upload font files via Admin > Content > Files, copy the file URL, and add a block with @font-face and font-family usage at the bottom of layout/theme.liquid.
  • Identify correct CSS selectors in theme.css for headers, buttons, and body text; no definitive selector list was provided.

Notes: A video and screenshots were shared to show the absence of theme.scss.liquid. Some advice conflicted (e.g., referencing styles.scss.liquid), adding to confusion.

Status: Partial successes reported; others still cannot target specific elements (headers/buttons, product titles, body text). No single, final resolution; consensus is to use theme.css/theme.liquid under the new CSS-only setup.

Summarized with AI on December 27. AI used: gpt-5.
21

I would like to give you the recommendation to support you so kindly follow steps below:

Step 1: From your Shopify Admin, navigate Content section and select “File”.
Step 2: Upload your Font File by selecting “Upload file”.
Step 3: The opened window will allow you to select the font file to add. After having successfully uploaded the file, select the “Link” icon to copy the file link.
Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 5: Add the following codes at the bottom of the file.

<style> 
@font-face { 
font-family: "GrandSlang-Roman"; 
src: url("Linkofthefontfile");
 }
h1, h2, h3, span.marquee-text {
font-family: "GrandSlang-Roman" !important;
} 
 </style>​

Replace the below elements of the code with actual data.

  • Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.
    Hit “Save” when finished.
    So you can use FontName that you added.
    If it still does not work, please send me the link of Font file that you uploaded to File folder so I can give the correct code for you.

I hope the above is useful to you.