How To Add brands slider To Your Shopify Store (2024) Full Tutorial

How to add Brands Slider to your Shopify store

step-by-step tutorial. Hello, everyone. Welcome back to another video. I hope you all are doing great and are having an amazing and absolutely incredible day

I bring you back to yet another video, and in this video we're going to be talking about adding a brand slider

to our Shopify store in the easiest, most simplest way possible. Now, what is a brand slider

A brand slider is basically, you know, that sliding widget that has the brands that are affiliated with your store

So let me give you an more open example. I'm going to just write brand slider over here

And it's basically, you know, these slides that go through your store telling that

hey, this is a logo slider in which you can, you know, add different logos

or the different types of brands that you have. So we're going to obviously add something like that in our store just to make it look good

And we're going to give it an overall really good look. So to add a brand slider, there's a few things that you're going to need to get

There's going to be a few HTML files, there's going to be a few RTF files, and there's like some code snippets that you're going to need to add

Now, to add these code snippets, first of all, obviously you're going to go into your online store, okay

And as you go into your online store, you are going to go into your themes

You're going to choose a theme that you want to add this on, and you're going to go ahead on edit code

Okay, and as you go on edit code, it's going to open up the whole

code editor. So you're going to find the directory. Okay, so you're going to go into sections

You're going to find sections as so. And in sections, you're going to go into EGbrands

Dot Liquid. Now, in the case that you can't find EGbrands. Not Liquid, you are going to want to go ahead and create one. Okay? So we're going to go

ahead we going to click on create new add a new section there we go you going to make sure to keep a liquid we don want a jason we going to go eg dash brands okay you going to add that and obviously the dot liquid will be there itself

now once you do that it's going to give you this okay the small snippet of a code we don't really

need this so you can delete that if you want now you know this eG brand slider that you have

obviously you're going to want to go ahead and uh you're going to want to paste a whole eg brand slider

code in this. So you can just go ahead and search up for AG Brand slider code. And obviously

EG Brand has written this code for us. So, you know, it's a whole client logo slider. So

you're going to go ahead and you're going to take this code snippet off. Okay. And obviously

we're going to take it off in HTML because it's a liquid code. So just go ahead, copy this whole

thing off, just like that. Once you do that, click on copy, come here, and we're just going to

paste it over here. Now, that obviously makes different image queries and stuff. And in this image

query, you can go ahead add different types of styling. Now, obviously, to add the styling

you're going to take this over here as well because the CSS is obviously more important. So

I'm going to copy, copy the CSS. Come down here. And we're going to paste this

CSS as well. So there we go. There's your basic CSS. Now if you want, you can also just

go ahead and remove the HTML section because if you only have the CSS, that should pretty

much work as well because it has all the basic image fluids and stuff. So once you add all

of that, you can save that, save the whole asset code. And once you've saved the whole asset code

obviously it should give you an EG brand slider for yourself okay and in the case that

this code doesn work you can also add your JavaScript codes but the dust thing that we don really want a JavaScript code So once you added your EG Brand Slider you are going to go into Customize

Oh, wait, I went to the wrong store. Yeah. You're going to go into Customize on the store that you add the EG Brand Slider to

And once you do that, obviously going to click on Add Section. And once you click on Add section, you're going to find the brand slider that we have just added

Now, again, in the case that you can't find the brand slider, you are going to want to

make sure to go ahead and cross check, cross-reference if you missed something out

In the case you missed something out, obviously you can go ahead and recheck your code, but

yeah, that is how you are going to add your brand slider

Because without that, the code will not input itself and without that, you know, it won't

really work. So just go ahead, recheck the code for yourself. You can also choose a new website for like you can just write Shopify Liquid

brand slider code. Okay, you can check those out and you know there's different people that have given

different codes on the Shopify community for different brand sliders. So they're gonna you know give you a whole thing over here

So create a section with brand logo. Liquid obviously you don't really need to add brand

logo dot liquid you can add anything but just name it something you know you'll remember so let's say i'm

going to go with brand dash logo dot liquid so obviously go back into the exit section again go into

edit code once you go into edit code you're going to go into section once you go into section uh you can

delete the eG brands liquid if you want to and uh over here just click on add section again as it says

brand dash logo okay so brand dash logo so this is how you can try different codes that work better for your store And once that is done delete all of that and paste the code that you copied Okay And make sure it this code

over here. So I'm just going to click on copy and there it copies it. And now we're going to

paste it over here. And as you paste the code, obviously, as you can see, this code truly works

They like the code or brand area start. And yeah, this code is

has worked and we're going to click on save and once you click on save what's going to happen from

there is things are going to work pretty well from there so once you've added the code to the

slider what you're going to do from there is you're going to save the code to the jason liquid

file and once you do that you're going to exit out of there and once you exit out of there

you're finally just going to go into your customization section in the store okay and I'll

Obviously, I've added the code into my copy default code of the Shopify theme

So what you're going to do over here, go into add sections. And here, you should basically add your custom liquid code

You should be able to find it all. Now in the case you don't find it, don't worry, that's not an issue

You can add your custom code over here. Or just go into the ad section

And over here, again, it should appear in the section. You could just search it out for brand

it should give you the brand logo. There we go. So just click on it

And your brand slider should be here. So you could start adding your brand logos

Let's say I have this custom brand logo for Nike. So once I add it, you can start seeing that it's going to start creating a slider

And you can even add more logos. Like let's say I'm going to add a single brand logo again

Just any random logo. And as you can see, it starts adding the slider logos really easily, really perfectly

and that is how you're going to add brand slider to your shop by store using code

So yeah, that's about it. Thank you for watching, and I'll see you all of you next time. Goodbye