We are Underground support

How to add a Look book to your store

Last Updated: Aug 24, 2016 01:19AM EDT
If you would like to have another slideshow on a page within your site similar to your homepage it is possible and quite simple. Below is our copy and past guide to setting one up. 

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 minumum of 1200px wide!

Adding the Code
  1. In your Shopify admin click on Themes > Customise 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="{{ 'slide1.jpg' | asset_url }}" /></li>     
      </ul>
    </div>
</div>
<script type="text/javascript">
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: true
  });
});
</script>

Take a look at the above - the parts that begin with <li> and end with </li> represent each individual slide.
Broken 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 /

Adding your own images
  1. Open your admin in a new window or new tab
  2. Click on Account followed by 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() {
  $('.flexslider').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.

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.

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

Enjoy.

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
retail@undergroundmedia.co.uk
http://assets3.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete