Product Image Grid Component

The Product Image Grid component in Replo provides an easy and dynamic way to display all images associated with a product on your Shopify page. This component automatically populates with the product’s images, updating seamlessly whenever a different product is selected.

Adding the Product Image Grid Component

1. Locate the Component:

   • To add the Product Image Grid component, go to the components panel in Replo and search for "Product Image Grid." The components panel can be found by clicking on “Components” in the top-left corner of the project dashboard, next to the “Layers” selection.

   • Drag the component into your Product container. This ensures that the component automatically pulls in the relevant product data.

2. Configuring the Layout:

   • By default, the Product Image Grid will display in a column layout. You can adjust this layout to suit your design preferences. For example, select the "four-column layout" to display the images in a four-column grid. Also try playing around with column/row span and auto-layout.

   • The grid may include filler containers upon selection of some layout styles, which you can remove to ensure that only the product’s images are shown.

   • Using the max width and height config settings for the image grid are helpful to ensure images stay within a set area.

Dynamic Image Handling

• The Product Image Grid automatically pulls in all images associated with the product contained within the same product container. This means that whenever a different product is selected using a product selector component, the images in the Product Image Grid will dynamically update to reflect the newly selected product’s images.