Introducing Mannequin, Finetune Partner's Shopify library

Cover image by eluoec

Shopify's great, but at first glance, many of its advanced features seem to require bespoke or third party apps. We've been challenging that assumption here at Finetune Partners and have put together a toolkit on GitHub which should help developers access these features without paying a penny.

We've called this library Mannequin because it's up to you how you want to dress it. It's even got a logo, so you know it's legit:

Elsewhere in Insights we go into much greater detail on how you can use Mannequin, but this article is just about the features.

Using metafields

Shopify allows you to attach additional data to elements such as article, pages, products collection and product variants.

There's no end to the ways this could be used to enhance your site. For example, you could add a list of frequently asked question to your product pages, and have each one tailored to that specific product.

Mannequin lets you create sets of metafields, attach them to elements, then gives you easy ways to allow your content authors to change that information.

Product filtering

When you're using the back end of Shopify, there's various options to filter your list of product. But for your customers, there's not an out-of-the-box solution to this problem.

Mannequin allows your customers to filter by:

Minimum price
Maximum price
Product type
Manufacturer
Product tag
Product in stock or not

That's how it comes pre-configured, but in addition, you can expand its functionality to add your own custom filters. For example, if you sold shoes, you could add custom metafields for features such as arch support and wide fitting.

Now let's say you also sold hats and your products were sorted into two collections, shoes and hats. As long as none of the hats had any arch support or wide fitting data against them, when your customers landed on the "Hats" collection, they would only see filters which applied to just those products.

It also has some other features:

It can switch to legacy paginated mode, if there are too many products to filter
Hides filters if there are one or fewer choices for the customer to make
Automatically adjusts the maximum and minimum price, to fit the selection of products displayed
Near instant results

Page specific images

By default, your content authors can only edit a heading and a single WYSIWYG panel on each page of your site. You could add a hero panel to your page template, but this would share the same image across every page.

Mannequin lets you define custom images for each page of your site, which can be reused in your social sharing snippet, to help your site stand out from the competition.

Managing customer addresses

If your customers create an account in your shop, they need a means to view and manage their addresses. The templates required to manage this in Shopify Theme Kit are blank. Mannequin's customer templates allows your customers to:

Register a new account
Activate their account
Login
Log out
Reset their password
List their addresses
Edit an existing address
Delete an address
Switch one address, so that it is the default
View past orders (including a detailed view)

Smart 404 page

Customers who end up on your 404 page deserve more than to be told they've taken a wrong turn. The Mannequin 404 page pre-populates a search box with the URL they attempted to reach, plus pulls in the latest three blog posts.

Advanced search options

There's a number of advanced site search features which are hidden in the Shopify documentation. Mannequin allows your advanced users to filter their searches by:

Whether the product is in stock or not
Restricting the search to three types of content (products, articles or pages)
Treat the search terms as a prefix, so that micro will match microwave and microcomputer, or to search only for exact matches