Hi there,
I am currently using a paid Shopify theme called ‘Spark’. First off, it didn’t come default with a theme.css.liquid or a theme.scss.liquid, so I created a theme.css.liquid file in the Assets folder. All that was in there before was an index.css & index.js file. I’ve tried many different codes that I found on forums, but nothing is allowing me to add a parallax scrolling effect on my homepage slideshow image. Any ideas?
Hey, @JoshuaEvans
If the Parallax option is not available out of the box unfortunately there is no simple away around it, it will have to be coded in.
For Parallax you will want to make use of the background-image CSS’ property instead of an actual tag. This tutorial from W3schools sums it up pretty nicely:
https://www.w3schools.com/howto/howto_css_parallax.asp
Basically you’ll need to wrap the slideshow
Alternatively, you may be interested in this copy-paste Slideshow section code snippet. It comes with Parallax built-in and works on any theme.
Kind regards,
Diego
Diego,
I appreciate the response. That helps a ton. My only question would be where to actually write this code within the theme on Shopify? Which file would I write this code in?
You should adapt the aforementioned code in the file where that slider section is at. The file should be within the sections folder. It’s also important to bear in mind that parts of it can be within the main Javascript file (which is typically named as theme.js), also in the snippets folder. It depends of the code architecture the developers decided to use.
Which file would I write this code in?
With that said, you should not write the exact code from the tutorial in your theme, it won’t work as it is out of the box and may potentially break things.
This tutorial teaches how to code a parallax effect, having a solid understanding of html/css/js/liquid will be essential to adapt it to the theme.
Kind regards,
Diego