There are a variety of ways to cross-sell to customers during their shopping experience. This is one way that I find very handy for what I call linear-purchase-experiences (LPE). An LPE is a second product that complements the first product and makes an obvious set. Here's a couple of examples of LPEs:
- A gift box for a product.
- Gift wrapping option.
- A hand-written note to include in the package.
- Batteries for a battery-powered product.
- Another set of consumables, like more razor blades for a razor.
Some stores try to sell LPEs right on the main product's product page using variants or a product options app. But this can lead to a very confusing decision making in the purchase experience for the customer; therefore, decreasing conversion.
So this solution is to move the LPE options out of the product page and place them on a separate page that the customer sees directly after clicking Add to Cart on the product page. Here's a real example of an LPE cross-sell page:
This page is from Etching Expressions. They sell (really cool) etched wine bottles that are usually given as a gift. So customers like to make the gift package even more compelling by adding a gift box, wrapping or a note.
A couple of things to note about this page. There is a Go To Cart button at the top and bottom of the page. This allows the customer that is not interested in the cross-sell options to easily continue on to the cart. Also, each product listed on the page has a call to action that is appropriate for the purchase decisions that need to be made on that cross-sell product. Some examples include:
- Add to Order - products that have no options can be directly added to the cart.
- Personalize - for personalized products, the customer is taken to the personalization experience.
- Select Color - the customer is taken to the product page to select the desired color.
How you make the cross-sell page can vary. I typically make a new page template and code the top and bottom Go to Cart buttons in Liquid. And then I'll put a Featured Promotions or similar section in the middle. I use a Promotions section over a List Collection element as the Promotions section allows the call to action message and link to be different for each product.
One handy thing to remember is how to add a product to the cart via URL. It looks like this - https://mystore.myshopify.com/cart/add?id=12345678901234. The ID is the Variant ID.
Finding the Variant ID
Here's one way to find the variant ID.
Go to your product in your Shopify admin. Add .xml to the end of the URL where the arrow is pointing to.
This will give this XML view of the product information. The location of the Variant ID is highlighted.
Once you have the Cross-Sell page, the next step is to adjust the product page to direct to that page on Add to Cart instead of going to cart. Here's how to do that in the Turbo theme. Your solution will vary based on your theme, but this should get you started in the right direction. On the Add to Cart button on the Product page, edit the liquid to add a hidden element that takes the user to the Cross-Sell page on button click (instead of the default button behavior. In the code below, lines 3 - 8 were added.
In this example, there are two different Cross-Sell pages. And products are tagged to determine which Cross-Sell page is appropriate for the product.
So, all that's left to do is to add the tags to the products.
I hope this article gives enough information to use this feature in your store.