How do I place an image in the bar?(QAB)

While adding images to the bar message isn't yet an official feature, there is a way to do it. There are a few steps. I'll walk you through it.

The first thing you'll need to do is upload the image you want to place in the bar into your Shopify files. For that, go into Settings, then into Files.

Once in your files section, click 'Upload files'

Choose the image you wish to upload. Considering this image will be place in the bar, it's best if the image is small, ideally edited to the size you wish to display it. This will also help with loading time.

You should see your image among your files now.

Click on the copy link button. You'll need this address in the bar app.

Now head back to the QAB configuration. To get the image to display in your bar, you'll be placing it directly into the bar message by adding html code.

Here's generic sample of the message that you'll enter:

Message text <img src="" width="50" height="50" style="vertical-align: middle;" ></img>

Remember the link to your image that you copied in your files section? You going to paste it in the src="" section between the quotes. It should look something like this:

src="https://cdn.shopify.com/s/files/1/0605/3740/5675/files/gree_shirt.jpg?v=1643234548"

Now the bar knows where the get the image that it'll display in your bar. Let's go over the rest of the line of code. Width and height are how wide and tall the image will be in pixels. If you sized your image before uploading, you'll want to match the size here. 

style="vertical-align: middle;" ensures that the bar is well aligned vertically. Just leave that as is.

Anything outside of the <img></img> section is the text that will appear with the image. 

Don't worry if this seems really long. It won't fit in the message box, but that's ok. 

That line in the message box will result in this being displayed:

You can use the same technique to add a second image. 

You could place all this in the message box:

Buy one green shirt <img src="https://cdn.shopify.com/s/files/1/0605/3740/5675/files/gree_shirt.jpg?v=1643232874" width="70" height="70" style="vertical-align: middle;" ></img>&nbsp; and get a second free! <img src="https://cdn.shopify.com/s/files/1/0605/3740/5675/files/gree_shirt.jpg?v=1643232874" width="70" height="70" style="vertical-align: middle;" ></img>

And get this:

If you want, you can add a border to the image. Inside the <img> tag, you can add a border property in the style section, like so:

style="vertical-align: middle; border: 3px solid #555;"

This method also works when using PNG files with a transparent background:

This requires the PNG be saved with a transparent background.