Ecommerce Shopify WordPress Discussion

Shopify Collection Page Images

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'.
Solved it, the right file was the product-figure.liquid file, not the main-collection.liquid. From their on it was an easy one :)

December 29, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.