Reveal Section On Scroll - Only On Select Pages Dawn

Store Design
, ,
1

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!

2

Hi @marvic

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

1 Like
3

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?!

4

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
5

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
6

This is more complex than I though

7

This adds CSS to the header section?

8

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

9

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.