Reveal Section On Scroll - Only On Select Pages Dawn

Hi team,

anyone knows how to activate the “reveal on scroll” feature for selected pages? It seems to be a theme setting and we don’t want this effect all over our page but only for specific collection pages to make the journey a bit more engaging. Theme backbone is Dawn.

Any help is much appreciated!

Hi @marvic

Could you share your store URL and pages you want that section activate?

1 Like

Hi Dan,

the shop we’re working on is not published yet! Any general advice how this could be done? It’ll be some of our collection pages in the format website.com/collections/collection

I assume we’d have to do something to the collection.liquid file and maybe to the base file to load a script for the section reveal?!

Go to your store admin > Online store > Themes > click 3 dots button > Edit code in theme you want to make scroll header, open theme.liquid file, add this code after element

{%- if template.name == 'collection' -%}

{%- endif -%}
1 Like

Hi @marvic ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

{%- if template contains  'collection' -%}

{%- endif -%}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

1 Like

This is more complex than I though

This adds CSS to the header section?

This does not work. It also looks like the code injects CSS into the header section?

If anyone is still looking for this – I wanted to disable the products animating in line by line. This CSS worked:

#product-grid li.grid__item.scroll-trigger.animate--slide-in {
    animation: none;
    transform: none;
    opacity: 1;
}

You could add a template for non-animated collections to get a class to allow this to be easier to target.