Collection page & product grids

One of the most important part of any store is the product grid, which appears in a lot of contexts and is basically the first interaction that your visitors have with your products. This is why we've made the product grids in this theme not only highly versatile, but also customizable based on their location. So even if the design (colors, image apsect ratios, etc.) is the same throughout the theme, the layout and content inside each grid can be different, which allows you to create the perfect store!

To make this work, we've configured the product grids with blocks, as you can see in the graphic below: 

While some blocks are working by default, others need to be configured in order for the proper information to show up.

• Dynamic text - needs a text metafield connected to it

• Rating - appears when products have rating set by a reviews app
• Icons list - displays when the proper product metafields are connected with the theme settings and the product has information in them
• Quick buy - displays a list of variants and an "add to cart" button, which allows your visitors to purchase products directly from the collections page

Custom color swatches

The  Quick buy block is one of the places where product color swatches can be used. These will appear automatically if you choose to from the Theme Settings > Product card > Product variants area.. 

First, you need to define what color swatches labels are you using.. The defaults are some popular ones, such as color or colour, but you can use this feature for custom labels as well. For example, if you have a variant called Lipstick color, you can write lipstick color as an option in the color swatches label, and the theme will pick it up and transform the values in color swatches.

Now, Combine has built-in support for color swatches, based on color names, which use the web supported color names. However, there may be instances where a store would require more specific swatches with complex colors or patterns. In this scenario, you can upload images for your swatches, as the theme has the proper logic to detect custom images for custom swatches. 

For any color swatch that you want to add, you just have to upload a 90x90px png file in your store's files section, with the name exactly the same as your product's variant handle.

For example, let's say that your product has a variant called  "Dark Grey". You will want to create an image file name "dark-grey.png" and upload it into the Settings > Files section of your Shopify admin. That's it!