Wednesday, August 17th

The customer wanted "landing pages" for each of their products. In Shopify, what you would usually do is simply link to the Collection and all the products in that collection would show up. Or you could show all products in a collection filtered by a certain tag. But, what I couldn't do is add a "Collection of Collections" In other words, the client did not want to display all of their items... instead they wanted to display the "categories" of their items, and once clicked on shows the desired products.

For example, when you click on "Macone Clay" The client wants there to be categories listed for Lamps, Tiles, Coasters, etc. Now, the first thought is "Why don't you just create a custom template and hard link to the collections?" ... Well, YEAH. Sure. That would work... but any time this artist comes up with a new line of products, do I really want to be hard coding again? 

LONG STORY SHORT... here is how I figured out how to do it. The trick is to name your "Master Collection" something like Macone Clay and your categories (sub collections?) Macone Clay Lamps. By using Ruby/Liquid's slice function, we are able to do some basic logic to only bring in matching categories.

  1. Get the length of the current URL slug.
  2. For each collection, slice the URL slug from 0 to the current URL slug.
  3. If they match, then they are meant to be shown on this page.
  4. Also, if the slug isn't the exact length (because otherwise the current page would show up as a collection/category), perform the logic. 

{% assign landingPageHandle = collection.handle %}
{% assign landingPageHandleLength = collection.handle | size %}
<strong>Categories to be listed:</strong><br><br><ul>
  {% for category in collections %}
    {% assign catHandleLength = category.handle | size %}
    {% assign slicedCatHandle = category.handle | slice: 0, landingPageHandleLength %}

    {% if slicedCatHandle == landingPageHandle %}
      {% if catHandleLength != landingPageHandleLength %}
        <li>{{category.title}}</li>
      {% endif %}
    {% endif %}
  {% endfor %}
</ul>
Subscribe

Subscribe