Search code examples
shopifyshopify-template

How to shopify custom block create and call in any page


I need to create a custom section on Shopify and that custom section is called on every page


Solution

    • Create a file in the theme’s /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:

      {% for block in section.blocks %} {% case block.type %}
             {% 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 %}
      
    1. 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 block

    • The 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.

    enter image description here

    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.

    1. 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.

    enter image description here