Shopify frontend setup

New Member
1 0 0


Been fixing themes in Shopify stores for a few years now, but for the first time have to write one from scratch. I have gone through many tutorials, quite a few suggested using Slate for starters, but it seems that it's been deprecated for the past half a year. It seems the theming setup is quite unopinionated, which makes it a lot harder to set up the workflow according to best practices, as we, 3rd party developers, have no idea when support for some feature is going to be dropped.

More specifically, for Debut theme there was the theme.scss.liquid file, which compiled into theme.scss and then theme.css. In my opinion, it was kind of good workflow, as we could then use the variables and mixins from the scss file directly in our component files. And was quite disappointed when setting a new theme there was only theme.css.liquid file, already pre-compiled. Thus, we cannot change any, for instance, breakpoints there, nor re-use them elsewhere. Moreover, this is not documented anywhere (or maybe I simply couldn't find the right page, please note if it's my mistake here).

Question then is, what's the setup Shopify expects us to create? Writing everything on top of Debut, creating our own variables and manually replacing all breakpoints if we need such adjustment?

And a bonus question - what's the use of variables.css.liquid?