Story page templates: Lookbook

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

The Lookbook page template has three main content types to use:

• Overlapping image
• Image row
• Text

In addition to these content types, the regular page elements are included and a sidebar menu.

Breakdown of content types available in the page.lookbook template:

Overlapping images

In the content section, choose Add content. From the drop-down select Overlapping images:

You can add one or two images in the settings:

When two images are used, the first image overlaps the the second. 

Add this content block type multiple times to create a long page of products is desired:

Image row

The Image row content block type allows you to add up to four images on a horizontal row. The image will be sized to fit the entire main column of the page. When there is only one image, the image will take the entire size of the main page body. Here's a breakdown of sizing when two, three and four images are used:

The mobile version won't stack the images, they'll be sized to fit the width of the device:

This content style does not have a call to action option or heading and text. This is simply a strip of images. Use the text content type or overlapping images if you need a heading or call to action button.

Text

This content type allows you to add a heading, text and call to action button. When combined with Image row, you can connect your content together:

The text content type can also be used to break-up the Overlapping images section to provide additional information. 

How to use the lookbook template

You begin by creating a standard page in your Shopify admin. Provide a title and introductory text for the page. Then choose the page.lookbook template in the Template drop-down:

After you've saved the page. View the page in the Theme Editor (Customize theme):

Or if you're working with a draft theme, use the Customize link for that theme:

Browse in the Theme Editor to your page. The best way to find the page is include it in your navigation or have a link from another page. Example using your main navigation:

Once you've landed on the page, the section options on the left will display the lookbook template settings:

Once you've found the Lookbook section settings, you can begin to add the content blocks. Click on the main Lookbook section to see the settings:

Additional notes

The background layers use your Secondary background colors setting in the Theme settings:

From your Theme settings, choose Colors:

Secondary background:

You can choose a color to help brand your pages.