Collections: Change the appearance of your grids

With our themes you have various option to control the product grids in your store.

What is a product grid?

The product grid is simply a layout that contains multiple products and can be found in the following places:

• The Featured collection section on the home page
• The Collection pages themselves
• The Related products below the main product on a Product page

Product grid options

• Show product vendor - If you sell products made by others i.e Nike, Adidas you can display the name of that vendor.
• Show product labels - this is the color branded label showing On Sale and Sold Out on the product blocks.
• Show second image on hover - if you have more than one image for a product you can choose to display the second image when the user hovers their mouse over a grid image
• Masonry layout - please refer to this article for a better explanation of this feature.
• Product background color - select from Default grey, Brand, Accent, White and Black. Brand and accent colors are set up in your General settings of the theme editor.
• Text alignment - the text and the prices can be sent left or center of the image.

Color background on grid images

If you use images that have been cut out and placed on a transparent background, i.e a PNG image, you can achieve a fantastic effect on the Product page that makes the background color look like it is cutting through the product.

However this means that your images in your product grids (collection pages, home page, related products) will look as if they are floating on the page with no edges of the images visible. Some merchants might like this look but others prefer to see a sharp edge background.

With the Product background color setting you can choose from the following:

• Product pages with the 'cut through' effect but a solid background on grids
• Two completely different background colors on product pages and grids
• A background color on grids but no background on the product page or vice versa

We think this offers a lot of flexibility with the design of your store.

Pro tip: Even if you are using standard images instead of transparent PNGs you can set a product background color and this will show through when images are hovered in a product grid. This gives you another chance to add more of your brand color to your store.

Pro tip 2: PNG files can be very large so we strongly recommend you use something like ImageOptim or TinyPNG to compress them and strip out unneeded data before uploading. It can make a huge difference to your store's loading time, which can affect sales.