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 or similar high-level frameworks.

Nosto Web Components

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

• NostoDynamicCard Renders product cards entirely on the Shopify side. Requires alternate product card templates to be available within Shopify themes.

• NostoProduct 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

• NostoProductCard Provides a platform-agnostic custom element that delegates rendering to a shop side templates (Handlebars and Liquid are currently supported).

Nosto's web component offering is documented here

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.