Highlight > Product card

To tweak the product item's design, click Theme Settings > Product grid

1. From the Media aspect ratio choose the aspect ratio for which you want your products be resized. If you are using the asymmetrical layout, you can even have natural images with different aspect ratios, as they will look very well (you can see this in our Art demo). Otherwise, you may want to crop items for a clean layout.
2. Then you have the Desktop animation style, which changes the way thumbnails react to mouse overs. This is not available on mobile devices, because there you don't have a mouse, so first tap goes directly to the product page.
3. If you want to also show the second product image while hovering, then check Show second product image on hover. Again, this is a feature that only works on desktops where a mouse is present.
4. Show color variants media if your products have color variants. You can read more about color swatches in below.
5. After this you Sale price color, which allows you to tweak the color of the bigger price of sale items in the collection grid.
6. Choose to show product ratins with the help of a rating app.
7. You can also enable quick buy, which will show a button for users to either purchase the item on click (if the item has a single variant), or display a quick buy popup (when the item has multiple options)

Setting up color swatches

Highlight has built-in support for color swatches, based on color names. 

So if a certain variant's name is a HTML valid color, it will show up in the front end as such.You can find a list of HTML valid color names here: https://htmlcolorcodes.com/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, but since the functionality isn't available in the theme, you will have to do a bit of tweaking for this purpose.

For any color swatch that you want to add, you just have to upload a 32x32px 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!

Wait a few minutes, as the images are cached and will take a bit to show on your site.

Adding unique product badges (icons)

Unique product badges is a feature that we've introduced in version 2.0.0 and allows you to leverage metafields in order to add unique bits of information for products in the collections grid, as you can see below:

To make this feature work on your store, you'll have to follow these steps:

1. Go the Settings > Metafields, and open the Products metafields editor
2. Here you'll have to add two new metafield definitions that will be used by the theme for these icons
   1. The first one will be unique_feature.icon and should be the File type
   2. The second one will be unique_feature.title and should be the Single line text type
3. After your metafields are created, they will appear in the Product Editor.
4. For products that you want to show such custom badges you'll have to write your details in the product editor as follows:
   1. Add a 48 x 48px .png image if you want to display an alongside the text in the "icon" field
   2. Write a really short statement  in the "title" field

Watch the process of setting this up