Story page templates: Timeline

In Story, there are additional page templates you can use for certain page styles. Here are some tips for creating a Timeline page. 

Example page:

How to use:

Begin by creating a page in the Shopify Admin page editor. Add the title of the page and a description in the editor. Next, choose the page.lookbook template in the Template section:

Choose a title for the page. The content section will be your introduction before the timeline.

Page navigation setup:

Before you can start configuring the timeline sections, you'll need to navigate to your page in the theme editor. In order to do that, we recommend you add your page to one of the menus in your navigation. That will allow you to land on the timeline page in the theme editor easily. 

Create a menu item to help navigate to your timeline page:

After you've created a new menu with menu items. Open the Theme Editor:

In the Theme Editor, navigate to your timeline page. You'll need to view the timeline page in the Theme Editor in order to see the section settings.

Once you have navigated to the timeline page, the page title will appear as a section setting in the left sidebar:

Click on that section to view the section settings:

(1) The secondary page navigation is an optional sidebar navigation you and use which is displayed below the title and left of the summary text.

(2) Show page title allows you to toggle the title.

(3) Enable image zoom allows the timeline image to be viewed larger in a modal pop-up window. 

Content:

Use Add timeline to add each timeline entry:

Content settings include Heading, Image, Date and Text:

You can sort the order each timeline entry by using the six-dot handle icon on the right. Drag and drop into the new position: