How to add a custom Parallax section in Shopify - no apps
HTML-код
- Опубликовано: 16 окт 2024
- PLEASE NOTE, THIS TUTORIAL IS OUTDATED SO IT WON'T WORK ON 2.0 THEMES
In this video tutorial, we will be adding a parallax section with fixed scrolling using HTML and CSS and LIQUID. You will see that when you scroll the image inside the section will stay in place, so let me show you how to add it to your Shopify store.
This is the source code:
doudmine.com/t...
#shopifytutorial2020 #shopifyforbeginners #shopifydropshipping
Thanks for watching!
Make sure to like + Subscribe For More!
How to add a custom Parallax section in Shopify - no apps
• How to add a custom Pa...
Custom discount labels for next Black Friday - no apps!
• Custom discount labels...
Custom product accordion to Shopify product page - no apps
• Custom product accordi...
Add a guest author name to your blog in Shopify - no apps
• Add a guest author nam...
How to add a featured product slider in shopify - no app
• How to add a featured ...
![[2022 Free] How To Add a CUSTOM FONT To Your Shopify Store -Easy Step-By-Step Tutorial](http://i.ytimg.com/vi/G-aqNl6mTqc/mqdefault.jpg)
![[2022 Free] How To Add a CUSTOM FONT To Your Shopify Store -Easy Step-By-Step Tutorial](/img/tr.png)
![ARGENTINA vs. BOLIVIA [6-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/C3wPtKNbAOA/mqdefault.jpg)
Here is a new video about creating a custom header that hides on scroll down and shows on scroll up!
ruclips.net/video/rbxBD9FtPqk/видео.html
my whole screen goes darkish when i select it what do i need to fix
So I have a custom liquid block I created on my Dawn 2.0 theme. Is it possible to add a parallax code to that box only instead of on the back end? It's a video on loop. Not an image.
Will it work on Dawn 9.0 Theme ?
Doesnt work with Safari on apple phones no?
Hello I tried this code in my Turbo Portland theme. In the code there is no theme.css it is only styles.css so I used that. After applying, the new parallax banner was behind the existing sections and magnified huge so I deleted the code. Any fix for this, with adding to a pre designed theme?
it works on supply theme beautifully! thank you! thought it wont work when the website is viewed on the phone.. pls help us with that matter
Any updates to this, Doudmine?
i like your move but how if i want to add more then images , i want to make 3d render scrolling , is there any thing i can do ?
Also live facebook & twitter feeds alongside each other at the bottom of a shopwired website ?
Do you have one for Debut theme?
Does this work for any Shopify themes?
After days of trying to do a parallax effect and watching many RUclips videos, I finally found a source that tells it to the point and without a monthly subscription. Thank you. One question. How do you remove the button and text fields? I would like only the parallax image. I'm totally new to this. Thank you for your help and great job.
You're very welcome! if you want me to create you an image parallax on your Shopify store, DM on Instagram instagram.com/doudmine/
@@doudmine Thank you for replying. I pretty much figured it out. Now the next challenge is to do an illustrator multi-layered parallax effect banner. Getting close.
@@actionairestudios I’m in your position now , 9 months later haha, can you guide me? I want parallax images only!
Hi,
Code did amazing job when viewing website through desktop. Is it possible to view same effect in mobile view as well.
not with this code
Hello brother you are doing great job. Please keep making videos like this its amazing. Can you please make a video showing how to have a new released product with small description and logo like gymshark website. Please!!?
You can use a slider as a new released products! watch this video ruclips.net/video/r7I3T4wB2cQ/видео.html It shows you how to make one without any apps
I'm using Turbo theme. Currently, I can't add any parallax natively, but can it be done by other means? CSS? Another app? Also, is it possible to animate in an image, like a simple fade in when a page loads? For as much as I paid for this theme, you'd think I could do all this crap out of the sandbox, get it?!!
I’m currently building on Turbo as well and ran into issues with this code. I added in the styles.css because there is no theme.css but the image once added was magnified and sitting under the Turbo layout. Have you found a fix?
Could this be used for Shopwired too ?
No, these sliders only work on Shopify themes
Any fixes to the fact, that the background image is zoomed in like 500% on live mode? On editing mode, it scales the picture perfectly but not on live mode.
Talking about the mobile btw
@@TheHautamaki The image should be in a portrait mode in order to look good on mobile!
@@doudmine Thank you for your quick response. Unfortunately, that is not only the case. When launching my site on live mode, the picture just zooms in so so much, no matter if it's portrait or not. And it's a massive zoom we are talking about. That is weird because on preview mode it looks nice... Any other ideas? Thanks.
@@TheHautamaki That's weird! didn't you try to upload an image that has a big width, like approximately 2080px?
@@doudmine I have tried bigger and smaller picture sizes. In every case, it just zooms in so much on the live mode that it is absolutely uncontrollable. I am using the Brooklyn theme. Could that be the problem? Anyhow, like I said, on preview mode, it looks amazing and everything is still fine...
Is it working for launch theme?
You can make it work, if you know how to edit Liquid code!
@@doudmine oh unfortunatelly i can't also i couldn't make the product slider. Would you help me, please?
Yes of course! DM me on Instagram
instagram.com/doudmine/
It does not work on IOS devices