How does one build a new theme to support the new sections architecture?

[monkmedia]

Hello

I am new to building Shopify themes. I would like to build a theme that is uploadable through the admin UI, however the docs are confusing me.

I have created a developer preview store, however I don't know where to start with building a new theme from scratch ( or from a boilerplate).

I was directed to the Slate repo but apparently this is no longer being supported due to the new sections architecture (https://shopify.dev/docs/themes/sections).

My question is, how do I go about developing a new theme to support the new sections architecture? Is there a boilerplate/repository/example code I can look at online? I have seen the liquid tags but I would like to set up a full dev workflow for compiling etc. as well as work locally.

Thank you for your help

[Liam · Accepted solution]

Hi @monkmedia 

Thanks for getting in touch and great to hear you've been exploring the options with the new sections architecture and the developer preview. Currently the best option for building your own theme based on the new theme structure is to explore the sections-compatible version on Debut, which you can download here, and use this as a basis for your own project. You can reverse engineer this Debut theme, or build on top of it, as the new theme directories (/content, /page, and /frame) are populated with sections that currently work with the developer preview store.  

At the moment we don't yet have a bare bones theme for testing, or a guide for building a theme from scratch using the new sections architecture, but we will be expanding our developer resources in the coming months to provide documentation and support when building themes using this new structure. 

Hope this helps,

Liam Griffin

Shopify | Developer Community Manager

[LostPer]

How do you set up the development environment for this? Themekit doesn't seem to support it. A theme deploy doesn't push anything for the new folders, as an example. What would be the development environment of choice now?

[Liam]

Hi @LostPer 

Thanks for your question- In theory, Theme Kit should work the same with a developer preview store with a sections-compatible theme, as has previously worked when connecting to a regular store. Support for "Sections Everywhere" was added in V1.0.1 and I've been using Theme Kit to read and write to Liquid files in the /pages directory. However I haven't used `theme deploy` yet - what exactly are you seeing when you run this command, does the CLI display an error? 

Cheers,

Liam

[LostPer]

I will only update the "old" folders. Frames etc is not pushed to the dev store... Rendering a broken Debeut beta theme

[Liam]

Thanks for flagging this @LostPer - I'll reach out to our internal team to see what we can do here, and I'll update in this thread. 

[Liam]

Hi @LostPer 

I've tried deploy out on my own dev store and I was able to update the new directories, eg by adding a new file within the /frame directory and running theme deploy. I did get an error message the first time however as there was no {% schema %} tags - and the file didn't upload (although you can upload files to the /sections directory without the {% schema %} tags). 

Otherwise- have you set up any ignore rules in your config file that might be blocking the files from being updated? 

Hope this helps!