Image Banner - 15 Minute Checkout Tune-Up

Hi, Alex here from Checkout Components, taking you through our 15 minute checkout tune up.

Now the first, component that I showcased was the carousel upsell and that took me six minutes.

So I've got nine minutes remaining to show you through the image banner as well as some trust badging.

Now I'm in the app and I'm at the list of components and I'm going to create a component.

So for an image banner, I'm going down to custom content and I'm given a number of different templates that I'm able to utilize for content components.

And today I'm going to select the image banner.

Now, as always, we give the component a name, install checkout components, and then we can look at the content that we wish to add.

So going into the image library, I've got my banner here and I'm going to select that and then just copy in the link.

Now you'll be able to see that the preview has updated.

So it's just a nice little sense check that you have selected the correct image.

Now you can have a separate image for mobile.

However, for this example, this image will be fine for both desktop and mobile.

And checkout components does, resize the image to the container width that the com that the banner is displayed within.

So we do have a couple of customers ask us from time to time what the correct image size is.

All you need to know is that it will resize to the width of the container or of that checkout area.

So moving forward, there's a number of different options.

A clickable link is one that we do often see.

I don't need to select any of that today.

I also don't need to select any conditional rendering.

However, this might be something that you want to utilize, say for logged in customers if you're doing a secret sale or something like that.

So there's a lot of different options that you can utilize there.

In the same vein, you can select market, but I'm going to have this banner show to all markets.

So it's as simple as making this component active, saving the component, clicking back in here so that I can add it to checkout.

Now before I do that, I will just copy the name because it makes it very easy to drop it into the checkout extension.

and we can see here, my 15 minute checkout tune up draft profile.

Again, just a nice way to ensure that you're happy with the appearance of everything before you do publish it.

So I'm working in a draft profile today.

You can See that this carousel is still here and for the image banner I don't want to add to this section.

I, I wanna add it up here where there's a little bit more real estate for an image.

So jumping into the main content area, I'm adding a V3 component.

Cause it's a new component.

So selecting this extension, I'm just pasting in that component name that we copied before we came on over and we can see that it's already populated.

Now I'm going to toggle this for Shop Pay because I want that consistent experience regardless.

So that one's going to show for Shop Pay customers as well and you can see how that banner will appear and that it has resize to the width of this area.

So we've now got an image banner in place as well as our carousel upsell.

Now that's looking pretty good.

So I'm going to give that a save.

Before we then jump into Trust Badges, however, I am going to showcase the Booty checkout.

We just love what this team is doing with checkout components.

So every week or fortnightly they're actually updating their image banners in checkout to ensure that all of their campaign messaging is carried through so customers aren't missing anything that's key or topical of the moment for this brand or all the way through to checkout.

So a very easy way to create urgency over the Black Friday period, and also to communicate special offers for customers.

So thanks for watching this.

The next component I'll showcase is Trust Badges.

See you soon.

Thanks.