Tagged: masonry element, products grid, shop
I like the quick filter of the (Post)-Masonry element and would like to use it for my shop page and display products with it. This works great, but I want to achieve the same layout as the shop grid. Is it possible to make the images as large and square as in the shop grid and to put the price in the middle? I have placed the shop grid just below for comparison:
Hey lenalavendel,
Thank you for the inquiry.
You can adjust the Styling > Masonry Settings > Size Settings to Perfect Grid or experiment with the settings until you achieve the desired layout.
Perfect Grid: Display a perfect grid where each element has exactly the same size. Images get cropped/stretched if they don’t fit
Let us know if this works for you.
Best regards,
Ismael
Hi Ismael,
I had already tried all options in the size setting. Perfect Grid displays almost square images, but the text titel / price, that lays above the image makes the images too small. Please also look at the page Link that I sent, to see which grid I want to achieve.
Hi,
Thank you for the update.
Unfortunately, that is the only option that displays images in a square orientation. If the caption and title are covering the image, you can set the Content > Captions > Element Title and Excerpt Display setting to “Display on mouse hover”. You can also use the Perfect Automatic Masonry, but you have to make sure that all product images have the same size and aspect ratio.
Best regards,
Ismael