What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

Solved

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

monkmedia
Visitor
1 0 0

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

Accepted Solution (1)

Liam
Community Manager
3108 344 895

This is an 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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 6 (6)

Liam
Community Manager
3108 344 895

This is an 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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

LostPer
Shopify Partner
42 2 8

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
Community Manager
3108 344 895

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

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

LostPer
Shopify Partner
42 2 8

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

Liam
Community Manager
3108 344 895

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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Community Manager
3108 344 895

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!

 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog