In this guide, I will walk you through setting up a feature that automatically redirects users to Product B after they add Product A to their cart (ATC) using metafields.

Set Up a Metafield for Redirect Target

• In your Shopify Admin, go to Settings > Custom Data > Metafields Definition > Products.

• Click the Add definition button.

• Under the "Name" field, enter Cross Sell Product. In the "Namespace and Key" section, write custom.cross_sell_product, set the field type to Product, and click Save.

• Return to the Product section, find the product you’d like to set up, and scroll down until you see the Metafields section.

• Set this field’s value to the product you want the customer to be redirected to after a successful ATC.

Implement Liquid Code in Your Theme

• Navigate to Online Store > Themes and select Edit Code.

• Locate and open the theme.liquid file. Find the </head> tag and insert the following code right before it.

<script type="text/javascript">
      teeinblue = {
        ...(window.teeinblue || {}),
        onItemAdded: function(item) {
          {% if product.metafields.custom.cross_sell_product.value %}
            const crossSellHandle = "{{ product.metafields.custom.cross_sell_product.value.handle }}";
            const crossSellUrl = "{{ product.metafields.custom.cross_sell_product.value.url }}";
            fetch('/cart.js')
            .then(res => res.json())
            .then(cart => {
              const isProductInCart = cart.items.some(item => item.handle === crossSellHandle);
              if (!isProductInCart) {
                window.location.href = crossSellUrl;
              } else {
                console.log("The cross-sell product is already in the cart.")
              }
            });
          {% endif %}
        }
      }
</script>

• Click Save to ensure the changes take effect.

Finally, return to the storefront and test the ATC process to ensure the redirect functions as expected.

Updated on: 22/05/2025