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
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 only when the built-in card components are not enough
Declare code-driven Shopify Storefront API requirements on a custom component when extra product data is needed

The Product Card Builder supports product metafields. Variant metafields are not available through builder fields and require code-driven Storefront GraphQL requirements 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. Custom component Product metafields are configured in the builder; custom GraphQL requirements live in the component code, not in Product Card Builder fields.

Product Card Links

Use Layout Settings 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