Kingdom > Product card

Here you can configure the general design of the product thumbnails.

1. Choose an Image aspect ratio. If your thumbnails are not the same size, our theme has a few popular options for square, tall or short images that you can use, in order to resize all of your images to the same size. If you choose the natural aspect ratio, in which your images will not get cropped, make sure that all of your images will have the same size, for a clean design.
2. You can also choose to show the second product image on hover (only works on desktop).
3. Emphasize featured products will make certain products larger in the grid, as you can see in our online demos. Here are the steps to make this feature work:
   1. Make sure that you have the "emphasize featured image" enabled in Theme settings > Product grid - screenshot.
   2. Go to a product and give it featured tag - screenshot.
   3. Since featured products will have enlarged thumbnails, you might consider using these as the first products in the grid. If you choose another place please check this out and reorder your products until you're happy with the grid display.
4. You can show discounts as a percentage or a badge. To add other badges to product thumbnails:
   1. "Sold out" will appear automatically if a product has the inventory at 0.
   2. "On sale" will appear automatically when using the "compare at price" option for a product page.
   3. "Preorder" will appear if you give a product the preorder tag.
   4. "New" appears if you give a product the new tag.
5. Choose the caption placement, but keep in mind that the caption will always be visible on mobile devices (because here there is no hover), so the overlay design is only for desktops.
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)

How to add new product badges

If you need different badges (like for example "Limited") on some of your products:

1. Go to the theme editor (read this article for more info)
2. Choose  snippets/product-item.liquid and in line 142 (or so, depending on your theme version) add this code with your own value for the text- screenshot:

{% elsif product.tags contains 'limited' %}
   <div class="product-item__badge product-item__badge--new badge"><span>Limited</span></div>

1. Change the 'limited' value after your own desire and then save the file.
2. From this point, if you tag a product with "limited" - screenshot, you will see this badge in the grid.

In case you need more product badges you can simply repeat the same steps. 

Note: 

1. "Sold out" badges will appear automatically if a product has the inventory at 0.
2. "Sale" will appear automatically when using the "compare at price" option for a product page (please make sure that the old price has a higher value).