Checkout Components; Setting up a Free Shipping Upsell

Hi Alex here from Checkout Components.

I'm going to walk through how to set up a free shipping upsell.

So if you've come into a dashboard you can navigate to your components or jump on in to create a component.

Now if I select the upsells, I can navigate to the free shipping upsell template over here.

Now with any component the component needs a name.

So Free Shipping Upsell is a good start.

you can then add your title or subtitle.

So you may also like nearly there, something along those lines to help nudge that customer along.

You can edit your default shipping threshold.

You can also utilize Market so so if you've got multiple markets with different thresholds, you're able to utilize the use Market feature, select the market and update the threshold accordingly.

You can also here if you are only setting this up for a particular market, you can select that market accordingly as well.

So if we continue with the hundred dollar free shipping threshold here, you then need to choose what products are going to show.

So we've got a number of different ways that you can source the product recommendations.

So there's Shopify AI Bestsellers Collection manual selection Product Mapping which is where you can curate one to one product recommendations, utilize any metafields that are set up and also integration with a number of different search and merch providers.

So for the purpose of this setup we're going to just use that Shopify recommendations here.

Worth noting is you can hide products as well.

So for example if you have shipping insurance or gift cards, things that you don't want to show within that recommendations field you can hide those by tags type or vendor as well.

and obviously select the applicable products one by one also.

So lots of way to ensure that the wrong products certainly aren't shown within appearance.

There's a number of different areas that you can have a look at.

So maybe it is that you want a primary button versus the secondary button.

There's quite a bit here that you can manipulate I guess to some degree.

However it is very much templated because it's checkout, it's important and we do want to keep you on, on guardrails to some degree.

There's a discounts ability here but that won't be applicable for this upsell component type.

So what I will do however is jump into the conditional rules so we can set the free when this, when this will show.

So for example if you have your free shipping threshold of $100 and a customer passes that there is A success message.

If, if you didn't want that to show.

And just so you're aware in this training video we can go if the cart subtotal is less than 100 then this is when this product upsell will show.

Another one that is worth noting here is I can add another rule and I can choose from the many different types of conditional rules we have here, to only show within in a particular shipping type.

So a very popular one that we see converting very well for a number of different merchants is utilizing it to appear within the shipping stage of checkout and also within the standard checkout method.

So an example of that one is here for the collagen co you can see that it's really nicely sort of nestled in there.

Very much part of organic journey for this customer that it doesn't appear and give additional friction.

So if we add this here we can add standard and that will help set that conditional rule.

So we've got here all conditions must be met.

The cart value needs to be less than $100 and the shipping method needs to contain standard.

If we go next we give this the time.

So cart under 100 just so we're aware and then this one is pretty much ready to go.

So what we'll do is we will make this active do.

Note that nothing will appear in checkout until it's placed in checkout.

I'm going to copy the name that we have here and save this component.

So what we'll do now is we'll place this in our checkout.

So jumping on over to the checkout, editor, I've copied our current live checkout so I'm going to edit this and add this in a draft checkout.

So this is really best practice if you don't want to add anything to the live environment without testing it.

So duplicating live and then you can add that component in straight away.

So what we'll do is we go add block select the type of component.

So we're using an upsell and we drop in that upsell name.

Now our recommendation is always to ensure that it's toggled on for shop pay so that shop pay customers are also shown these upsells as well.

And you can simply drag and drop this down into the options list there within the shipping area of the checkout.

Now I will save this one Now you're able to preview your checkout by device here, and then you can also preview it on the storefront with this preview feature.

Now, I've set up a preview, so I've pre filled some delivery information.

And what we can see is that that free shipping threshold is now appearing within shipping method within the standard shipping type.

So that is all appearing as we would expect it to.

And in only a number of minutes, we have set up a free shipping upsell ready to help customers, increase AOV and drive them towards that free shipping threshold.

Now, the one last important step we need to do is publish this draft profile.

So if you've tested this, you've had a look, across device, you're happy with how everything's appearing, all you need to do is jump on back over here and publish.

you can also do this as well at, this stage as well.

So you can publish here also.

And once published, this becomes the live checkout profile, and you've added that component to checkout.

and including that now within that customer journey.