Lookbook is more famous in the fashion world, as a page where people can get ideas on how to style outfits or to see what the latest fashions are.
As Foodly Theme "likes" foods, its lookbook represents latest "hot" recipe and helps customers buy products to cook this dish. Have a look at a lookbook livedemo.
To have such lookbook in the store, follow the steps below (all steps are support with visual enforcement within screenshots, see them in the end of the list):
- Navigate to Online Store > Pages
- Create a new page clicking on 'Add page'
- Type in a name for a newly created page. Name it whatever you like
- 'Content' area below the title is not displayed for customers of the store, so leave it as it is
- In 'Template' panel, choose page.lookbook among template suffixes
- Save this page
- Now, let's add newly created lookbook page to the main navigation. To achieve that, go to Online Store > Navigation
- Click on 'Main menu'
- Click on 'Add menu item' and a bunch of input and dropdowns appears on the right
- Type in the name of the page the way you'd like it to be presented in the main header navigation
- In the 'Link' dropdown, choose Page
- In the second dropdown, choose Lookbook
- Save changes clicking on 'Save menu'
- Next, let's finally add some products and other features to the lookbook. Navigate to Online Store > Themes > Customize theme. Within Theme Editor open lookbook page in the preview of your store on the right
- In the left pane, inside 'Sections' click on Lookbook
- In the 'Recipe blog post' dropdown, choose a specific recipe blog post that is related to this lookbook. If you don't have such blog post created yet, check our article 'How to create recipe blog post'. It is important to have recipe blog post created since it's mentioned in the bottom of the lookbook. Also, an image for lookbook is pulled out from the post unless a specific featured image is uploaded.
- There is an option to upload a specific image for the lookbook and skip the image from the recipe blog post. Upload at least 600x600 px size image with square proportions
- Add recipe description in the next field. It's a small review of the recipe up to 25 words. It's displayed in the bottom section of lookbook page accompanied by a link to further reading
- There are three heading options for lookbook page: heading, subheading and overlapping heading
- To add points onto the featured image, in 'Content' block, click on 'Add product' in the bottom of the left pane
- Choose a product for the point in the Product dropdown. Product name specified in Shopify admin for this one is displayed in the overlay module when point is hovered over
- In Description text area, type in a short overview of the product chosen in the previous step. This description text is displayed right under the product title in the overlay module when point is hovered over
- Next, define a position of the point within two input fields for vertical (Y) and horizontal (X) coordinates, typing values in Top coordinate (Y) and Left coordinate (X). The start of the coordinates is a top left corner. Consider that when deciding the value for each axis. Both pixels and percents are allowed to set position of the point onto the featured image canvas
- Save everything you've done so far clicking on 'Save' button in the bottom of the left sidebar
Creating lookbook page
Adding lookbook page to main navigation
Setting up lookbook page in Theme Editor
If you have any suggestions on this matter don't hesitate and leave your thoughts in the comments bellow 📬. If there are any questions regarding your own store please submit a support request 🚑