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

Instructions

Step 1: Set Up a Metafield for Redirect Target

• In your Shopify Admin, go to Settings > Metafields and metaobjects > Products.

• Click the Add definition button.

• Under the Name field, enter Cross Sell Product and set the field type to Product. Please ensure to click Save afterward.

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

• Set this field’s value to the product you want customers to be redirected to after the original product is successfully added to the cart.

Step 2: 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>

Step 3: Check your storefront

• Click Save to apply the changes. Then, return to your storefront and test the ATC process to make sure the redirect works as expected.

Updated on: 06/10/2026