Add promo block at desired place on collection page with Shopify

 hello people,

append following schema in your collection page code 

,

  "blocks": [

      {

        "type": "feature",

        "name": "Promo blocks",

        "settings": [

          {

            "type": "select",

            "id": "style",

            "label": "Style",

            "options": [

              {

                "value": "primary",

                "label": "Primary"

              },

              {

                "value": "secondary",

                "label": "Secondary"

              }

            ],

            "default": "primary"

          },

          {

            "type": "collection",

            "id": "collection",

            "label": "Collection",

            "info": "Unless specified, promotion will appear on all collection pages"

          },

          {

            "type": "text",

            "id": "position",

            "label": "Display after X products",

            "default": "4"

          },

          {

            "type": "richtext",

            "id": "text",

            "label": "Title",

            "default": "<p>Promotion text<p>"

          },

          {

            "type": "url",

            "id": "link",

            "label": "Link"

          },

          {

            "type": "text",

            "id": "button",

            "label": "Button text",

            "default": "More info"

          }

        ]

      }

    ]

--------------------------------------------------------------

Add following code in the loop of  "collection.products"

code:

{%- for product in collection.products -%}

    

    {% assign index = forloop.index0 | downcase %}

    {% if section.blocks.size > 0 %}

      {% for block in section.blocks %}

        {% if block.settings.position != blank and block.settings.position == index %}

          {% unless block.settings.collection != empty and block.settings.collection != collection.handle %}

            {% include 'promo-block' %}

            {% break %}

          {% endunless %}

        {% endif %}

      {% endfor %}

    {% endif %}

    

      {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width -%}

{% - endfor -%}

---------------------------------------------

Create snippet named "promo-block"

<div

  class="

      grid__item grid-product {{ grid_item_width }}

  "

>

  <h3 class="rte product-grid-item--details promo-block--content">{{ block.settings.text }}</h3>

  {% if block.settings.link != blank and block.settings.button != empty %}

    <a class="promo-block--link" href="{{ block.settings.link }}">

    <span class="promo-block--button">

      {{ block.settings.button }}

    </span></a>

  {% endif %}

</div>

Output: