HGDE MatchGrid guides shoppers to the right product in a few clicks: they pick image by image and end up with what belongs together. Here’s how to set up your first finder.
Set up a finder
1. Create a finder
Click “New MatchGrid” and choose a template – Personalised, Gifts, Beauty, Fashion set, Accessories, Taste or Pet supplies – or start blank. Every template comes with four steps of six illustrated cards each, so you can demo the finder straight away.
2. Design the cards
Each step is a row of image cards. Give every card a short text and pick an image from your Shopify files or upload one. Use the arrows to change the order.
3. Connect combinations
Under “Targets” you decide where a combination leads: a product, a collection or a link. “Any” covers whole groups – but it also makes every card in that step selectable. If several rows match, the most specific one wins. The app flags targets that are deleted, sold out or not published.
4. Check the matrix
The connection matrix shows everything at a glance: ✓ own target, ≈ via “Any”, + still open. Click + to add the missing row. Cards without a target are greyed out in the store, so shoppers never hit a dead end.
5. Add it to your store
Open the theme editor, add the “MatchGrid Finder” block and pick your finder under “Finder”. Set columns, colors, corners and slider or grid there. Save – done.
Set up a bundle
1. Create a bundle
Under “Bundles”, pick a template – fashion set, beauty routine, gift set, taste set, accessories set, pet set or personalised – or start blank. A template brings the rows and the discount tiers.
2. Choose products per row
Every row is one choice. Click “Choose products” and add up to 12 real products from your store. Image, title, price and variants come from Shopify automatically.
3. Set the tiers
Decide how much discount applies from how many items, for example 5% from 2, 7% from 3, 10% from 4. “Minimum required” sets when the cart button starts working.
4. Switch the discount on
The switch creates an automatic Shopify discount. In the cart it only applies to the products the shopper added as a set. You decide whether it combines with other discounts.
5. Add it to your store
In the theme editor add the “MatchGrid Bundle” block and pick your bundle there. Shoppers see prices and savings right away and add the set with one click.
The three kinds of bundle
The kind you choose decides how shoppers pick and how the discount is calculated. You can switch at any time.
Rows
Shoppers pick one product per row, for example a top, trousers and socks. You choose the products for each row yourself – up to 24, or up to 12 on Light.
Collection rows
The same idea, but the row pulls its products from a Shopify collection. You only maintain the collection, and whatever you add there shows up in the slider automatically.
One category
A single slider, filled from one or more collections. Shoppers pick as many products as they like and the discount follows the number of items instead of the rows – for example 12% from 3 items and 20% from 4. Anything above that keeps the highest tier. Light merges one collection, Basic two and Pro four; on Pro the slider keeps loading more products as the shopper swipes, so it reaches the whole collection.
Working on a live store
You do not have to wait until everything is finished. Individual cards, whole rows and entire steps can be hidden: they disappear from your store and stay in the app. The numbers of the remaining cards do not shift, so the targets you connected stay valid. That way you can show one part live and keep building the rest.
What you set in the theme editor
Columns for desktop and mobile, spacing, colors, corners, nine card styles and the largest card width are set per block. The same finder can therefore look completely different on two pages. Switch on the info button and shoppers open the description and price in a window above the page, without interrupting their journey.
You can see it all working together on our demo page.