When we launched our CMS feature, the whole team was really stoked because we knew it had all the power of a content management system like WordPress, and the added convenience of hosting a blog natively on a LemonStand store. But some of our customers were like “cool…what can I do with this?” A lot, it turns out.

Expert developer Leah Wagner from Vancouver’s eCommerce agency The Jibe was kind enough to walk us through the process of creating fashion company Three Stones’ gorgeous Look Book, using LemonStand’s CMS. Complete with code examples, photos, links to documentation and descriptions, you can use this as a technical jumping off point if you’re interested in creating your own Lookbook with LemonStand. Read on!


Three Stones’ Requirements

As this was Three Stones’ first venture into selling online, they wanted to take a phased approach. This meant getting a website up quickly and efficiently. This website would then be monitored and improved upon based on the data that could be gathered post launch.

  • With this approach in mind, Three Stones started with LemonStand’s Coastal theme and The Jibe came in to help apply design customizations that would better align the theme with the Three Stones brand.
  • As the Coastal theme did not have any pre-defined styles for a Lookbook layout, The Jibe implemented styles that fit with the existing theme.

During the development of the ThreeStones website, we knew LemonStand’s CMS feature was really close to being released. The team at LemonStand kept us in the loop and as soon as the feature was released, we got to work!

The Archive Page

What got us really excited about the CMS features was the ability to give our client the power to create and manage their Lookbook on their own. They would simply have to login to their LemonStand backend, add a post and, with what we had developed for them, the display would just take care of itself. The key to this functionality is the Archive pages that automatically populate a list of all posts that get added with the new CMS feature.

The Layout

threestones cms lookbook layout

The Template

/pages/blog/page-blog.htm


action: ‘cmscontent:archive’
template: inner
protocol: all
published: true
name: Look Book
url: /collections


{% if archives | length > 0 %}
   {% for post in archives %}
   {% if post.type == ‘blog’ %}
   <div class=”col-xs-12 col-sm-6 col-md-4 buffer-bottom”>
   <article class=”collection–teaser”>
       <header class=”collection–teaser__overlay”>
           <h2><a href=”{{ post.permalink }}”>{{ post.title }}</a></h2>
       </header>
       <div class=”collection–teaser__content”>{{ post.excerpt | unescape }}</div>
   </article>
   </div>
   {% endif %}
   {% endfor %}
{% else %}
   <article>
       <header>
           <h2>No posts found</h2>
       </header>
   </article>
{% endif %}


What makes this template different is the
action at the very top of the page. By using cmscontent:archive, we now had access to the archives variable which will gave us access to all existing posts. From there, we dynamically created a list of the latest posts.

Styles & Animation

For the ThreeStone’s Look Book, we wanted this page to be more visual than a typical blog. The content was styled so the post title could overlay an image that would zoom in as the visitor’s mouse hovered on the post.

/resources/sass/components/_collection.sass

.collection–teaser
 position: relative
 overflow: hidden
 padding-top: 100%

 h2
   width: 100%
   height: 100%
   margin: 0
   font-weight: bold
   text-align: center
   text-transform: uppercase
   text-shadow: 1px 1px 2px rgba(#000, 0.5)
   a
     display: block
     width: 100%
     height: 100%
     color: #FFF
     padding-top: 80%
     transition: padding-top 0.3s ease-in-out

 &:hover
   h2 a
     padding-top: 75%
   .collection–teaser__overlay
     background: rgba(#000, 0)
   .collection–teaser__content img
     transform: scale(1.1)

.collection–teaser__overlay
 position: absolute
 top: 0
 right: 0
 bottom: 0
 left: 0
 width: 100%
 background: rgba(#000, 0.2)
 z-index: 10
 transition: background 0.4s ease-in-out

.collection–teaser__content
 position: absolute
 top: 0
 right: 0
 bottom: 0
 left: 0
 width: 100%
 img
   object-fit: cover
   position: absolute
   width: 100%
   height: 100%
   transition: transform 0.4s ease-in-out

The Post Page

When it came to the page that would house all of the Look Book images, again, we wanted to provide an option for a more visually engaging layout.

The Layout

Here we added the ability to layout the Lookbook in a gallery format. Visitor’s could then click on image to initiate a slideshow of larger images.

cms lookbook post

The Templates

/pages/blog-post/page-blog-post.htm


action: ‘cmscontent:blog’
template: inner-slim
protocol: all
published: true
name: Look Book
url:  /collections/:slug

<article>
   <div>{{ post.body | unescape }}</div>
</article>
<div class=”text-center buffer-top”><a class=”btn btn-outline” href=”/collections”>back to look book</a></div>

Again, this template has a different action at the very top of the page. By using cmscontent:blog, we now have access to the post variable. We also have access to use :slug in the url configuration. This means this template will create a new post page for each post that gets added through the CMS.

/partials/modal-collection-gallery.htm

<div id=”modal-collection-gallery” class=”modal fade”>

<div class=”modal-dialog modal-lg”>

   <div class=”modal-content”>
       <button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button>
       <div class=”modal-body”>

           <a class=”left carousel-control” href=”#collection-gallery” role=”button” data-slide=”prev”>

               <span class=”fa fa-2x fa-angle-left” aria-hidden=”true”></span>

               <span class=”sr-only”>Previous</span>

           </a>

           <a class=”right carousel-control” href=”#collection-gallery” role=”button” data-slide=”next”>

               <span class=”fa fa-2x fa-angle-right” aria-hidden=”true”></span>

               <span class=”sr-only”>Next</span>

           </a>

           <div id=”collection-gallery” class=”carousel slide” data-ride=”carousel”>

           </div>

       </div>

   </div>

</div>

</div>

Next we created a partial containing the markup for the modal popup. Most of the functionality for this modal popup came from Bootstrap — which is the framework the Coastal theme is built on. Here we created the markup that housed the gallery. Note that there is no actually gallery content added to the #collection-gallery region. We will come back to this.

Adding this code to a partial, on it’s own, would not render the code. We determined where this modal would be required and added the following code to the appropriate template(s).

{{ partial(‘modal-collection-gallery’) }}


The Markup

The layout for this gallery did require some additional markup that would have to be used within the body of the post.

<ul class=”collection__gallery-thumbs js-collection-gallery-thumbs”>

 <li class=”item”><img src=”#”></li>

 <li class=”item”><img src=”#”></li>

 …

 <li class=”item”><img src=”#”></li>

 <li class=”item”><img src=”#”></li>

</ul>


Furthermore, we added some Javascript logic that would launch the modal when a visitor clicked on an image and also populate the modal with the applicable gallery images. Our script also applies an
.active class to the particular image that was clicked. With this in place, when the modal pops up, it shows the specific image the user clicked on.

/resources/scripts/main.js

$(document).ready(function() {

   $(document).on(“click”, “.js-collection-gallery-thumbs li”, function(e) {

       e.preventDefault();

       $(“.js-collection-gallery-thumbs li”).removeClass(“active”);

       $(this).addClass(“active”);

       var images = $(this).closest(“.js-collection-gallery-thumbs”).html();

       var gallery =

           ‘<ul class=”collection__gallery js-collection-gallery carousel-inner” role=”listbox”>’ +

               images +

           ‘</ul>’;

       $(“#modal-collection-gallery #collection-gallery”).html(gallery);

       $(“#modal-collection-gallery”).modal({

           show: true

       });

   });

});


Styles & Animation

Lastly, we use Flexbox to layout the gallery thumbnails. Here we sent the thumbnails to be 160px width and the flex:wrap setting, these thumbnails will wrap when the layout is viewed on mobile devices.

ul.collection__gallery-thumbs
 list-style: none
 margin: 0
 padding: 0
 display: flex
 flex-wrap: wrap
 justify-content: center

 li
   height: auto
   flex: 0 0 160px
   display: inline-block
   float: left
   margin: 0
   padding: 0

   &:hover
     transform: scale(1.1)
     transition: transform 0.5s ease-in-out

ul.collection__gallery
 list-style: none
 margin: 0
 padding: 0

 li
   height: auto
   margin-bottom: 0

The Result

The responsive styles were handled with a combination of CSS media queries and flexbox. The modal popup in particular came packages up  with Bootstrap — what the Coastal theme is built on. We just had to write some Javascript that initiated the popup when an image was clicked.

Check out this screen recording for a visual: https://www.dropbox.com/s/nytcr3791xpelt9/threestones.m4v?dl=0

Overall, we found LemonStand CMS pretty simple to use, and really easy to manage on the backend. As it was a new feature, we definitely had to consult the documentation to see how to create a template that managed the archive and post pages. But we found that even in the early stages of the CMS release, this documentation was clear and easy to work with.

Coming from the CMS space, The Jibe is used to lots to flexibility availability architecting content. Having said that, sometimes a client just needs a blog and over architecting content isn’t necessary. The LemonStand CMS is a great hybrid for eCommerce clients looking to support their store with great content that helps drive traffic and improve search engine rankings. 

What we liked most about this new feature is it moves content out of the theme and into a separate content structure. This will be invaluable for maintenance moving forward. If a client wants to change their theme in the future, that content is nicely separated.