Adding Badges to a Collection Template

Video Transcript

Hello. In this video we're going to add some badges to our collection page. So right now I'm in my Shopify admin and I'm going to select on my badge Zilla app, which I've already pinned to my left nav inside of the admin.

Now it opens up to the screen for choosing badges and we want to add collection badges. So we're going to select Collection.

And now we're going to click on the Add Badges button, which is going to bring up the list of all the badges. And there's hundreds and hundreds of them to choose from.

Now, on a collection page, what you probably want to be doing is having badges that represent the products, the whole set of products that we're talking about. So it's not product specific information, but a group of products, information. You're probably not going to do business or brand level things. Those are going to go on your homepage badges or on your car badges.

You're going to be picking badges for the set of products that you're showing. So we might want to do things like 30 month warranty, 30 days for returns and satisfaction guaranteed. 24 over seven customer support. And you start scrolling through and you can see there's lots and lots and lots of things to choose from.

For example, lifetime guarantee, lifetime warranty. Sometimes we have very similar badges with slightly different wording, depending on how you want to say that in your store.

And lastly I'm going to pick let's see. Purchase plants a tree. So now I'm going to save and close. And you'll see I've picked five different badges. and I also have the ability here with these six little dots I can click and drag. You see, my cursor changes when I hover over the dots. I can click and drag and change the placement of them if you want to change the order that they show up in.

And then once you're happy with that, it's already automatically saved on the screen. When you change placement. And once you're happy with that, you can now add them to your collection theme. And we have a shortcut to do that here. But we're not going to use the shortcut in this demo. What you want to do is you want to go to your online store under sales channels.

Here I have it pinned in my Shopify admin. If you don't have it pinned, just click on sales channels and you'll see online store. And you want to go to your live theme and click on the customize button.

And now you're going to want to change your collection template. So I'm going to select Collections and Default collection. And you can add you know if you have more than one collection template, you want to add your badges separately to each of the templates. So now we're going down to add section. And we are going to under assets here select the collection badges under the apps any apps you've added to your store.

If they have elements you can add your theme. They're going to show up. So you've got a lot of apps you're going to have to, you know, go through all all of them. You might see 20 elements here instead of just one, but you're looking for badge zilla collection badges. So we've added that to our collection. You can see it's down here at the bottom.

Now if you want you could move that up to the top just by dragging this element, moving it up. Or if you also wanted to, you could have it at the top and bottom. You could just take this element and duplicate it.

And move that down to the bottom. So you could show badges at the top and at the bottom of your collection page if you wanted to. And I'm going to remove that for now.

And then we're going to save this. And now we're gonna go out to the customer facing side of our website. And we're going to refresh our collection page. And you'll see our badges have now shown up. And on mobile we've got it, set that the badges are smaller. And you can see here what they look like. Now, if you've got five and you want them to all show in one row, you can play with the sizing of that.

And the way you do that is in your badge Zilla app. You go to the settings badge settings right here, and you can enter the mobile area.

and you've got a size setting slider and a spacing setting slider. So we're going to do it the spacing down to two. And we're going to take our size down to 60.

It was at 70 when we opened this up. We're going to save that now. We're going to look at that here on the front end. And that now fits in one row. So that is how we add badges to our collection pages. Thanks for watching.

Back to blog