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.
Read more about how to use metafields Metafield code on GitHub
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
Read more about the product filter Product filtering code on GitHub
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.
Read more about page specific images View page specific image code on GitHub
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)
Read more about managing customer addresses View customers templates on GitHub
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.
Read more about the smart 404 page View 404 template on GitHub
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
Read more about advanced search View search template on GitHub
