Shopify Collection Page Images

Question

I am trying to define the display images of the collection page with a meta field. I want to make the collection page images different from the product images. The following code snippet is from main-collection.liquid and defines the collection page:

                <product-list class="product-list" role="region" aria-live="polite">
                  {%- for product in collection.products -%}
                    {%- for block in section.blocks -%}
                      {%- if forloop.parentloop.index != block.settings.position -%}
                        {%- continue -%}
                      {%- endif -%}

                      <div id="block-{{ section.id }}-{{ block.id }}" {% render 'surface', class: 'product-list__promo group', text_color: block.settings.text_color %} {{ block.shopify_attributes }}>
                        <a {% if block.settings.link_url %}href="{{ block.settings.link_url }}"{% endif %} class="content-over-media h-full rounded-sm" style="--content-over-media-overlay: {{ block.settings.overlay_color.rgb }} / {{ block.settings.overlay_opacity | divided_by: 100.0 }}">
                          {%- case block.type -%}
                            {%- when 'promotion_image' -%}
                              {%- if block.settings.image != blank -%}
                                {%- capture image_class -%}zoom-image {% if block.settings.image != blank %}hidden sm:block{% endif %}{%- endcapture -%}
                                {%- capture sizes -%}(max-width: 699px) 100vw, {{ 400 | times: block.settings.column_span }}px{%- endcapture -%}
                                {{- block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', sizes: sizes, widths: '200,300,400,500,600,700,800,900,1000,1200,1400,1600', class: image_class -}}
                              {%- endif -%}

                              {%- if block.settings.mobile_image != blank -%}
                                {{- block.settings.mobile_image | image_url: width: block.settings.mobile_image.width | image_tag: loading: 'lazy', widths: '200,300,400,500,600,700,800,900,1000,1200', class: 'zoom-image sm:hidden' -}}
                              {%- endif -%}

I have already tried to replace block.settings.image with my metafield product.metafields.custom.collection, unfortunately this did not help. Does anyone have any other ideas? I am using the theme 'impact'.

Answer 1

Solved it, the right file was the product-figure.liquid file, not the main-collection.liquid. From their on it was an easy one :)