# Product cards

Nosto recommends using shop-provided resources for rendering product cards in Nosto templates. Doing so offers:

* Faster onboarding
* Easier maintenance
* Consistent styling and behavior

Below are the recommended approaches.

## Custom Web Components

If your shop themes use web components, we suggest leveraging them in your Nosto templates as well. This avoids duplicating markup and logic between your shop and Nosto templates. For building web components efficiently, consider using [Lit](https://lit.dev/) or similar high-level frameworks.

## Nosto Web Components

Nosto offers several web components designed to simplify product card integration:

* **DynamicCard**\
  Renders product cards entirely on the Shopify side.\
  \&#xNAN;*Requires alternate product card templates to be available within Shopify themes.* Choose this approach if the shop already uses product card markup in Liquid templates and you want to reuse that markup in Nosto campaign rendering. Detailed instructions on how to set this up in your Shopify store are provided [here](https://docs.nosto.com/shopify/styling-options-dynamic-product-cards)
* **Product**\
  Enhances static product card markup with interactive features such as:
  * Swatch selection
  * Add-to-cart interactions
  * Dynamic product image updates based on swatch and SKU selections

Nosto's web component offering is documented [here](https://docs.nosto.com/techdocs/apis/frontend/oss/web-components)

## Style Reuse

If web components aren’t an option, we advise duplicating only the markup for product cards within Nosto templates while applying shop-side CSS rules to maintain consistent styling.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nosto.com/techdocs/implementing-nosto/template-customization/product-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.