Solved

Transition questions

Roger_McEffort
Shopify Partner
43 0 7

I think I want to know what the transition for a store with a boatload of snippets over to sections will look like.

 

Questions I have:

Do we progressively comb through all of our snippets and turn them into sections? 

Do we need to create a new development store first, or turn it "developer mode" for a current store?

If we do hit the big red button, will all of the currently snippets be rendered inactive? Will they work? Will my site break?

 

I'm eager to jump into this, so do let us know!

Accepted Solution (1)

Liam
Shopify Staff
2731 297 760

This is an accepted solution.

Hi Roger!

 

Liam here from the Partner Tools & Education team 🙂 We're also eager and excited to see the new sections feature being rolled out, so it's great to hear questions coming in from our Partner community!

 

1. As you've noticed, the new sections do not support snippets, but since this is a progressive enhancement you will be able to have a theme with "old" sections that include your existing snippets, alongside the new section files that don't use snippets. One route to transitioning over a store, once the new UI is available, could be to migrate one group of pages (eg: product pages) over to the new sections paradigm. You could achieve this by creating a page section for products in the pages folder. This file could contain the raw code of snippets that you want to appear on every product page. Additional snippets that you'd like to be optional on product pages could also be added inline within content sections, stored inside the content folder. Once this is set-up, your client will be able to enable sections on product pages from the Online Store editor, as well as add sections that exist in the content folder.

 

2. Right now, you can experiment with developer preview stores to test the output on your storefront of the new code but not the new online store design experience. When a store is created with the developer preview, you will find a theme with the new directory structure called "Dev Preview". This can be used to test the new sections. Once this is available on active merchant stores, you can create the new directories to themes and populate the directories with new sections.

 

3. There is no "big red button" to enable sections on a theme, so you don't need to worry about snippets being disabled. They will still work on existing sections. If you want them to work within new sections, the snippets will need to be migrated into the appropriate section file(s).  

 

I hope this helps Roger! We'll be keeping the section themes docs updated here as we roll out the feature.

 

Best of luck & let us know if you have any more questions 🙂

 

Liam Griffin

Shopify | Developer Tools & Education

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 9 (9)

Liam
Shopify Staff
2731 297 760

This is an accepted solution.

Hi Roger!

 

Liam here from the Partner Tools & Education team 🙂 We're also eager and excited to see the new sections feature being rolled out, so it's great to hear questions coming in from our Partner community!

 

1. As you've noticed, the new sections do not support snippets, but since this is a progressive enhancement you will be able to have a theme with "old" sections that include your existing snippets, alongside the new section files that don't use snippets. One route to transitioning over a store, once the new UI is available, could be to migrate one group of pages (eg: product pages) over to the new sections paradigm. You could achieve this by creating a page section for products in the pages folder. This file could contain the raw code of snippets that you want to appear on every product page. Additional snippets that you'd like to be optional on product pages could also be added inline within content sections, stored inside the content folder. Once this is set-up, your client will be able to enable sections on product pages from the Online Store editor, as well as add sections that exist in the content folder.

 

2. Right now, you can experiment with developer preview stores to test the output on your storefront of the new code but not the new online store design experience. When a store is created with the developer preview, you will find a theme with the new directory structure called "Dev Preview". This can be used to test the new sections. Once this is available on active merchant stores, you can create the new directories to themes and populate the directories with new sections.

 

3. There is no "big red button" to enable sections on a theme, so you don't need to worry about snippets being disabled. They will still work on existing sections. If you want them to work within new sections, the snippets will need to be migrated into the appropriate section file(s).  

 

I hope this helps Roger! We'll be keeping the section themes docs updated here as we roll out the feature.

 

Best of luck & let us know if you have any more questions 🙂

 

Liam Griffin

Shopify | Developer Tools & Education

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

Roger_McEffort
Shopify Partner
43 0 7

Thanks for the detailed explanation, Liam. Looking forward to getting my hands dirty!

timd_mackey
Shopify Partner
60 1 31

Thank you Liam for the detailed explanation!

 

I'm pretty apprehensive about the lack of snippets for my own use cases, as I've come to rely on them for some things. It certainly won't be an insurmountable task to migrate away from them, but it's going to involve a sizeable amount of code duplication.

 

One simple way that I use snippets for several of the stores I manage is to provide custom price formatting beyond what shopify provides. We like to display prices differently depending on their value—above one dollar: "$1.35", less than a dollar: "43¢", and 0 dollars as: "Free". To implement this in a simple way, I have a snippet called "money", and all prices are generated like so: {% include 'money' with product.price %}.

 

I use a similar method for some other things to reduce the repetition of complex formatting or logic code, so this will be a bit painful for me to migrate. I understand the desire for simplicity though in making this decision!

timd_mackey
Shopify Partner
60 1 31

For those interested in more details about this decision, this question was asked on the panel at UNITE when the new design experience was unveiled (at 26:20):

 

Peter_Wooster
Shopify Partner
23 0 11

I also use snippets as subroutines throughout my themes.  The loss of these will be painful, does the new system provide a replacement, eg. can sections include sections?

 

StyleHatch
Shopify Partner
5 0 0

Shopify did just merge a new `{% render %}` tag that is designed to be a replacement for `{% include %}`.  The biggest change is that the use of snippets through render are tightly scoped which does not inherit the parent scope.  Think along the lines of how the current section's assigns and settings are not accessible outside of the section.

https://github.com/Shopify/liquid/pull/1122

https://www.stylehatch.com
Roger_McEffort
Shopify Partner
43 0 7
So how do we pass parent scope in?
StyleHatch
Shopify Partner
5 0 0

I'd wait on the documentation from Shopify once they roll it out on the platform.  Even though it's now an official tag for the Liquid library it hasn't been merged into the Shopify.

 

In theory, I would think it will work similarly to the ways you pass variables with the include all on one line.

{% render 'snippet' product:product, custom_variable: 'my product title' %}

https://help.shopify.com/en/themes/liquid/tags/theme-tags#include

https://www.stylehatch.com
Peter_Wooster
Shopify Partner
23 0 11

My current uses require the ability to use the snippet as a function.  If it was tightly scoped with arguments and a result that would be great.  Even better if it could call itself recursively.  Give us a bit of functional programming.