How to set up the Cross sells block using metafields

Cross sells - Introduction

A Cross sells block can be added to a product page through the Product form. The main purpose of this block is to highlight additional items that complement the product, helping to increase the total order value.

In the example below, two relevant products are displayed next to the main product image.

We recommend using metafields to assign cross sell products. This is because a metafield is a dynamic source, which allows you to tailor every cross sell product. Without a metafield, the cross sell products you select will apply to the entire Product template.

In this guide, we'll break down the process for setting up the Cross sells block for use with metafields into three parts:

1. Creating cross sell metafields
2. Assigning metafields to products
3. Setting up the cross sells block on your store

Part 1. Adding cross sell metafields

The first stage in creating dynamic cross selling blocks involves adding a metafield. To add metafields to your store:

Step 1: Within your Shopify admin, go to Settings.

Step 2: Continue to Custom data.

Step 3: Select Products and click Add definition.

Step 4: Provide a name and description for your new metafield. Something related to cross selling will help you identify it easier. For example:

Name: Cross sell 1

Description: Suggested products that relate to the main product.

Note: The Namespace and key field is automatically generated. 

Step 5: Click Select type, then scroll down to the Reference category and select Product.

Note: By default, the One product option will be selected. Don't change this setting, because a list of products isn't compatible with the Cross sells block.

Step 6: Save your changes

If you want to take full advantage of the Cross sells block, you can repeat this process and add a second metafield. This will allow you to display two products next to the main product.

Part 2. Assigning metafields to your products

Now that you've created your metafield, you can assign it to the products you wish to offer as part of a cross sell. To do this:

Step 1: Within your Shopify settings, go to Products.

Step 2: Select the main product involved in the cross sell.

Step 3: Scroll down to the Metafields section and click the metafield name you defined above.

Step 4: From here, you can select the relevant product that you want to display in the cross sell block.

Step 5: Save your changes. 

If you've set up two cross sell metafields, don't forget to add the second product if needed.

Part 3. Setting up the cross sell block on your product page

Finally, it's time to set up the Cross Sells block on your product page. To do this:

Step 1: Within the theme editor, navigate to the main product page (the product you assigned the metafields to).

Step 2: Add a Cross sells block.

Example of blank Cross sells block:

Step 3: Next to the First cross sell product option, click Connect dynamic source.

Step 4: Click the dropdown menu and select Product - Main page.

Step 5: Select the name of your cross sell metafield.

If the steps have been followed correctly, you should see your cross sell product display inside the block. 

Step 6: Save your changes and repeat the steps to add a second Cross sells product if required.

Example of a fully populated Cross sells block: