How To Add Animated Background In Shopify
HTML-код
- Опубликовано: 25 май 2023
- Today i will show you how to add animated background to Shopify store for free and without using any apps and set an animation as the background in Shopify.
Adding animated backgrounds in your Shopify store is really important now because animated backgrounds can be a great way to add some visual interest and personality to your online Shopify store, making it stand out from other stores and not only do they look cool, but they can also help draw attention and create an engaging experience for visitors.
Animated backgrounds in Shopify are especially helpful when you’re trying to showcase products or services that have multiple components or features like a complex software program, because it allows customers to quickly get an overview of what’s available without having to scroll through lots of text-heavy product descriptions.
It can also helps make the customer journey more enjoyable by providing them with something visually stimulating as they explore different pages on your Shopify store.
Code : pastebin.com/B5HeRKT4
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this RUclips channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#animated #background #shopify
Definitely hit the like on this video! Thank you so much!
Haha thank you too
Worked flawlessly! AWESOME
Thank you so much , i have watched a lot of videos but di not work until i saw your video
what a skill bro! amazing
It works! Thank you 😊❤️
Hey i tried but for 1 second this shows up and on the next moment it disappears
You're awesome man! Thank you
You're very welcome and glad i could help.
Cheers
Thank you so much!
Thank you for all the videos 🔥
You're very welcome
YOU ROCK MAN THANK YOU
You're very welcome
Great info Thank you but is there a way to make it work so that when I click on a product it shows the product and not video background first then I need to scroll down for product for the product .
you are the best THANK YOU
You're very welcome, glad i could help.
Cheers
Hi! Thx for this video! It helped me a lot.
Is it possible to get the button in de left bottom corner as a text link?
Like to hear from you.
Regards,
thank you a lot !!
You're very welcome
Salam alikum anas brother thank you for helping us made a great store i want you to make us a video about how to add animated scrolling into shoppify store it would be your pressure ❤
Great content mate
Thanks legend
Bro u r a legend
This is the channel i was looking for since a long time
if i ever got rich one day I'll back and donate some good money
haha thanks
Awesome video just have a question. What if i only want to add an animation to one section of the website?
I saw many people requested that and i will work on it.
cheers
Allah y hafdak bro thanks for your video
You're very welcome
Thank you my brother
You're very welcome
Hey, do you know how i can put something like this as an overlay with opacity? So that the website has for example a "grain" effect as an overlay. I dont know how to integrate that
A like and a comment! Thx Anas
You're welcome and thanks for that.
Cheers
how did you get the video at the top of you home page and the same for the footer ?
Valuable content thanks for sharing bro , i have question:
can you add animated gif in product picture please?
Thats what I wanna know too
I'll work on it
How can we get the source file code that you paste on the base CSS? It is any source code file of our animation video that will be created we will need to use or anyone. Can make it clear. Thanks
Thanks for the information ---- how would you change the gif/animation above your example - of the person walking in the sand on the beach?
You're very welcome, you mean the video banner ?
Hi, I am using the empire theme, it does not have the base.css file. Would you happen to know how to implement this to the empire theme? Thanks in advance.
please help, I did everything you said and the background is still being overlapped by the color themes. what do i do?
How did you make the animation of the girl walking on sand , did it come with the theme or is that something that can be customizable
I did that in a tutorial video, check out my channel.
Cheers
damn bro looking good
you... not the website. what products you use?
fr just busted to this
@@zosostaryu6604 pics or it didnt happen
Honestly i havent even started. But fucking thankkkkkk you.
Hey anas, is there a way i can only add this to my home and not to all pages? I can’t seem to be able to remove it from my product page. Thanks
you must be using the code in wrong section brother try using or putting the code in particular css section where you want it to be
Hii want to change my background in Shopify but i am using a streamline theme but it has no Base.css code in assets can you help me !!! How can i change background in streamline theme
how do i do this but make no sections? my sections are going over the gif.
❤
i followed this and for some reason all that happens is that i get a little banner at the top of my screen with the animated background. it doesn't go across my whole page
Heyy, mine is not working for some reason i can see the animation is there as soon as i reload the page and then it disappears could it be that the header, banner is overlapping it ?
What theme are you using ?
How to change the whole background including the header to a gif
i cant see the button. I want a Call to action button on top of the video. please help
What shopify themes are compatible??
Ii have a question about shipping , if I decide to buy bulk and fulfill orders my self , what would be the process of getting the right labels and best way to ship to customers , I'm based in the UK and will only be selling in the UK atm as it's all a bit overwhelming at times ,any help would be appreciated thanks! Great content by the way 👍
Hey, im afraid im not that knowledgable about that because that not dropshipping, that the regular importing product overseas and reselling them so that has to do with a lot of regulations and they are different for each country and im not from the uk so i have no idea about importing tax and customs and so on.
Thanks
Cheers
Above mine it has a link and I can’t get rid of it
I have a some difficulties for the background gif. I did all the step you show on the video but the gif only appears above the footer not all the way up. Do you know what might be the problem?
Hey, did you use a custom page builder for your theme ? also what theme are you using ?
Same here
I’m using dawn theme
bro, this only works for me on a certain place on the page, how can I fix this?
LIKED IT im going to try it and if it's successful I will subcribe and check out more videos, thank you!
In assest i have no folders ?
Hey! the gif is loading but it does not show as background
This only appears in the computer version, it does not appear in mobile format
if it is possible that it appears in mobile format (?
Yes it does, is this still the issue ? because mobile browser tend to save cache from websites little bit longer than desktop.
Also keep in mind that mobile browser can block autoplay feature if you have low power mode enabled.
Cheers
plz can u heeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeelp meeeeeeeeee it is not working on eleckon theme
please do an updated video on how to add a gif banner on home page for shopify dawn theme. The video you did before on it is outdated as the code doesnt work anymore.
did u ever figure it out
@@DanDaDon28 nah
how can i add an apple pay button on my shopify store under the add to cart button?
From the settings=payment settings.
Cheers
how do you add video to the debut theme?
I will work on it
Please show how to do it for one section only 😊
Thats a good request, i'll work on it.
Cheers
THE VIDEO/GIF ISNT COMING AS WHOLE ITS COMING IN BOXES
WHAT TO DO ?
any answer??
Hey i don't have the base.css or the other one you daid
What theme ?
Make video about shopify liquid
On what part ?
chdiiiiid
Hi, is it possible to change the home page Menu icon, if so how?
Hey, Could you elaborate on the question please because i don't understand what you meant by menu icon.
Cheers
@@OnHOWGuy of course, I mean on the mobile home page, there is the menu icon on the top left of the screen ( three lines) , is it possible to change it. Only for the mobile version
@@mindfullmavericks Ahh i see, your might want to wait for that video because i didn't do that before.
Cheers
@@OnHOWGuy of course my friend take your time, by the way, can you please make a video on how to change the text color of the dropdwn menu in the home page, since you already made a video about changing the background color
@@mindfullmavericks Thanks, that video is actually already made scheduled to be posted on 3th June.
Cheers
Love what you do! Maybe you can help me with something I’m struggling with. I want to have a custom cursor. But only on one ☝️ page of the site.
Thank you, that would require a custom code.
Cheers
I followed all your steps but the video won't autoplay, how can I fix this?
is this still the case ?
No link is working i tried 4th to 5th tutorial, every link in description is not working
I think pastebin is blocked is some countries, for meantime try with vpn but no worries i will fix this issue soon.
Cheers
bro link is not working
i cant download the code is there any help
Try with vpn
How To Add Background Image To Header In Shopify Craft theme?
noted
i can’t find code in description box
Its a link
Yo bro the link is not working can you please send me a new one.
Need help I don’t have base.css
What theme are you using ?
Not working
wld bladi m9wed HHHHHHHHH
It doesn't work
What theme are you using ?
@@OnHOWGuy does it work on dawn. What theme does it work on
When I go to my assets I dont see base.css I only see theme.css.liquid, will that work the same?
Yes. for every theme the name is different. You just have to understand what it’s named on yours
@@PrettySydney Thank you!
Mine doesnt work for some reason, i can see the gif for hlaf a second when i refresh but its still a solid colour 🥲
(great video btw i liked and subscribed)