Build cross sell sections in Nyla
This article walks you through best practices, templates and blocks for building cross sell sections in Nyla.
- Consistency between product grids and cross sells
- Starter templates
- Blocks
- Defining what products to show up in cross sells
Best practice for consistency between grids and cross sells
It's very common for Cross Sell and PLP grids to use the same layout and functionality between the repeated layouts for each of your products. The main difference is usually that cross sells use a slider rather than a grid.
As best practice, we recommend you keep your blocks consistent across both templates, so after configuring your PLP, you might want to directly move the block to your cross sell layouts in order to move all functionality and messaging that might be specific to you. A tip for moving a block from a grid layout to a slide layout is to put it inside a group.
Starting templates
Nyla comes with multiple cross sell templates as starting points, you can search "Cross Sell" in the Nyla template library to find them.
Nyla templates have a limit built into them to only pull the first 8 products in the collection into the cross sell as per guidance on performance best practices.
Available blocks:
The blocks for cross sells are the same as those for the PLP (minus unique grid items).
In case you want to use Nyla blocks directly, they are as follows:
Product Card: Simple: A simple product layout with product title and price
Product Card: Simple with rating: A simple grid layout with the product image, title, price, and rating
Product Card: Centred: A product grid layout with centred title, short description and price.
Requirement: Uses the metafield product.metafield.nyla.short_description
Product Card: Overlay: A product grid layout with title, short description and price overlaid over the product image.
Requirement: Uses the metafield product.metafield.nyla.short_description
Product Card: Fashion: A product grid layout with quick add that allows for 2 option quick add to cart. Shows a summary of options available and on hover lets the user add the product to the cart
Product Card: High Fashion: A product grid layout with quick add that allows for 1 option add to cart. This is more specifically tailored to high fashion where products do not have multiple colors - or colors are split between products in Shopify.
Product Card: Beauty: A fully featured product grid layout with visible add to cart, short description, price, and product options.
Requirement: Uses the metafield product.metafield.nyla.short_description
Defining what products show up in a cross sell
The most common way to manage cross sells is to use source: collection as an overridable field to set your products in your cross sells. See best practices on managing collections here.
For cross sells on PDPs, we'd recommend to exclude the page product in the source collection settings to avoid the repetition between the product on the PDP and the cross sell recommendations.
If you want to show or hide different cross sells as scale across a large catalogue, we'd recommend to use conditional visibility combined with page properties based on a metafield value or similar.
If you want your cross sell products to have a greater degree of personalization, we recommend using the Nosto app.