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
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.
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”> <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.
The post LemonStand CMS: Creating a High Fashion Lookbook appeared first on LemonStand eCommerce Blog.