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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400)
2 Next, enable the cross-sell popup.
![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400)
3 Next, choose a collection to display in your first cross-sell.
![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400)
4 To display your first cross sell on any products, simply apply the tag 'cross-sell-1' to them.
![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400)
5 Click Products
![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400)
6 Locate the product that you would like to display the cross sell on.
Enter into the product configuration.
![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400)
7 Scroll down and go to Tags section.
![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400)
8 Apply the tag ('cross-sell-1') and than hit enter.
![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400)
12 Select the color for the heading text.
![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400)
13 Select the font size for your heading text.
![Step 13 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=13&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=14&width=800&height=600&mobile_width=450&mobile_height=400)
15 Select text font size.
![Step 15 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=15&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=16&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=17&width=800&height=600&mobile_width=450&mobile_height=400)
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](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=18&width=800&height=600&mobile_width=450&mobile_height=400)
19 Now, click on save to save theme config and preview your changes.
![Step 19 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=19&width=800&height=600&mobile_width=450&mobile_height=400)
20 Cross sell popup.
That's it. You're done.
![Step 20 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=1596809&step_number=20&width=800&height=600&mobile_width=450&mobile_height=400)
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 ![](https://members.shoptimized.net/media/uploads/crosssell1.png?1535437383752)
2. Apply the tag for the relevant cross-sell to any product or products you wish the cross-sell popup to display on.
![](https://members.shoptimized.net/media/uploads/2018-08-28_09-05-16_1.png?1535437810437)
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.