Converting a block into a section

January 04, 2019

This section is not necessary when adding a card but it is recommended for some cards where the section uses {% for i in (1..X) %}.

For this example I am going to use bc__logo-slider.liquid:

After

bc__snip-logo-slider.liquid:

What I have done is removed all the HTML/Liquid code between the for loop and  after the capture and assign as this code is dynamic. This has been added to a snippet prepended with “bc__snip” and the rest of the snippets name to keep it organised (this may need to be shortened if it exceeds the character limit).


The for loop has been wrapped with a conditional statement checking if the type is equal to ‘block’. If it is, the previous code will run with and include of the HTML/Liquid after the liquid statements. I have refactored the code shown in the images below as the conditional statement is no longer needed the it has already been written above.

After the else from the initial conditional statement, I have added the following code:

{% for block in section.blocks %}

 {% if block.type == "image" %}

   {% assign url = block.settings.url %}

   {% assign image = block.settings.image %}

   {% include "bc__snip-logo-slider" %}

 {% endif %}

{% endfor %}

The for and if statement is the equivalent of the for loop {% for i in (1..X) %}(you can add a max-blocks later if you need to restrict how many blocks you user can add). The assigns are the equivalent of the captures and assign as the captures are no longer needed. The include is added the HTML/Liquid has been relocated to a seperate snippet to reduced DRY code.

Once this has been done the schema now needs changing on the “bc__s-logo-slider” by removing all the section {% for i in (1..X) %} specific code and replace it with blocks.


Remove any code that has the ID’s incrementing each time.


For example all the ID’s with image(1-32) and url(1-32) have been removed.

Then at the bottom of the section settings, above the presets, the following code has been added.


"blocks": [

   {

     "type": "image",

     "name": "Image",

     "settings": [

       {

         "type": "image_picker",

         "id": "image",

         "label": "Image",

         "info": "Use a square image 300x300 recommended"

       },

       {

         "type": "url",

         "id": "url",

         "label": "Link URL"

       }

     ]

   }

 ],


Then click save and you section will now work with blocks and give you the ability to rearrange the order.