Product cards and swatches
Where these settings apply
Section titled “Where these settings apply”Collection grids, search results, collection sections, recommendations, recently viewed products, and other areas reusing product cards share Theme settings → Product cards. The current panel has only Hover effect and Missing image style. Manage images, prices, inventory, and variants in Shopify’s product admin.
Set it up
Section titled “Set it up”- In Online Store → Themes, open Pawglade with Edit theme (called Customize in some interfaces).
- Preview a real collection page containing your products.
- Open Theme settings → Product cards → Hover effect and choose the image interaction you want.
- Choose Illustration or Typography in Missing image style. Check an existing product without a main image; you do not need to delete a normal product’s images for testing.
- Click Save and open the actual collection page on wider screens and phones. Check long product names, missing-image cards, and purchase entry points.
Settings reference
Section titled “Settings reference”| Setting | Default | Options | What it does |
|---|---|---|---|
| Hover effect | Fade to second image | None / Fade to second image / Slide in second image / Zoom image / Zoom with image swap / Pop-out (shrink tint background) | Changes image interaction on devices with a hover pointer. Image-swap effects use a subtle zoom without a usable second image |
| Missing image style | Illustration | Illustration / Typography | Uses an illustration or a large cover with the real product name when the main image is absent. Products with images stay unchanged; small thumbnails keep the illustration |
Individual sections control tint selection and image ratio, such as Featured collection’s Card background tint and Product image ratio. Configure the tint colors themselves in Theme settings → Card tints.
Prices, swatches, and purchase entry points
Section titled “Prices, swatches, and purchase entry points”Prices come from real products and variants. Products with varying variant prices show From and their lowest price; a selected variant uses that variant’s price. Unit pricing refers to a reference amount, such as per 100 g, rather than the whole package amount.
Swatches require Shopify’s native color or image data saved on product option values. The theme does not guess colors from names such as Red, Color, or Colour. Without swatch data, the area keeps relevant text or omits the swatch row, depending on the location.
The current panel has no global Show vendor, Show product rating, Show product swatches, or Show quick purchase switches. It also has no separate Product swatches → Swatch display / Swatch shape group. Check the actual location and product conditions for vendor, rating, swatch, or quick-purchase display instead of looking for unavailable controls. Ratings are not generated without real rating data.
Quick purchase depends on availability, required variant or personalization choices, and whether the location provides it. Products requiring full choices should open their product page. Changing card appearance does not make sold-out products purchasable.
Example setups
Section titled “Example setups”Show another product view: Prepare a usable second product image, choose Hover effect = Fade to second image, and Missing image style = Illustration. Check with a pointer on a wider screen.
Emphasize missing-image product names: Use Hover effect = None and Missing image style = Typography. Check long names on phones. Small thumbnails keep the illustration, and products with images remain unchanged.
Common questions
Section titled “Common questions”Why is there no hover swap on my phone? The effect is for devices with hover pointers. Customers can tap products normally on phones.
Why does image swap become a subtle zoom? Check for a usable additional product image, rather than relying on the media count alone.
Why did Typography leave products with images unchanged? Missing image style only affects cards without a main image.
Does the style change prices or inventory? No. It changes display and image interaction only.