Combine > Product card

These refer to all the instances of product elements, such as in collection pages, recommended products, featured collection settings, etc. The first set of settings allows you to play with the product card's style. You can change the media aspect ratio to something close to your product images, and you have the option to change the image display - Combine allows for the entire product gallery to be displayed in the thumbnail, which can be a great tool to show product images without going to the product page.

Product variants

Combine was build with what we call "fast purchase" in mind. In various product grids (by your choice), you can add a Quick Buy function, which will add a button for purchasing the product (if the product doesn't have any variants), or list the entire product variants right there, on the product grid.

This area in the Theme Settings control the design of those product variants. You can choose the style of these and also whether you want the product thumbnail to be changed when you change the variant.

To read more about color swatches, check our color swatches article.

In addition to the tools described above, we've also included a Quick buy popup in the theme, one which allows customers to purchase items one after the other, and don't get interrupted by the cart drawer or cart page.

The popup doesn't appear in the product page, it also works when customers are adding products from the grid.

Custom product badges

Product badges refer to the little tooltips that appear in the right corner. There are some default badges like "sold out" or "discount" that appear automatically based on the product, but you can also configure 3 different custom badges that you can set to appear based on different product tags.

Dynamic icons list

Combine has this unique feature where you can showcase different product features with icons, based on metafields.

Each product can hold up to six different icons like these and you can add them in two ways. First, as you can see in the Theme Settings, for each icon you need to set two metafields - one for the icon, one for the label. In this area of the customizer you are basically connecting product data to the proper icon.

If you don't have experience with metafields, you might want to read this article from Shopify documentation: https://help.shopify.com/en/manual/metafields/metafield-definitions

Step 1

You need to create the metafield definitions in the metafields area of your store. So go to Settings > Metafields > Products and create two definitions for each icon, one for product icon, one for product label. Then, after metafields are created, you have to populate the theme settings area with the namespace and key from each metafield you've created.

Please note that icon metafileds should be set as IMAGES, while label metafields should be set as SINGLE LINE TEXT.

Look at the following graphic on how should these work side-by-side:

Step 2

The metafields will now appear in your individual product pages as well, so when you add values for certain products, these will appear in the product cards.

Pro tip

Because it can be time consuming to add the same icons & labels all over again, we've also come up with a way to simplify this process and only work with LABEL Metafields. For this to work, you need to upload your specific icons in the Files area of your store, and make sure the filenames correspond to the labels that you will use (in a handle form).

Example: You have a label called Gentle calming. If you upload a file named gentle-calming.png, that icon will be used for this label without you needing to upload a separate icon in the icon field. Our theme will always pick the uploaded icon first, then if this fails, it will search for a png file named as the label.