I need to create a custom section on Shopify and that custom section is called on every page
1 Answer
Create a file in the theme’s
{% for block in section.blocks %} {% case block.type %}/sections
directory for each page we’ll add sections to. For example, we might create/sections/about.liquid
to be used with the About template. The markup in these files is, for the most part, a long switch statement followed by an accompanying schema. Like this:{% when 'hero' %} {% include 'snippet_hero-banner' %} {% when 'program' %} {% include 'snippet_module-program' %} {% when 'coaching' %} {% include 'snippet_coaching' %} {% when 'shop' %} {% include 'snippet_shop-now' %} {% when 'promo' %} {% include 'snippet_promo' %} {% when 'comparison' %} {% include 'snippet_comparison' %} {% endcase %} </div> {% endfor %} </div> {% schema %} { "blocks": [ { "type": "hero", "name": "Hero Banner", "settings": [ { "id": "bannerImage", "type": "image_picker", "label": "Banner Image" } ] }, { "type": "program", "name": "Program Selector", "settings": [ { "id": "program", "type": "radio", "label": "Choose a program", "options": [ {"value": "planA", "label": "Plan Type A"}, {"value": "planB", "label": "Plan Type B"}, {"value": "planC", "label": "Plan Type C"} ] } ] }, { "type": "coaching", "name": "Coaching", "settings": [ { "id": "coachingTitle", "type": "text", "label": "Title" }, { "id": "coachingSummary", "type": "textarea", "label": "Summary" }, { "id": "coachingImage", "type": "image_picker", "label": "Image" } ] }, { "type": "shop", "name": "Shop Now", "settings": [ { "id": "shopNowTitle", "type": "text", "label": "Title", "default": "What do you have to lose? Shop now." }, { "id": "shopNowHeader1", "type": "text", "label": "Left Header", "default": "The 4-1-1" } ] }, { "type": "promo", "name": "Promo", "settings": [ { "id": "promoTitle", "type": "textarea", "label": "Title" }, { "id": "promoSubtitle", "type": "textarea", "label": "Subtitle" } ] }, { "type": "comparison", "name": "Compare", "settings": [ { "id": "comparisonImage", "type": "image_picker", "label": "image" }, { "id": "comparisonTitle", "type": "text", "label": "Title" }, { "id": "comparisonSummary", "type": "textarea", "label": "Summary" }, { "id": "comparisonButtonLink", "type": "url", "label": "Button Link" }, { "id": "comparisonButtonText", "type": "text", "label": "Button Text" } ] } ] } {% endschema %}
- Customize the page. When in the theme editor, you’ll see that the page has only one section–the one that was included within the template file. Unlike on the home page, you’ll need to “drill down” to see the available sections for the page.
We create snippets for each page element page that will be editable as a section. The code above uses include to reference markup from the /snippets directory based on the block’s type. That type, along with the block’s name, are denoted in the schema portion below the switch statement.
The
id
is the handle for a particular editable characteristic of the blockThe
type
denotes what kind of setting it is. For example:A
color
type will generate a field in the customization sidebar which will allow you to choose from a color palette.The
label
is simply the label for the field.
In the /templates
directory, replace the markup in your page (for example, /templates/page.about.liquid
) with something like this: {% section 'about' %}
This will include the /sections/about.liquid
file that we created in the previous step.
Click to edit this section, and we find that we are able to add any of the blocks we built–as long as we wrote the possibility into the case
statement.
- Make an element of a block customizable. This can be done by defining the settings in the section’s
{% schema %}
and using the{{ block.settings.yoursetting }}
liquid tag to render the content. Now you can customize images, plain text, URLs, and more.
Results
Congratulations! If you’ve been following along then you’ve brought sections functionality to your entire shop.