Product card theme settings
The Product card theme settings set how Kingdom shows products in grids: image ratio, hover image, featured products, caption, badges, ratings and quick buy.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Product card theme settings set the look of every product thumbnail in Kingdom. Kingdom has no product card block, so these settings style all product grids at once: the collection page, the search page, the Featured collection and Shop the look sections, and the product and cart recommendations.
Where to find it: Theme settings → Product card
Product thumbnail
- Media aspect ratio sets the shape of the product images.
- Natural keeps each image's own shape and never crops it. Upload all product images at the same size, or the grid looks uneven.
- Short (4:3), Square (1:1), Tall (5:6) and Taller (2:3) crop every image to the same shape.
- Emphasize featured products shows products tagged
featuredtwice as large in grids. See the steps below. - Show second product media on hover shows the product's second image when a customer moves the mouse over the card. It works on desktop only, because touch screens have no hover. Products with one image show no change.
Setting up featured products
A featured product spans two columns and two rows of the grid. It works in grid layouts only: the collection page and the Featured collection section with Layout set to Grid. It has no effect in sliders (Shop the look, the product and cart recommendations, Featured collection as a slider) and on the search results page.
Turn on the setting
Open Theme settings → Product card and turn on Emphasize featured products.
Tag the product
In Shopify admin, open Products and select the product. In Tags, add featured and save.
Arrange the grid
Open the collection on your storefront. Large cards can leave gaps in the grid. Sort the collection manually in Shopify admin → Products → Collections and move the featured products until the grid looks right; putting them first in the collection often works best.
Product caption
The caption is the product title, the price and the rating under or over the image.
- Caption placement chooses where it shows:
- Below image: always visible under the image.
- Overlay: hidden until a customer moves the mouse over the card, then shown on top of the image.
- Overlay caption background and Overlay caption text color color the overlay. The background is shown at 30 percent opacity over the image.
The Product recommendations and Cart recommendations sliders always show the caption below the image.
The overlay caption works on desktop only. On screens 948 px wide or less, and on touch screens, the caption is always shown below the image, because there is no hover.
Setting up product badges
A product card shows one badge in the top corner of the image: the first one that applies, in this order.
- Sold Out: no variant of the product can be bought. A product that keeps selling when out of stock shows no badge.
- On Sale: the product has a compare-at price higher than its price.
- Pre Order: the product has the tag
preorder. - New: the product has the tag
new.
Show discount as... sets the text of the sale badge: Text shows "On Sale", Percentage shows the saving, for example "-20%".
Open the product
In Shopify admin, open Products and select the product.
Add the tag
In Tags, add new for a New badge or preorder for a Pre Order badge, in lowercase, and save.
Check the collection page
Open a collection with the product. The badge shows unless the product is sold out or on sale, because those badges come first.
The badge texts "Sold Out", "On Sale", "Pre Order" and "New" are theme texts. Change them in Shopify admin → Online Store → Themes → … → Edit default theme content.
Product rating
- Show rating shows the product's average rating and a star under the price in product cards.
- Rating app tells Kingdom where to read the rating. Select the review app you use: Shopify Reviews (deprecated), Loox, Judge.me, Stamped, Yotpo, Ali Reviews, Rapid Reviews or Air Reviews.
Kingdom does not collect reviews itself. A product without reviews, or with a rating of 0, shows no stars.
Install a review app
Install a product review app from the Shopify App Store. See Product review apps.
Turn on the rating
Open Theme settings → Product card → Product rating and turn on Show rating.
Select your app
In Rating app, select the app you installed. If your app is not in the list, choose Shopify Reviews (deprecated): it reads Shopify's standard review metafields, which many review apps also fill.
Add the rating to the product page
To show the rating on the product page too, add the Product rating block in the Product page section. See Product page.
Third-party apps may require additional steps to be properly integrated. Follow the review app's own setup instructions as well.
Quick buy
Enable quick buy adds a button to the product image. On desktop it slides up when a customer moves the mouse over the card; on phones it is a round cart icon on the image.
- A product with only one variant gets Add to cart. It adds the product directly and opens the cart drawer when Theme settings → Cart → Cart type is Drawer.
- A product with variants gets Choose options. It opens the Quick view popup, where the customer picks a variant.
- A sold-out product gets no button.
Why does my sale badge say On Sale instead of a percentage?
Because the product's variants have different prices or different compare-at prices. With Show discount as... set to Percentage, Kingdom shows the percentage only when every variant has the same saving. Otherwise the card shows "On Sale".
Why is my featured product not larger in the grid?
Check three things: Emphasize featured products is on, the product has the tag featured written exactly like that, and the product is in a grid, not a slider. Product recommendations and Cart recommendations are sliders, and featured products are never enlarged on the search results page.
Can I add my own badge, such as Limited?
Not with theme settings. Kingdom shows only the Sold Out, On Sale, Pre Order and New badges. A badge with your own text needs a code change, which Krown support does not provide. The code for developers is in Custom CSS and code.
All Product card settings
Every setting in this group, with its type and default.
Product card theme settings: Product thumbnail
Where to find it: Theme settings → Product card → Product thumbnail
Media aspect ratio (dropdown, default: Uncropped: Natural): Sets the shape of product images in every product grid. Natural keeps each image's own shape and never crops it, so upload all images at the same size; the cropped ratios resize every image to the same shape. Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Emphasize featured products (checkbox, default: off): Shows products tagged featured across two columns and two rows in grid layouts. Not applied in sliders or on the search results page.
Show second product media on hover (checkbox, default: off): Shows the product's second image when a customer hovers over the card, on desktop only.
Product card theme settings: Product caption
Where to find it: Theme settings → Product card → Product caption
Caption placement (dropdown, default: Always visible: Below image): Sets where the title, price and rating show: always below the image, or over the image on hover. The overlay works on desktop only; on screens 948 px wide or less the caption is always below the image. Options: Visible on roll over: Overlay, Always visible: Below image.
Overlay caption background (color, default: #000000): Sets the color laid over the image behind the overlay caption, at 30 percent opacity. Used only when Caption placement is Overlay.
Overlay caption text color (color, default: #ffffff): Sets the text color of the overlay caption. Used only when Caption placement is Overlay.
Product card theme settings: Product badges
Where to find it: Theme settings → Product card → Product badges
Show discount as... (dropdown, default: Text): Sets the text of the sale badge: Text shows "On Sale", Percentage shows the saving, for example -20%. Products whose variants have different prices or compare-at prices always show "On Sale". Options: Text, Percentage.
Products with varying prices across variants will show a generic 'Sale' badge. Shown only when Show discount as... is Percentage.
Product card theme settings: Product rating
Where to find it: Theme settings → Product card → Product rating
To display ratings, add a product rating app. Learn more.
Show rating (checkbox, default: off): Shows the product's average rating and a star under the price in product cards. Needs a review app; products without a rating show nothing.
Rating app (dropdown, default: Shopify Reviews (deprecated)): Sets which review app Kingdom reads the rating from. Shopify Reviews (deprecated) reads Shopify's standard review metafields, which many other apps also fill. Third-party apps may require additional steps to be properly integrated. Options: Shopify Reviews (deprecated), Loox, Judge.me, Stamped, Yotpo, Ali Reviews, Rapid Reviews, Air Reviews.
Product card theme settings: Quick buy
Where to find it: Theme settings → Product card → Quick buy
Adds an instant "add to cart" button. If the product has variants, it will display a "quick buy" popup.
Enable quick buy (checkbox, default: on): Adds a button to product images: Add to cart for products with one variant, Choose options (opens the Quick view popup) for products with variants. Sold-out products get no button.
Related pages
- Quick view popup: opens from Choose options.
- Collection page: the main product grid.
- Featured collection section: a product grid or slider on any page.
- Cart theme settings: the cart drawer that opens after Add to cart.
- Custom CSS and code: a custom badge with code.
Layout theme settings
The Layout theme settings set the space between sections, the side padding of the page and the gap between grid columns in Kingdom.
Favicon theme settings
The Favicon theme setting uploads the small icon that browsers show in tabs and bookmarks for your Kingdom store, as a 48 x 48 px PNG.