shopify app
Theme Studio includes powerful tools to help you not only build great e-commerce experiences, but also to optimize to drive higher conversion. Your shopping cart is a great place to add eye catching content for cross-selling and up-selling. The key is to offer products that add value to the customer's purchase intent.
In this tutorial, we'll walk you through different ways you can increase the value to a cart by cross selling other products based on what your customer has already added to their cart. We'll achieve this by adding a custom dropzone to our page.
👉Tip: You can add cross-sell and up-sell recommendations in other parts of your storefront besides the shopping cart, like a product page or in a pop-up. Just follow this tutorial and place the dropzone in the desired location. Reach out to us if we can help!
If you're using an ajax cart, contact us to help install
Don't know where or how to install this code? Chat us and we'll integrate the code to your Shopify store for you, for free!
Start by creating a component model that we'll use in our shopping cart. Head over to builder.io/models, select +Create model and choose component. Then give your component a name, such as cart product widget.
Then, let’s give this an editing URL. This is what Builder will open in the Visual Editor to edit your product recommendations, so this just needs to be any URL this Builder component will display on. In our case, since this component will be on all the cart page, we'll use the url https://our-site.com/cart.
Copy the code snippet that starts with {% include 'model...} and head over to your Shopify admin page.
On the left nav bar in Shopify, click your Online Store and select Themes. In your online store theme, under Actions, click Edit Code.
This will open up all the liquid template code for your Shopify theme. Because we want these products to be available on our cart page, navigate to the templates/cart.liquid page and paste the code snippet in the section. Where you paste the snippet will determine where the product widget is placed on your page. Let's put it at the bottom of our cart. To do that, we'll paste the code at the very bottom and click save.
Now, let's create our product widget. Head back to the Content tab (builder.io/content) and choose +New entry and choose cart product widget.
Here you should see your page in the preview with a big +add block at the top - drag and drop content onto the page. One idea is to start with a column component and drag a product box component into each box create a small collection of products that may interest a visitor.
When using component models, just like any other content, you can use targeting, scheduling, and A/B testing to dictate who sees what content.
It can be really impactful to leverage the product widget and target on products in the cart to show specific products or collections as an opportunity to upsell or cross-sell based on what's in the cart already. For example, if a user has a product in their cart from the sofa collection, you could target based on that collection to show products in your throw pillow collection.
To use targeting, click the target icon at the top of your builder page. In Targeting, simply click Add a Filter, and choose one of the many properties in the dropdown menu.
👉Tip: Take your targeting a step further by scheduling your content and creating A/B tests to measure your page performance
And that's it! You've just added a product widget to your shopping cart to add eye catching content for upselling.
Other great ways to increase order values in the shopping cart experience is adding product recommendations or creating offers to increase the value of your customer’s cart, such as free shipping on a minimum spend.
