How To Show Different Banner Images On Mobile & Desktop In Shopify

To show different banner images on mobile and desktop in Shopify

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 are going to be talking in great detail and depth about how you're going to be able to manipulate and show different banner images on different views

And those different views are going to be your mobile view and your desktop view. Now, you know, you're probably thinking to yourself

Is that really possible? How are you supposed to actually go with two different views on two different desktops

Okay. So, trust me, it's absolutely possible and it's absolutely doable. So please do make sure to fully watch this video till the end so you can understand the full detail and depth of how this is, you know, actually going to work

So, yeah, without further ado, Let's get straight into this. So to get straight into this, first of all, you're going to want to make sure to be logged into your Shopify

And once you're logged into your Shopify, you're also going to want to make sure to have a fully set-it-up Shopify account

Now, after you have a fully set-it-up Shopify account, you are going to want to make sure that you do have an idea of how to upload media into your Shopify store

And once you upload media and how you're going to add banner images, I'm going to be walking you through all those

things, you know, uploading media, adding banner images, we're going to be talking about all the way

So please do make sure, as I said, to watch this video till the end so you can get a clear

idea of how things work in this case. So yeah, without further ado, let's get straight into it

Now, to start things off, what you are going to be doing is obviously, first of all, we're going to go

ahead and choose a nice theme for our store, right? So the theme for the store can be accessed through online store over here Again you going to choose a theme with a nice you could say open out you know a good banner image up here So in this case Dawn or Refresh would be the best options

Okay, Don is the default theme. Refresh is the second free theme that we have on Shopify

And trust me, these two themes, they work like a charm. They're pretty incredible

And they don't disappoint you. So please do make sure to use them

They're absolutely incredible. Now, moving on, once we've discussed which themes are actually good for us

let's also go ahead and discuss the editorial sequences of these. Like, you won't need to mess around with any certain code or anything

All you're going to need to do is you are going to be working with a very basic

and a very, you could say, simple style of customization. Okay. So to get into this customization, what you're going to be doing is, first of all, you're going to go into your settings

Okay. And once you go into your Shopify store's settings over here, you're going to go into your media. Okay

And obviously when you come into your media over there, you're going to allow yourself to add your, you know, necessary things. Okay

Now, in the case, you can find your media over here. It would be in the content form. But if you're

store is updated, then it's probably on the left-hand side over here, you're going to go into content and you're going to go into files

Now, in this file section, as you can see, I've uploaded a few things. You can upload files of yourself as well

Okay. And once you do that, now we're going to come back to our online store over here

And once we are in our online store, okay, first of all, you are going to want to make sure to create a duplicate of your store, okay

because I don't want my, you know, working to ruin anything you liked about your store

So you going to create a duplicate of the store and you going to customize the duplicate of your store Don you know customize the original store Because what happens is if you customize a duplicate you know and you like the changes

you can publish the store and make this the original. But if you don't like the changes, you can just discard it by clicking on delete

And yeah, so let's go into customization and talk about how we're going to, you know

set images apart in the different views. So to set images apart, you are going to

want to do a few things. First of all, we're going to stay in the desktop view. And, you know

obviously we are going to want to make sure I'm just going to add these things down here. So here's

my image banner. And in the image banner, we are going to be adding our image, right? So obviously

you can go into the stock images that they provide you, or you can go with these ones. So I'm going to

add this image. Okay. So let's say this is the Nike swoosh that I've added as my brand logo

So, you know, just for example, your purposes. And moving on, you can also add another photo, which, you know, creates a very significant response in this

So it's come down here, click on second image. You can upload any kind of second image, add any kind of second image by just clicking on add images

And let's say we have Nike over there. I'm just going to add a photo of a Nike product that I have on a Nike product

that I have on my system. So I'm just going to take this picture of the Nike product

And once you've taken this picture of the Nike product at it, click on upload

We're going to click on Done. And you can see these two products are going to be muched in over there

Okay, it's really fun and really simple to mess around with these things

So once you've done that, you're going to click on Save. Once you click on Save, now we're going to come over to our mobile view

Now, in the Mobile View, you can see the same. same images have applied themselves So how are we going to undo that You know we don want that We don really want this kind of working So to undo all of this what you are going to be doing is you going to be going into your liquid Okay And what is your liquid Let me show you You going to come back here You going to come back here in the custom one You going to go into edit code And as you go into edit code you just going to make sure for things to load up And once things load up over here in your code section

Right here down, you're going to see a few things. And we are going to go over to assets

And as you go over to assets, you should see an asset called section imagebanner. CSS

Okay. So you're going to find that over here. Section image banner

There we go. So you're just going to go ahead, open that up

And once you open that up, you are going to want to paste a certain code in the section

Okay. So what is the code that you're going to paste in this section? Let me show you. So this is the link and you can find the link in the description below or you can pause the video and take this link off. Okay, you're going to find the code in this link. And once you get the code, the code is basically going to be a banner media code that you are going to add right under the banner display over here. Right. So once you add that code, what that will be

allow your code to do is basically there will be one set image for your main view, which is going to be

your desktop view, and then you can add another image for your mobile view. That code essentially

does that. I don't exactly know how because I don't understand code that well, but yeah, those are the

essential things that the code does for you and that's all the things you're going to need. You're just

going to add a liquid code and things are going to be done for you. So yeah, that's essentially about

it for this video. And if you enjoyed watching, please do make sure to drop down a like, subscribe to the channel, and I will see all of you wonderful people in the next video. Goodbye