Eight Themes Support Documentation

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.

Cross Sells - Example Product Page.png

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

Note: You can also add cross sell products as a section to your product page. Read our guide to learn more.


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.

Settings Button.png

Step 2: Continue to Custom data.

Settings - Custom Data .png

Step 3: Select Products and click Add definition.

Cross Sells - Products.gif

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. 

Cross Sells - Metafield Name.png

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

Cross Sells - Metafield Type.gif

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.

Shopify - Products Click.gif

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.

Cross Sells - Assigning Metafields to Products.gif

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.

Cross Sells - Add Block.gif

Example of blank Cross sells block:

Cross Sells - Block.png

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

Cross Sells - Connect Dynamic Source 2.png

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

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

Cross Sells - Connect Dynamic Source.gif

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:

Cross Sells - Block Example.png

Was this article helpful?