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

arvinjay
Tourist
3 0 1

I'm trying to upload a custom font onto my store. All the tutorials I've watched on this have instructed that I need to edit my theme.scss.liquid file, however there doesn't seem to be one in my theme.

Are there any solutions to this?

 

 

Replies 20 (20)

dmwwebartisan
Shopify Partner
12303 2549 3702

@arvinjay 

In the Debut theme, there should be a theme.scss.liquid file in the assets folder and that is the default one. If you don't have or accidentally deleted then download the debut theme and create theme.scss.liquid file, copy and paste the code. That will solve your issue.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
arvinjay
Tourist
3 0 1

thanks for the response! hmm i just tried that, however there doesn't appear to be a theme.scss.liquid file. the closest I could find was theme.css in the assets folder?

Please see the video attached.

dmwwebartisan
Shopify Partner
12303 2549 3702

@arvinjay 

You can use theme.css file. It should work.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
arvinjay
Tourist
3 0 1

ive managed to semi-successfully implement it! But the header text on the home page still hasn't changed as well as the text on the button.

 

What is the CSS property selector/Class/(whatever the term is) for this specific body of text?

Screen Shot 2020-11-12 at 12.33.24 pm.png

SahilRamola
Visitor
2 0 1

Not working :(, i want to align the product titles. Adding the code in the theme.css file but not working.

madrift100
Visitor
1 0 0

Has anyone come up with a solution?

Jmalota
Visitor
2 0 0

Did you ever get this solved??? I am having the same issue. 😞

janehaill
New Member
6 0 0

 

I tried to move my overlay text to the bottom. I read a few suggestion that advised to copy paste a code to theme.sccs.liquid which was not available in my debut theme. So I created theme.sccs.liquid and it is totally blank. So what should I put here? Thank you

iinsomniac
Excursionist
12 0 5

search theme.css in the search bar
theme.css will be shown and that's the one you have to use to add and edit the codes. As far as I know from all these Q&As.

dmwwebartisan
Shopify Partner
12303 2549 3702

@iinsomniac 

Please add your css code your assets/styles.scss.liquid file.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
nasproject
Visitor
1 0 0

Sorry this doesn't make any sense? We don't have the correct folder to put CSS code into

janehaill
New Member
6 0 0

same as mine. i finally hired someone to fix it

Tanveerahmad
Shopify Partner
1 0 0
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.

armanid
Visitor
1 0 0

Hey were you able to get this figured out? I have the same problem 

PCMASTER
Visitor
1 0 0

The same problem also. Can anybody provide solution

dannytlake
Shopify Partner
7 0 12

Most likely this is the reason there is no theme.scss.liquid file: https://www.shopify.ca/partners/blog/deprecating-sass. This means there should only be a theme.css file. The same instructions for adding a font can most likely be used, with the exception of if the instructions use anything sass specific and not native to css.

 

 

AdamMilovanovic
Visitor
1 0 1

What Dannytlake says, SASS has been deprecated from store files, so all files containing css will by default now only contain native css. Also, the liquid code has been moved to another file so the theme.scss.liquid's content now seems to have been moved to the two following files: 

 -> assets/theme.css

->  layout/theme.liquid

AdamMilovanovic_0-1616332070923.png

 

 

MissyHaze
Visitor
1 0 0

I've uploaded my font by clicking the "Add a New Asset" as instructed. I do not see a "theme.scss.liquid" file. I do understand Shopify has transitioned to .css, which is something I need to review with my team. In the meantime, is there liquid code below that functions the same/in replace of the "theme.scss.liquid" file? Any insight is greatly appreciated.

MissyHaze_0-1635363464275.png

 

 

DxMartins
Excursionist
37 1 12

I keep hearing about this theme.scss.liquid but I've never had it in my shop. Is this normal? Does that file even exist in the current Debut version? When I need to edit something I do it in the Theme.css.

MrStranger
Visitor
1 0 0

If anyone is looking to add mega menu option in there store this video will help you out.
Was facing same issue related theme.scss.liquid
https://youtu.be/ac3mcDHB_Oo