Velo Tutorial: Cross-Selling a Product in Your Store with Velo by Wix

Overview

In this tutorial, you'll learn how to use Velo to implement cross-selling in your store. Cross-selling means suggesting a product to your customers when they get to the checkout page. Cross-selling can increase cart value, overall revenue, and conversion rates while improving the shopping experience.

You can see a similar implementation of the functionality described in this tutorial on this site, but with a different code solution. In both this tutorial and the example site, the site promotes Jasmine soap only if customers have one of the other products in their cart, but not Jasmine.

How to Build This Promotion

In the first part of this tutorial, we are going to set up the Cart Page using standard Editor elements. Then we'll use Velo and code to customize the Cart.

Part I - Setting up the Cart Page

Step 1: Start Working with Velo

• Enable Velo Dev Mode in the Wix Editor to let you work with code. Click Dev Mode in your site's top bar and turn on Enable Developer Mode in the dropdown.

  

  You will see the Velo Sidebar on the left-hand side of your screen, and the Properties & Events panel in the bottom-right corner of the Editor.

  

• To get to the Cart page in your store, click the Page Code button in the Velo Sidebar on the left-hand side of the Editor, then Cart page.

Step 2: Adding Elements

Now we're going to add an element to hold the details of the product you want to promote: name, price, image, and description.

1. Click Add on the left side of the Editor, then Box, and then select Container Boxes.

   

2. Add a text element to the Container for the product name, another for the price, and one more for the description.

   

3. Add an image (choose one from your gallery).

4. Add a button and change its text to Add to cart.

   Note: Make sure you see the Attach to Box message before dropping all your elements into the container box.

5. Customize the elements in the Editor to match your store's design.

Part II - Customizing the Cart Page with Code

Now that you've set up your Cart page you can add the code to cross-sell your product.

Step 3: Element IDs in the Properties Panel

You need to start working with your site's elements in code. One of the first things to do is to give your elements meaningful IDs. That will make it easier to work with them in code. You change an element's ID in the Properties & Events Panel.

When you select an element, its properties are displayed in the Properties & Events Panel.

Select each element that you added to the container and change their IDs as described below:

• Container box: crossSellBox
• First text element: productName
• Second text element: productPrice
• Third text element: productDescription
• The image: productImage
• The button: addToCart

Step 4: Product SKU

1. Navigate to the product section of your store dashboard.
2. Choose the product you plan to promote.
3. Note the product's SKU (stock keeping unit). This number is very useful for keeping track of inventory. You will need to assign SKUs to your products. Learn more about Adding and Customizing Product Options.

Step 5: Cart Page Code Editor

1. Go back to the Cart page in the Editor.
2. In the Editor, paste the following code into the code editor for the Cart Page.

1
import wixData from 'wix-data';
2
import { getCurrentCart } from 'backend/cart.web';
3

4
const CROSS_SELL_PRODUCT_SKU = "0002";
5

6
$w.onReady(function () {
7
  checkIfProductMissingFromCart().then(isProductMissingFromCart => {
8
    const shouldShowCrossSellProduct = isProductMissingFromCart;
9

10
    if (shouldShowCrossSellProduct) {
11
      getCrossSellProduct().then(crossSellProduct => {
12
        renderCrossSellProduct(crossSellProduct);
13
      })
14
    } else {
15
      $w("#crossSellBox").collapse();
16
    }
17
  })
18
})
19

20
async function checkIfProductMissingFromCart() {
21
  const { lineItems } = await getCurrentCart();
22
  const isProductMissingFromCart = lineItems.every(lineItem => lineItem.sku !== CROSS_SELL_PRODUCT_SKU);
23

24
  return isProductMissingFromCart;
25
}
26

27
async function getCrossSellProduct() {
28
  const { items: productsMatchingSKU } = await wixData.query('Stores/Products').eq('sku', CROSS_SELL_PRODUCT_SKU).find();
29
  const crossSellProduct = productsMatchingSKU[0];
30

31
  return crossSellProduct;
32
}
33

34
function renderCrossSellProduct(product) {
35
  $w("#productName").text = product.name;
36
  $w("#productPrice").text = product.formattedPrice;
37
  $w("#productImage").src = product.mainMedia;
38
  const productDescriptionWithoutTags = product.description.replace(/(<([^>]+)>)/ig, "");
39
  $w("#productDescription").text = productDescriptionWithoutTags;
40

41
  $w("#addToCart").onClick(async () => {
42
    await $w("#shoppingCartIcon1").addToCart(product._id, 1);
43
  })
44
}

Understanding the Code

Line 1: Import the module you need to work with Wix Data.
Line 2: Import your backend code.

Line 4: This is where you will insert your product's SKU. If you'd like to promote a different product, replace only the number inside the double quotes with a different SKU.
For example, if your product's SKU is 213, replace line 4 with:
const CROSS_SELL_PRODUCT_SKU = "213";

Lines 6-13: When the page loads, call the other functions in the code to: check for your promoted product in the cart (lines 20-25); find the product in your products databse (lines 27-32); display the product information in the cross-sell box (lines 34-44).
Lines 14-15: If the buyer visiting your store has already added your promoted product to their cart, don't show the cross-sell box.

Lines 20-25: Check the currently displayed cart for the product you've decided to promote.

Lines 27-32: Find the promoted product in your products database and get its information.

Lines 34-44: Display the product name, price, image, and description in the elements inside the cross-sell box.

Step 6: Backend Code

1. Click the Code Files button in the Velo Sidebar, then hover over Backend, click the plus icon, and select Add Web Module.
2. Name this module cart.web.js.
3. Delete the provided sample code and paste the following code into the Web Module.

1
import { Permissions, webMethod } from 'wix-web-module';
2
import wixStores from 'wix-stores-backend';
3

4
export const getCurrentCart = webMethod(Permissions.Anyone, () => {
5
  return wixStores.getCurrentCart();
6
});

Understanding the Code

Line 1: Import the Permissions enum and webMethod from wix-web-module.
Line 2: Import the module you need to work with Wix Stores.
Line 4-5: Export the getCurrentCart() function for use on the front-end (line 2 of the cart page code). Learn more here.

Step 7: Save and Publish your Site.

• In the top right corner of the Editor, save and preview to check your progress.
• To see the live version of the site, click Publish.