Every couple weeks, we at ModernTribe spend some time to evaluate and prioritize our improvement projects. Whether that’s speeding up the site, creating an April Fool’s joke product, adding a new blog post, or working on a paid advertising campaign, we’re always looking for how to grow our business and fulfill our mission-- providing contemporary and stylish Judaica, with curated set of artists & brands and exceptional customer service.

THE PROBLEM

We all know how important it is bring organic traffic from search engines using great content. Using Shopify’s analytics, we noticed that our blog posts were getting a lot of traffic, but they weren’t converting into sales. Conversion rate from our homepage is nearly 11x higher! Oy vey!

THE SOLUTION

We came up with a few ideas to improve this, including one idea to streamline access to featured products in a collection right within a blog post. If someone lands on a blog post about Bat Mitzvah Gifts, we want to have featured gifts right on the page that is in-sync with our current inventory. We added this tactic to our list of projects, and it was assigned to me to figure out:

Add a featured collection to the bottom of a blog post

I explored a couple options: 

Here's the good news. I was able to figure it and the code is fairly elegant! The result looks like this when it’s done:

The "View More" CTA at the bottom brings the reader to the entire collection.

So how can you do it? Here are the 5 steps to take to add this to your template.

Step 1: Find the code for a homepage content section to reuse

We’re using the District Shopify theme which has a section called “Featured Collection” that is used on our home page. I was able to find this code in the theme editor, but you could use another section, for example Feature Products.

The solution below uses “featured-collection.liquid” as the starting point.

Copy this code to a text editor and remove anything at or below the line “{% schema %}”. 

Step 2: Pass through the the collection name

The original code was grabbing the collection name from a user inputted setting when customizing the home page:

{%- assign collection = collections[section.settings.collection] -%}

I found a solution to use the alt-text on the featured article image, using these two lines of code:

{%- assign tag = article.image.alt -%}
{%- assign collection = collections[tag] -%}

Step 3: Replace settings variables with hardcoded or  collection values

The featured-collection.liquid code is used on the homepage and has variables from GUI theme customizer. I added variables like product count (8) and the featured collection title (collection.title) instead of a user inputted title. These changes make sure it works for any collection.

Step 4: Handle the case when no collection exists

This is critical. Not every blog post will have a collection. If the alt-text isn’t populated or doesn’t have a collection associated with it, I don't want to see an error.  So, I added the following to check that the collection exists and has products:

{% if collection.products.size > 0 %}

[CODE TO PUT THE FEATURED COLLECTION ON THE BLOG POST]

{% endif %}

Step 5: Test it out!

1. Save your code to “article-template.liquid” below the div for {{ article.content }}.
   
2. Grab the handle from a collection from the URL:
   
   In this case, the handle is best-selling-under-100.
   
3. Create a blog and update the alt-text to this:
   
   

Want to use our code?

If you have the District theme and want to use the same code as ModernTribe, paste this below this section in article-template.liquid below the following 2 lines:

               {{ article.content }}
              </div>

{%- assign tag = article.image.alt -%}
{%- assign collection = collections[tag] -%}
{%- assign product_limit = 8 -%}

{% if collection.products.size > 0 %}
<div class="featured-collection layout-8 lazyload" data-section-id="{{ section.id }}" data-section-type="featured-collection-section">
<div class="wrapper">
    <div class="grid">
      <div class="box header">
        <div class="image-table">
          <div class="details">
              <h4>Shop {{ collection.title | escape }}</h4>
          </div>
        </div>
      </div>
      {% for product in collection.products limit: product_limit  %}
       {% include 'product-grid-item' %}
      {% else %}
        {% for i in (1..product_limit) %}
          {% include 'placeholder-product-grid-item' %}
        {% endfor %}
      {% endfor %}
    </div>
       <div class="box header">
        <div class="image-table">
          <div class="details">
              <a href="{{ collection.url }}" class="button large outline">View more</a>             </div>
        </div>
      </div>
  </div>
</div>
{%endif%}

If you'd like to see this code in action, check out new products below on this blog post! Thanks for reading and please leave any questions in the comments on this post.