result grid > display 2ndary image on every 2nd grid

[william-johnson-bloomreach]

This is a specific request, from a luxury customer. But the idea is interesting.
Goal is to have an elegant, consistent layout of images, alternating between main and secondary image of products.

Request:
On a product result grid, alternate product images:

• have slots with odd numbers (1, 3, 5, 7, 9, etc....) display the main image of product
• slots with even numbers (0, 2, 4, 6, 8, etc...) display the secondary image of the product
  Do maintain the image switch on hover

[joerideg]

Hi William,

Thanks for opening the post and for the explanation of what you're looking to achieve. Alternating product images in the grid layout is an interesting idea however customizing the product grid layout and behavior is not something the Limitless UI library itself handles.

The goal of Limitless UI is to provide a set of flexible, composable UI components that can be used to build e-commerce experiences. Specific customizations to the product grid, like alternating images, would be implemented by you in your application code that utilizes the Limitless UI components.

I'd recommend checking out our Storybook documentation which has live examples and code snippets showing how to use each of the components.

The Results and Product Card components in particular may be a good starting point. You would utilize Results and pass in the custom React component in your React application code to achieve the behavior you desire, like conditionally displaying different images.

Please let me know if you have any other questions! The documentation should help guide you on utilizing the Limitless UI components to build the experience you outlined.