Chapters name the parts of a long page. With the chapter indicator on, the number and title of the part a customer is reading, such as "02 Our story", shows in the bottom left corner of the screen. A thin line in your accent gradient runs along the top edge of the screen and fills as the customer scrolls. A dark moment turns the whole page dark while one section is in the middle of the screen, to mark a key part.
On the Checkmate style's home page, the indicator reads "06 Brew Club" while the Brew Club part of the page is on screen. When the pointer is over the indicator, it opens a list of every chapter on the page.
All three styles in Theme styles come with the chapter indicator on and chapter titles on the home page.
How chapters work
A section with a Chapter title starts a chapter. The sections after it belong to that chapter until the next section with a title.
The indicator numbers the chapters 01, 02, 03 in page order.
It needs at least two chapters on the page. With one, it does not show.
When the pointer is over the indicator, it lists every chapter on the page. Clicking a chapter scrolls the page to it.
It hides while the first section still reaches the bottom half of the screen, and again as the footer comes into view.
It shows only on screens 1000 px wide or wider.
It works on any page built from sections, such as the home page, a product page or an About page. These sections have Chapter title: Blog posts, Card rail, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hero, Highlights, Hotspots, Marquee, Orbit, Photo wall, Promo list, Section, Specifications, Stacking cards, Steps, Subscription, Testimonials, Timeline and Video.
In the editor sidebar, select the section that starts a chapter.
Under Motion, enter a short name in Chapter title, such as Our story.
Repeat steps 3 and 4 for the first section of every chapter.
Click Save.
Leave Chapter title empty in the sections that continue the chapter above them. Keep titles to one or two words, because the indicator shows the title on one line.
Darken the page at one section
Dark moment turns the page and the header to your dark mode colors while its section is in the middle of the screen, and back to light as the customer scrolls past. Visitors who already see your store in dark mode see no change. The dark colors come from Dark mode colors in Change your theme colors.
Dark moment works with the chapter indicator off. A section can have both a chapter title and a dark moment. Section motion settings describes Dark moment, Rise on scroll and Chapter title in detail.
Chapters name the parts of a long page. With the chapter indicator on, the number and title of the part a customer is reading, such as "02 Our story", shows in the bottom left corner of the screen. A thin line in your accent gradient runs along the top edge of the screen and fills as the customer scrolls. A dark moment turns the whole page dark while one section is in the middle of the screen, to mark a key part.
On the Checkmate style's home page, the indicator reads "06 Brew Club" while the Brew Club part of the page is on screen. When the pointer is over the indicator, it opens a list of every chapter on the page.
All three styles in Theme styles come with the chapter indicator on and chapter titles on the home page.
How chapters work
A section with a Chapter title starts a chapter. The sections after it belong to that chapter until the next section with a title.
The indicator numbers the chapters 01, 02, 03 in page order.
It needs at least two chapters on the page. With one, it does not show.
When the pointer is over the indicator, it lists every chapter on the page. Clicking a chapter scrolls the page to it.
It hides while the first section still reaches the bottom half of the screen, and again as the footer comes into view.
It shows only on screens 1000 px wide or wider.
It works on any page built from sections, such as the home page, a product page or an About page. These sections have Chapter title: Blog posts, Card rail, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hero, Highlights, Hotspots, Marquee, Orbit, Photo wall, Promo list, Section, Specifications, Stacking cards, Steps, Subscription, Testimonials, Timeline and Video.
Turn on the chapter indicator
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, click Theme settings.
Select Animations.
Turn on Chapter indicator.
Click Save.
Name the chapters
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, select the section that starts a chapter.
Under Motion, enter a short name in Chapter title, such as
Our story.Repeat steps 3 and 4 for the first section of every chapter.
Click Save.
Leave Chapter title empty in the sections that continue the chapter above them. Keep titles to one or two words, because the indicator shows the title on one line.
Darken the page at one section
Dark moment turns the page and the header to your dark mode colors while its section is in the middle of the screen, and back to light as the customer scrolls past. Visitors who already see your store in dark mode see no change. The dark colors come from Dark mode colors in Change your theme colors.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, select the section.
Under Motion, turn on Dark moment.
Click Save.
Dark moment works with the chapter indicator off. A section can have both a chapter title and a dark moment. Section motion settings describes Dark moment, Rise on scroll and Chapter title in detail.