Reveal Section On Scroll - Only On Select Pages Dawn

marvic · ‎01-24-2024

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!

Dan-From-Ryviu · ‎01-24-2024

Hi @marvic

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

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

marvic · ‎01-24-2024

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

Dan-From-Ryviu · ‎01-24-2024

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 <head> element

{%- if template.name == 'collection' -%}
<style>
.section-header { top: 0px !important; }
</style>
{%- endif -%}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

marvic · ‎01-24-2024

This adds CSS to the header section?

PageFly-Oliver · ‎01-24-2024

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' -%}
<style>
#MainContent .section-header { top:0; }
</style>
{%- endif -%}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

marvic · ‎01-24-2024

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

marvic · ‎01-24-2024

This is more complex than I though

peninah · ‎11-14-2024

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.

Reveal Section On Scroll - Only On Select Pages Dawn

Reveal Section On Scroll - Only On Select Pages Dawn

Community Blog Articles