Cross-sell Pop-Up

Learn how to configure the themes built in cross-sell pop-up feature.
Written by Jonathan Diaz
Updated 2 months ago

Cross-sell Popup

20 STEPS

 

1 The first step is to open the theme settings area of your Shopify theme config and go into the Cross-sell Pop-up section.

Step 1 image

2 Next, enable the cross-sell popup.

Step 2 image

3 Next, choose a collection to display in your first cross-sell.

Step 3 image

4 To display your first cross sell on any products, simply apply the tag 'cross-sell-1' to them.

Step 4 image

5 Click Products

Step 5 image

6 Locate the product that you would like to display the cross sell on.

Enter into the product configuration. 

Step 6 image

7 Scroll down and go to Tags section.

Step 7 image

8 Apply the tag ('cross-sell-1') and than hit enter.

Step 8 image

9 Click Save and go back into the theme config.

You can create up-to 8 cross sells to apply to any number of products in your catalog. 

Step 9 image

10 Now, scroll down and go to the Heading section.

Enter the cross sell popup heading text.

Ex. "You're Only XX Away From Unlocking Free Shipping"

Step 10 image

11 Next, you have the option of displaying a shipping achieved message.

This message will show when your customer has qualified for free shipping.

Ex. "You Have Qualified For Free Shipping".

Step 11 image

12 Select the color for the heading text.

Step 12 image

13 Select the font size for your heading text.

Step 13 image

14 Enter popup short description text.

Ex. 'Customers also bought...'

You can change the text message color with the "Heading color" setting just below the text input.

Step 14 image

15 Select text font size.

Step 15 image

16 Select your 'Continue shopping' button background color.

also, you can select it's text color from 'Continue shopping button text color' setting.

Step 16 image

17 Select the view cart button background color.

From the "View cart button text color" setting, you can change it's text color.

Step 17 image

18 Select the background color for the checkout button.

From the "checkout button text color" setting, you can change its text color.

Step 18 image

19 Now, click on save to save theme config and preview your changes.

Step 19 image

20 Cross sell popup.

That's it. You're done.

Step 20 image

Here's an interactive tutorial for the visual learners

https://www.iorad.com/player/1596809/Demostore---Cross-sell-popup

The new Shoptimized Cross-sell Pop-up allows your customers to quickly add relevant products to their cart to increase your average order value.

To configure the cross-sell, you'll first need to create a collection or use a premade collection with products you would like to show in the cross-sell. 

You can currently, select up to 8 different collections (so 8 cross-sells) - We can add more in if you need, just ask support :) 

1. Select collection for cross-sell

2. Apply the tag for the relevant cross-sell to any product or products you wish the cross-sell popup to display on. 

 



3. Repeat the process for any other cross-sells you would like to create. 


You can view a demo of our cross-sell feature in action here: https://shoptimizeddemo.myshopify.com/collections/showcase-1/products/cross-sell-demo

 

Tags for cross-sells:

  • cross-sell-1
  • cross-sell-2
  • cross-sell-3
  • cross-sell-4
  • cross-sell-5
  • cross-sell-6
  • cross-sell-7
  • cross-sell-8

The cross-sell also displays a free shipping threshold message or any other message you may wish to cross-sell. 

Simply use the XX value to dynamically insert the free shipping threshold amount. 

Did this answer your question?