[Shopify] How to create a full slide page using Scrollify

I wanted to make the shopify page that allows us to have full screen page transition with each scrolls.However, common plugin we used to use "fullPage.js" costs money now. So we are going to use "scrollify" to make full page scrollable page.

DEMO（pages that are made in EC Penguin Shopify website）is like this

https://ec-penguin.myshopify.com/pages/scrollify-demo-page

When you want to make classy Shopify LP, it might be a good choice to use scrollify.

The website that allow us to transform the page with one flick, is considered as cool in our minds. And this time we are diving in to the actual usage of Scrollify and realize full page scroll.

Just to be careful, some website or environment, it might not work properly when conflicting with some other plugins, so it's better to try it small and see if it works properly in your Shopify store. Make sure to test on several browsers as well.（If you start big and it turns out not working, it might be a tragedy.）

Embed jQuery and Scrollify to theme.liquid

First embed below 2 to theme.liquid.

Embed jQuery

From Google Hosted Libraries

https://developers.google.com/speed/libraries

we'll copy this jQuery below and embed in theme.liquid

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Embed Scrollify

Download Scrollify from Github

https://github.com/lukehaas/Scrollify

Download from right "Download ZIP" button.

And add jquery.scrollify.js file to asset folder in Shopify.（We don't actually need other scrollify files so you can just delete it.）After adding the file to asset folder, load it on theme.liquid.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> {{ 'jquery.scrollify.js' | asset_url | script_tag}}

It should be stated as above. Make sure that the Scrollify file must be loaded after jquery.

So now we've finished loading!

Make test page

Now proceeding to make the test page.

Make new page.scrollify.liquid file in template folder.

And go to the admin page to add new page from "Pages".

Click new page in top right, and change the template to previously made "page.scrollify".

Finally, we've finished to make test page on our store!

Inside page.scrollify.liquid

For the source code that you need to state in template.

You can just copy and paste the code below.

 <div class="scrollify-section section01"> <h2>section1</h2> </div> <div class="scrollify-section section02"> <h2>section2</h2> </div> <div class="scrollify-section section03"> <h2>section3</h2> </div> <style> body#exhibition{ padding-top: 0!important; } div#shopify-section-footer{ display: none; } div#shopify-section-header{ display: none; } #MainContent{ padding-top: 0; } .scrollify-section{ height: 100vh; width: 100%; } .section01{ background: pink; } .section02{ background: lightblue; } .section03{ background: bisque; } </style> <script> $.scrollify({section:".scrollify-section"}); </script>

Save this and go to the previously made page for scrollify test.

Scrollify should be working properly and are able to test ittt out on your side.

Scrollify's settings

Scrollify can customize with quite a lot of settings.

$.scrollify({ section : ".example-classname", sectionName : "section-name", interstitialSection : "", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, standardScrollElements: "", setHeights: true, overflowScroll: true, updateHash: true, touchScroll:true, before:function() {}, after:function() {}, afterResize:function() {}, afterRender:function() {} });

Remove header and footer from Scrollify

One of the main function here, is to remove header and footer from scrollify page.

For example, add interstitialSection to Jquery's Scrollify part, you can make some part not full page scrollable.（This is super useful!）

This time I've added the class ”shopify-header” to header and ”shopify-footer” to footer. and excluded from full page scroll.

$.scrollify({ section:".scrollify-section", interstitialSection : ".shopify-header, .shopify-footer" });

Disable Scrollify on mobile responsive

In the official document, when you state

$.scrollify.disable()

it can disable the Scrollify, so when window width is smaller than certain width, I've tried to disable Scrollify...

But it doesn't work at all...

So thought about it a bit, and targeted the class which doesn't exist. Then it worked properly!

Using windowWidth, get the window width, and if window width is larger than 768px apply the scrollify, and if it's less than 767px, apply scrollify to the class whichh doesn't exist. (Which means to disable Scrollify.)

$(function () { var windowWidth = $(window).width(); if(windowWidth > 768){ $.scrollify({ section:".exhibition-scrollify", interstitialSection : ".exhibition-header, .exhibition-footer" }); } else{ $.scrollify({ section:".not-existing-class" }); } });

So in this way, I was able to suit to responsive.

By the way if you are using scroll snap in CSS, Scrollify might not work properly.

Using Scrollify in Shopify "summary"

That's all for using Scrollify in Shopify store!

It might be a bit difficult to use Scrollify in product pages, but using in campaign page, company page, collection page would make the page classy.

However, as I've stated in first part.

this Scrollify might have conflict with other plugins or applications.

so make sure to test it out small first!