Starting points

Each new Nosto account comes with three base recommendation templates to customize.

Default

The Default template has the following features:

• Recommended products in a grid

• Alternate image on hover

• Ribbons for new, most viewed, and top-selling products

• Highlighting of discounts

• Add to cart functionality

Carousel

The Carousel template extends the base template with a Swiper-based carousel to cycle between the recommended products. The library dependency is loaded via a script module, but a locally available version of the library can be used as well.

• Carousel implementation via Swiper

• Swiper is loaded via CDN URL into script module scope

• Swiper default styles are injected into the DOM

• Navigation module is loaded, and navigation buttons are provided in the DOM

• Basic mobile breakpoints are provided

Swatches

The Swatches template extends the base template with SKU selection-aware product cards with swatches for color and size selection.

• Color and size swatch rendering

• NostoProduct and NostoSkuOptions web components to maintain swatch selection state and abstract the add-to-cart logic away

• Web components library is loaded via CDN URL into script module scope

• Product image is updated based on color swatch selection

• Add to cart button becomes visible when color and size values have been chosen