Here's instructions and example code on how to create a simple cross-sell promotion for your Shopify cart page. It all happens within a theme liquid template, no app or Javascript.
Liquid Section for Turbo Theme
Video Transcript
Hey, Scott Austin here from JadePuma.
In this video, I want to show you a section that I developed that you can add to your theme. That'll give you what I call simple of cart. Cross sells so simple in that this product here that's being cross-sold right now is not specific to the contents of the car. So no matter what contents are in the car, they'll see the same cross sell items. And this is done through a section. I'm demoing this in a turbo theme, the online store 2.0 version of turbo. So if you take the code that I provide, you're going to need to adjust it slightly, probably for how sections are structured inside of your theme. Now here, you'll see what happens when I, you know, look at the cross-sale and like, oh yeah, I want to add gloves. If I add the gloves, it adds it to the cart.
And now that promotion shows the second item that's in the queue and there's up to three products that can be queued up in the cross sales section by add that one, it'll add it to the cart. And then the third one shows up and on this one here, because the hat and gloves have no variants, cause it's one size fits all. They get added directly to the cart, but here on the t-shirts there's variance for sizes. So, and the, the section or automatically detects does this product have variants or not? If it has variants, then when you click the add button, it actually takes you to the product where you can select the variant and then add it to the cart. And then we're all three products are added, no promo shows up. But if I remove any one of these from the cart, the promoted item, the cross sale item shows up again.
So it's fairly dynamic in that. We're checking the cart contents to see if any of the items in the queue are in there. And if they're not in there, we'll promote them in this cross sell section. Now going into my theme customization, because this is a section, right? So I've got the normal cart section and then I've got this added cart, simple cross sell section because it's a section. I can just move it up and put it above the shopping cart, or I can move it back down below and I can turn it on or off like that. And then in our settings, we have lots of settings. We also have an on-off toggle here. We've got color controls for the background and the border color. And then you can select each one of the products, decide if you want to show the product title or not automatically.
And then there's text above the button, text for the button and then text below the image and the button area. And you can have one, two or three products. If you don't have a products, you know, selected for product to a product for you, it just won't show them. So it automatically detects if a product has been selected for two and three when determining to show those or not. And then in the page that you're doing this video on, on my, on the Jean Kuma website, there'll be this content here, which is the section liquid and everything is loaded up into this one section file. So there's no snippets. All the JavaScript is in the section file. And like I said, you might need to adjust this slightly for different classes and things like that, that your theme is using. For example, in the turbo theme here it is global button primary, the global button and the gold button primary are the CSS classes, four buttons.
Your theme may have different ones. And there's other settings that may be a little bit different for your theme. And you'll notice down here that we've added this section for online store 2.0 to be a template that gets added to the cart. So if we tried to add this section to another product, you know, template or collection template, it wouldn't be able to be added because it's only for the cart. And that's because we're using different cart settings on the liquid logic on here. But if I go back to theme customization and I remove this cross sell, and then, you know, this is the generic blank cart page. If I click on add section, because we've already said we're wherever we were a second ago right here that, you know, this is a section that is for cart templates. If we select add section boom, there, you can see there's the cart simple cross sells section, it gets added, and then we can start adding the content for it. So that's how that works. Hopefully this helps and good luck.
Thanks for watching.