How to add a lookbook to your store

In this article, we will go over how to create a lookbook for your store using the same slideshow as used on your homepage. 

You are going to be working with HTML here so if you are not 100% confident consider your options before going ahead although we have tried to simplify the process as much as possible.

To get the best look here your images will need to be identically sized and a minimum of 1200px wide! Refer to our article on slideshow image sizes here.

Step 1: Adding the Code

  1. In your Shopify admin click on Themes > Customize theme > Theme options > Edit HTML / CSS
  2. On the left under Templates click add a new template choose page and call it lookbook - this creates a new template which will be given the name page.lookbook.liquid
  3. The new template will be pre-filled with some content delete all of it.
  4. Copy and paste the following into your template
<div class="row">
    <div class="flexslider desktop-12 tablet-6 mobile-3">
      <ul class="slides">
        <li><img src="{{ &#39;slide1.jpg&#39; | asset_url }}" /></li>
      </ul>
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
  $(&#39;.flexslider&#39;).flexslider({
    animation: "slide",
    directionNav: true
  });
});
</script>

Take a look at the above code, the parts that begin with <li> and end with </li> represent each individual slide in the slideshow.

If we break the above code for a slide down this is what it means.

<li>

This is the start of the slide.

<img src=" ...... ">

This is the image source.

{{ 'slide1.jpg' | asset_url }}

This is the image that we are using for now (it will show the first image from your homepage slideshow).

</li>

This is the end of the slide, note the forward slash /.

Step 2: Adding your own images

  1. Open your admin in a new window or new tab
  2. Click on Account > Show uploaded files, here you can upload images...
  3. Once uploaded click on the image and the URL will appear on the side... copy that URL
  4. Paste this into this section of your code as marked in green below make sure that you have " and " before and after the URL:

<li><img src="YOUR-IMAGE-URL" /></li>
To add another slide add another line beneath this one so that you have something similar to this:
<div class="row">
    <div class="flexslider">
      <ul class="slides">
         <li><img src="http://cdn.shopify.com/s/files/1/0200/0908/files/reponsive-shopify-theme.png?127" /></li>
         <li><img src="http://cdn.shopify.com/s/files/1/0200/0908/files/settings.png?127" /></li>
      </ul>
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
  $(&#39;.flexslider&#39;).flexslider({
    animation: "slide",
    directionNav: true
  });
});
</script>

Each time you want to add a new image repeat the above... Save this when you have added all of your slides and images.

Step 3: Setting up the page

  1. Go to Online store > Pages in your main admin and create a new page called Lookbook or similar.
  2. Leave the content blank and save it.
  3. At the bottom under Template choose page.lookbook
  4. This creates a blank page in the admin but fills it with the slideshow that you just created.

Step 4: Displaying the page on your site

Create a link to your new page whether in the navigation or within your site's content and give it a try.

Enjoy.