Each new Nosto account comes with three base recommendation templates to customize
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
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 DOM
Navigation module is loaded and navigation button provided in DOM
Basic mobile break points are provided
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