Case Study: Working on our own garden. Old school trick to leverage Shopify pages and link lists.

Background & Challenge

Sunbowl, an e-commerce agency* faced a challenge with their website's case study section. They consistently posted new case studies to showcase their work to potential clients; However, these case studies were presented as a simple, unorganized list on a Shopify page. This static display made it difficult for visitors to find relevant examples based on their specific needs. Because Sunbowl serves a diversity of e-commerce clients, they needed to find a way to help potential clients find the best case study for their business.

*Note: We realize this is written in the 3rd person while being listed on our website, but what can we say? SEO isn't without its quirks.

What They Wanted — and How We Got Them There

  • Their Goal

    The primary goal was to implement a sorting and filtering system for the case studies displayed on their Shopify site. This system needed to allow clients to easily navigate and find case studies relevant to their particular e-commerce challenges. Crucially, the solution had to avoid negative impacts on SEO and be easy for the Sunbowl team to update.

  • Our Solution

    We devised a clever solution leveraging Shopify's existing features in non-conventional ways:

    Metafields for Categorization:

    We created a metafield on Shopify "pages" (not products or blog posts) called "target markets."

    This metafield was configured as a single-line text field with a preset list of choices (e.g., "Lead Generation," "Retail"). This provided a controlled vocabulary, ensuring consistent categorization and a better user experience for staff adding new case studies via a dropdown list. This was preferred over Shopify tags, which lack preset lists and rely on existing tags for visibility.

    Link Lists for Ordering and Display:

    To list and order the case studies, we utilized Shopify menus (link lists). A private menu named "case studies" was created.

    Each case study page was added as a menu item within this link list. This allowed Sunbowl to manually control the display order of case studies on the main listing page simply by dragging and dropping items within the menu.

    JavaScript for Filtering:

    For the filtering functionality, a set of filter tabs (e.g., "Lead Generation," "Retail") were created, also using a Shopify menu ("case study filters").

    Each filter tab's link was set to the case study page's URL with an appended query parameter (e.g., ?tag=retail).

    A small JavaScript snippet on the case study listing page was written to:

    • Read the tag parameter from the URL.
    • Iterate through all case study elements (which had a class market and additional classes derived from their metafields, e.g., retail, lead-generation).

    Show only the case studies whose associated metafield class matched the tag in the URL, effectively hiding the others. If no tag was present, all case studies were shown.

    "Handleization" of metafield values (converting "Lead Generation" to "lead-generation") was crucial for matching URL tags with CSS classes, and this was managed within the Liquid code.

    Content Presentation:

    Each case study card displayed on the listing page pulled its hero image from a metafield on the individual case study page.

    "Pills" or labels showing the target markets (e.g., "Retail," "Lead Generation") were dynamically pulled from the metafields and displayed on each case study card, providing quick visual cues for users browsing.

Results That Moved the Needle

200% Faster
We improved the speed of posting new case studies by 200%.
Consistency
Removing friction from the posting process allow us to post more consistently.
Creative
Deep knowledge of the platform allowed for unconventional solution while leveraging existing Shopify features.

The implemented solution proved to be extremely effective and user-friendly. It successfully achieved the goal of providing a sortable and filterable case study section on their Shopify site without resorting to product pages (preserving SEO) or the limitations of blog posts. The process of adding a new case study became streamlined: write the case study, add it to the designated link list, tag it with the relevant metafield, and it automatically appeared with proper sorting and filtering. This approach effectively leveraged Shopify's existing functionalities in an innovative way to address a core content presentation challenge, demonstrating a robust technique for managing content-rich pages on the platform.

Reach Your Goals & Reclaim Your Time

Let us help you scale while freeing up your time.

Book a Discovery Call