Debutify custom sections for custom categories and pages: Picker & draggable

11 0 1

Premise: I have experience in HTML, CSS, Wordpress. I'm able to edit/customize simple JS/PHP code. I have no experience with Shopify liquid. 

Generally Shopify (monthly cost) and the Debutify Theme (free version) provide a lot for a small click, drag and edit shop where additional costs are to avoid. Beside the unsatisfying Multilanguage Core/FreeApp and lacking SmartOrderLimits/Packages-Combinations I'm mainly trying to improve the Shop Theme/Design experience both on the Back- and Frontend.  

Using mainly a couple of useful Online Articles explaining the basic steps to Creating Sections (,, I was able to: 

Adding the code to include 3 additional sections in a custom collection: 

  • Templates: collection.custom.liquid
  • Sections: collection-custom-hero.liquid
  • Sections: collection-custom-gallery.liquid
  • Sections: collection-custom-featured-image.liquid
  • {% schema %} "presets" "category":"Custom"

In the Products > Collections by creating a CustomCategory I can now select the ThemeTemplate "collection.custom" and then by viewing/editing the 3 additional sections. 
Those additional sections are now also shown under "Custom" in the frontpage (index) theme editing. 

What I did not understand so far how to include frontpage theme editing functions like

  • openSectionPicker (to add more sections on this collection page)
  • draggable-element (to re-position sections on this collection page)
  • hide this custom additional sections on the frontpage (to avoid confusion)

If anyone would be so kind to give me some explanation where and how to add/edit theme code - thank you.