Scroll from section to section on homepage like tiktok feed

Store Design
, , , ,

Topic summary

A user wants to implement TikTok-style snap scrolling on their Shopify homepage using the Prestige theme, where the page scrolls from one full-screen section to another.

Proposed Solution:

  • Wrap homepage content in a scroll-container div within theme.liquid or index.liquid
  • Wrap individual section content in fullscreen-section divs
  • Add CSS properties:
    • scroll-snap-type: y mandatory on the container
    • height: 100vh for both container and sections
    • scroll-snap-align: start and scroll-snap-stop: always on sections

This creates vertical full-screen snap scrolling between the three “Image with text overlay” sections. The solution remains untested by the original poster.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Is it possible to add a property to my homepage, and my sections so it scrolls from section to section like a TikTok feed?

I am using the Prestige theme and i got 3 image with text overlay sections on my homepage.

Screenshot 2025-06-03 at 6.14.42 PM.png
Screenshot 2025-06-03 at 6.14.42 PM.png297×151 5.73 KB

2

Hi @Issyeissue1 ,

Below is the brief solution to make your Shopify homepage scroll like a TikTok feed.

In theme.liquid or index.liquid, wrap your homepage content:

{{ content_for_index }}

In sections/image-with-text-overlay.liquid, wrap the content like this:

Add this CSS to your theme in base.css

.scroll-container

{
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}

.fullscreen-section

{
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
}

This creates vertical full-screen snap scrolling between your “Image with text overlay” sections just like TikTok.

please use these steps and do let me know if it works for your theme.

Thanks !