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
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:
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:
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.
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:
In order to see the Lookbook section settings, you need to be on a page in the Theme Editor that has page.lookbook assigned to it. The best way to ensure you find the page in the Theme Editor is to add a link in your navigation to the lookbook page so it's easy to find. The sections settings only appear when you're on that page.
This menu will not help you find the page:
You'll need to navigate from your main menu or link from another page.
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:
The background layers use your Secondary background colors setting in the Theme settings:
From your Theme settings, choose Colors:
You can choose a color to help brand your pages.