We’re Blend Commerce

Contact our team using the options below

hello@blendcommerce.com
+44 (0) 1789 765 822
+1 (833) 456-4236

Courtyard Offices, 55 High St, Alcester B49 5AF

Search our shop

    We’re Blend Commerce

    Getting in Touch

    Contact our team using the options below

    hello@blendcommerce.com
    +44 (0) 1789 765 822
    +1 (833) 456-4236

    Courtyard Offices, 55 High St, Alcester B49 5AF

    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.

    About the author

    Let's achieve better Shopify store performance. Together.

    We help clients achieve significant results. On average, clients who work with Blend on design & development projects for their Shopify store achieve these results after 3 months: