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 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 that cross sells often use a slider rather than a grid, and product grids tend to have extra features like sort, filter and pagination.
As best practice, we recommend to keep your blocks consistent across templates, so after configuring your grid or cross sell layout, we recommend to create a block and transfer it to other sections using the same product card.
Tip: In order to share/move a layout between a grid and a slider, you can put your contents inside a group with 100% width and height.
The Nyla product card blocks are configured this way in case a reference is helpful.
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):
- 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.
- Optional: 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.
- Optional: 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.
- Optional: Uses the metafield product.metafield.nyla.short_description
- The PLP grid media block is a key block that:
- Ensures that grid items have default and hover states for all permutations for video and images in the first two slots of media without any layout shifts
- Contains product ribbons by default
- Ensures all media are linked to the relevant PDP
It's important to use this block if you are intending to mix video and images on your grid or cross sells.
Tip: This is a key block to update when changing your media ratios. You need to make sure to update all ratios in this block to ensure that all combination of hover for video and images work as expected.
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.