info-block-snippet-extract

<div class="ProductList ProductList-slick ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">
          {%- for product in collection.products -%}
            
            

              {%- for block in section.blocks -%}
                {%- case block.type -%}
                  {%- when 'info-block' -%}
                    {%- if forloop.parentloop.index == block.settings.info-position -%}
                      <div class="info-block info-block--columns-{{- block.settings.column_number -}}">
                        
                        <div class="info-list-heading-block scale-on-hover height--cover page-header page-header--with-background image-overlay image-overlay--bg-full">
                          <a href="{{- block.settings.lnk-url -}}">
                            <div class="background-image scale-on-hover__target" style="background-position: center center; background-image: url('{{- block.settings.promo-bg-img | img_url: '1600x' -}}')">
         
                            </div>
                            <div class="overlay-text overlay-text--inline overlay--v-center overlay--h-center image-overlay__over">
                                <div class="overlay-text__inner">
                                    <div class="overlay-text__text ProductItem__Info {{ block.settings.content_position | default: 'left' }}">
                                        {% if block.settings.heading != blank %}
                                        <div class="overlay-text__title h3-style">{{ block.settings.heading }}</div>
                                        {%- endif -%}
                                        {% if block.settings.info-cntnt != blank %}
                                        <div class="overlay-text__rte rte">
                                            <p class="Heading">{{- block.settings.info-cntnt -}}</p>
                                        </div>
                                          {%- endif -%}
                                        {% if block.settings.btn-lnk-txt != blank %}
                                        <div class="text-column__button-row text-column__button-row--primary">
                                            <span class="text-column__button btn btn--primary btn--link">
                                                <span class="btn__text">{{- block.settings.btn-lnk-txt -}}</span>
                                            </span>
                                        </div>
                                        {%- endif -%}
                                    </div>
                                </div>
                            </div>
                          </a>
                          {% if block.settings.btm-link-url != blank %}
                            <a class="info-list-heading-block__link" href="" aria-labelledby="template--15345579851829__16359278676808bea5-Heading"></a>
                          {% endif %}
                        </div>
                        
                      </div>
                    {%- endif -%}
                {%- endcase -%}
              {%- endfor -%}
            
            <div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}" data-product-id="{{ product.id }}">
              {%- render 'product-item-slick', product: product, show_product_info: true, show_vendor: section.settings.show_vendor, show_color_swatch: section.settings.show_color_swatch, show_labels: true -%}
            </div>
          {%- endfor -%}

        </div>
        
{
  "name": "Collection page",
  "class": "shopify-section--bordered",
  "settings": [
  ],
  "blocks":[
    {
      "name":"Promotion Block",
      "type":"info-block",
      "settings":[
        {
          "type":"image_picker",
          "id":"promo-bg-img",
          "label":"Promotion Background Image"
        },
        {
          "type":"url",
          "id":"lnk-url",
          "label":"Promotion Link Url"
        },
        {
          "type": "select",
          "id": "content_position",
          "label": "Content position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            },
            {
              "value": "center",
              "label": "Center"
            }
          ],
          "default": "left"
        },
        {
          "type":"text",
          "id":"heading",
          "label":"Promotion Heading",
          "default":"Promotion Heading"
        },
        {
          "type":"text",
          "id":"info-cntnt",
          "label":"Promotion Content",
          "default":"Promotion Content goes here"
        },
        {
          "type":"text",
          "id":"btn-lnk-txt",
          "label":"Promotion Link Text",
          "default":"Link Text"
        },
        {
          "type": "range",
          "id": "info-position",
          "min": 1,
          "max": 60,
          "step": 1,
          "label": "Info Block Position",
          "default": 2
        },
        {
          "type": "select",
          "id": "column_number",
          "label": "Column Width",
          "options": [
            {
              "value": "one",
              "label": "One"
            },
            {
              "value": "two",
              "label": "Two"
            },
            {
              "value": "three",
              "label": "Three"
            },
            {
              "value": "full",
              "label": "Full width"
            }
          ],
          "default": "one"
        }
      ]
    }
  ],
  "presets":[
    {
      "name":"Promotion block",
      "blocks": [
        {
          "type": "info-block"
        }
      ]
    }
  ]
}