Here's how to add a section to the Flex theme to present a simple cross-sell to customers in the cart.
Theme edits needed:
- Add cart__simple-cross-sell section
Code for the Custom Liquid Section
Transcript
Hey, Scott Austin here.
In this video, I'm gonna show you how to add a section to your flex theme that will enable you to do what I call simple cross sells inside of the cart. So here I am in a store using the flex theme, and this is all for online store 2.0 versions and above. And if I say scroll down on my cart a little bit, you'll see here, I've got this product that I'm cross-selling and promoting and merchandising in the cart. And there's an add to order button. If I click on that, it's gonna take me to the product page for that product, cuz this product has variants. So the customer's gonna have to pick what variant they want and then they can add that to cart. And now you'll see that cart. You know that product in the cart. If we scroll down, we're no longer promoting that same shell sort a product we're now promoting the unloader for the nut wizard.
So it, it automatically detects that that cart, that item is in the cart and then promotes the next item on the list. And these promotions are, are the same promotions regardless of what content, what products the customers added to the cart. So they're not recommendations personalized to what's in the cart. It's more like an end cap or an impulse purchase. You know what, you know, buying gum with the cash register kind of thing. What works really well here is putting, you know, a low dollar value item. That is a fairly popular thing that most of your customers would be interested in. So now if I want the unloader, I can hit add to cart or add to order, and this one also has options. So I have to pick which variant I want select that, add it to the cart. And now we'll see it's in the cart.
And our promotion is now showing a recipe book. Now this recipe book doesn't have any variance. So if I click add to order, it's automatically gonna add it to the cart without having to go to the product page. And if I take any one of these items, and so now at the bottom, we have no more promotion going on, no cross selling. And if I take any one of these items out of the cart and refresh my age, you'll see that that item is being promoted again. So let's see how that looks like in theme customization. So this is a section. So over here you can see I've got the cart, simple cross sell section. I've already added it to my cart and because it's a section, I can move it anywhere I want to and place it on. On the page. You can see Shopify servers are giving us a little error here.
And if, oh, it's gonna refresh us. Nice, thank you Shopify. And if I add the, and if I wanted to add the section, if it wasn't already there, right, it it's now showing up in my section list. And what we get to do inside that set action is pick some background colors. We can also adjust the, the width, the, the maximum width of this element. I like 'em to be a little bit smaller on the page usually. And then we can also pick the three up to three products. If you don't pick a product, it won't show, you know, if you only have one product selected, it won't show anything. Once that one product is added to the card automatically stops displaying at that time. And you also get the ability to change the text on the button and put a little merchandising text above and below the element.
And because this section is optimized for the flex theme, it's got the normal flex theme controls at the bottom for CSS classes and spacing and all that good stuff. So to add this to your store is actually pretty simple. It's one file. So you go into edit your theme and go to sections and click on, add a new section. And then you would take the file name that you see here, cart, simple, cross sell, type that in, and you get a blank section there and then you pull the code that I'm going to supply. If you're looking at this on my website, you'll see the code right below the video. If you're watching this video on YouTube, there'll be a link in the description to take you to the, my blog article, where you can just copy and paste this code. So you'll copy all this code and just paste it into the one file hit, save. And then if you're using a flex theme, you should be done at that time. So go ahead and try this out and see if you can start cross selling some products and increasing your average order value in your cart.
Thanks for watching.