Resize Image of a Collection List Wrapper


Hey,
how can I resize the thumbnail-image of a collection list wrapper, which directs to the product? The picture itself is zoomed in. Its down there where it says “Neueste Artikel”.

Here is my read only link: LINK

1 Like

Hi there,

You can resize thumbnail images in Collection List wrappers using either image elements or background images. For image elements, you can adjust the size by:

  • Setting specific width and height values
  • Using percentage-based dimensions
  • Applying “Fit” settings to control how the image fills its container

For background images, you can control the size through the Style panel using the background-size property and choosing between options like “Cover,” “Contain,” or custom dimensions.

Both image elements and background images will maintain their aspect ratio by default, but you can override this if needed through the Style panel settings.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like

Doesnt work. I cant control the image, because it takes the image from cms(/from the collection item) in the dynamic style settings.

1 Like

Hey @Nyaro ,

You can select the Collection Item and scroll down in the Style tab (on the right sidebar) and click on the ‘+’ icon beside ‘Image & Gradient’ under Background settings as highlighted below:

It will open a small box of settings, you can select ‘Cover’ as the size in it and the image should show up in the ratio you want as shown below.

Hope this helps.

1 Like