How to recover a deleted theme.css.liquid asset?

Technical Q&A

Topic summary

A Shopify store preview went blank after the theme.css.liquid asset was deleted while trying to add mobile-specific CSS for an image section. The key issue was that the stylesheet file was missing, so the storefront could no longer load the theme’s CSS.

Main guidance given:

  • Restore theme.css.liquid from the original theme source.
  • Because the store appeared to use the Debut theme, the recommended fix was to add a fresh copy of that theme and copy the original theme.css.liquid file into the current theme.
  • “CSS” here means Cascading Style Sheets, the file that controls the site’s visual styling.

A second question concerned an “image with text overlay” looking correct on desktop but cropped on mobile. The concrete solution provided was:

  • Go to Customize > Image with text overlay > Section height
  • Set it to Adapt to image

Outcome:

  • The missing CSS file recovery path was identified.
  • The image display issue received a specific theme-setting fix.
Summarized with AI on March 7. AI used: gpt-5.4.
1

Hello!

I was trying to change one of my images from desktop to mobil to look the same because the mobile photo was cut off/too big but the desktop photo looked great.

As I followed these directions below, it didn’t work so I deleted the theme.css.liquid asset and it went blank. Now I can’t figure a way to recover what I lost. It’s all there on the backend but on the store preview it’s not. Help Please!! Thank you!

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 769px) {
.hero-mobile-xlarge {
    min-height: 100%;
    height: 300px;
}
}

I

2

@PursuingPurpose you need to copy that file from the original source

3

What do you mean? Could you explain step by step?

4

@PursuingPurpose you can restore your theme.css.liquid from the origin source

you can use the picture HTML tag to show the same image looks in different resolutions
5

I am sorry but I still don’t understand. What are the steps for me to restore it. What do I need to click/etc. in order to do that?

Also, the site is here in case you need for reference: https://yr58ed9d7tfedacf-56794120359.shopifypreview.com/

6

I can see the CSS file lost - so that why you need the same code from the original source that theme fresh copy.
I think your store has a debut theme -

  • you can add new fresh debut theme into your store and copy theme.css.liquid new theme to your current theme.
7

OK, thank you. I think I got it!’

Now. I also had the original question about my image. It is the image with text overlay. I put one image there and it looks great with desktop but it is cut off with mobile. How do I change that to fit the mobile screen and not mess up the desktop?

Thank you.

8

for image
9

I still have the photo and it is currently on my store. I just need to know where to paste this link? I don’t see anywhere to do that. Where do I go?

10

Hi @PursuingPurpose ,

Please follow these steps:

Hope this helps!