Articles on: Seller Cases

Cross-Sell: Redirecting Product A to Product B

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.



Note: The redirect function will not work if the product has already been added to the cart before.

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

Was this article helpful?

Share your feedback

Cancel

Thank you!