# Shopify Product Card Builder
The **Product Card Builder** controls the product card layout used by Nimstrata Search Results, Product Grid collection pages, and Recommendations AI App Blocks.
It does not replace Shopify's native product cards outside the Nimstrata storefront experience.
## Start With a Template or Start From Scratch
When the builder opens, merchants can:
- Start with a Nimstrata template
- Start without a template and build a custom layout
Templates are the fastest way to launch. Merchants can then refine the layout to match storefront branding, product data, and conversion goals.
## Component Types
The builder can assemble standard product-card components without theme code:
| Component | Use when {.compact} |
| ---------------------- | ------------------------------------------------------------------------ |
| Image or Image Gallery | The card needs primary imagery, hover imagery, or a small image carousel |
| Product Title | The card should show the imported product or variant title |
| Brand | Vendor or brand data should be visible on the card |
| Price | The card should show price, sale price, and compare-at price behavior |
| Rating | Review count and average rating are imported |
| Option | Shoppers should see variant options such as color or size |
| SKU | SKU is useful for high-intent shoppers or B2B catalogs |
| Product Type | Shopify product type is useful merchandising context |
| Inventory | Availability or stock messaging belongs directly on the card |
| Wishlist | The theme or a custom component supports wishlist behavior |
| Add to Basket | Shoppers should add the selected variant from the card |
| Tag: Is Reduced | Sale or reduction badges are driven by imported pricing data |
| Metafield | A product metafield should display on the card |
| Custom | A bespoke Web Component should render inside the card |
Horizontal blocks can contain up to two child components. Use this for compact rows such as brand plus badge or price plus inventory.
## Product Metafields and Custom Components
If the storefront design needs more than the default card elements, merchants can:
- Add product metafields to the card layout
- Use [Custom Components](/shopify/product-card-builder/custom-components/) only when the built-in card components are not enough
- Fetch additional Shopify Storefront API data inside a custom component when needed
The Product Card Builder supports product metafields. Variant metafields are not available through the builder and require custom Storefront API code inside a custom component.
Custom components are a good fit for advanced badges, quick views, wishlists, extra product metadata, or layouts that need custom JavaScript behavior. Adding a JavaScript file alone is not enough; merchants must also add a **Custom** component to the Product Card Builder layout.
## Product Card Links
Use [Layout Settings](/shopify/theme-installation/layout-settings/#product-page-links) to choose whether product cards link to the selected variant or the main product page without a variant in the URL.
## Good Practices
- Keep image, title, and price above the fold on the card
- Use consistent card heights to avoid uneven grids
- Test layouts on search, collection, and recommendation placements
- Guard custom components for missing optional fields because search and recommendations may provide different product shapes
- Fix data quality issues in imports first, then refine card design