Author: HGDE Studio

HGDE Studio isn’t a classic app studio. Behind it is HalloGeschenk.de, our own German Shopify store for personalised gifts and fun little presents. Our first app, HGDE MatchGrid, came out of running it every day.

A large range, one simple question

HalloGeschenk.de has more than 1,000 published products: photo gifts, including AI effects such as cartoon or pop art, engravings on jewellery and glasses, gift ideas ready to ship. Our menu is sorted by occasions and who it’s for – because that’s exactly how people looking for a gift think: what’s it for, and who is it for?

The idea behind the finder

A menu shows these questions side by side. A finder asks them one after another – with images instead of words. Shoppers pick the occasion first, then the person, and land on a matching collection or product. Cards that would lead nowhere are greyed out.

That’s why HGDE MatchGrid comes with templates like Personalised and Gifts: they follow exactly this pattern.

And the bundles?

Gifts are often combined – something personal plus a little extra. That became the second part of the app: sets of real products that shoppers put together themselves and add to the cart in one click, with a tiered discount at checkout.

What we take from it

• We only build what we’d need in our own store.
• Staying lightweight is a must – a store with many products and images has no load time to spare.
• No data about visitors where it isn’t needed.

More about the app: HGDE MatchGrid.

If you sell beyond one country, sooner or later you need a store in more than one language. Shopify offers the Translate & Adapt app for this.

What can be translated

According to the Shopify Help Center: products, collections, blog posts, policies, pages, theme settings and metafields, among others. For products that includes titles, descriptions and URLs.

What can’t

• Collection filters, Shopify Forms content, product tags and certain third-party app content can’t be translated, according to Shopify.
• Policies aren’t translated automatically – Shopify recommends professional translation for them.

Automatic or manual

• You can auto-translate into at most 2 languages. Once chosen, a language can’t be swapped – removing it doesn’t reset the limit either.
• Manual translations are added in the app or right on a content page via Localize.

So pick your auto-translation languages carefully.

Adapting content per market

Besides translations you can adapt content per market – different promotional texts or regional wording, for example.

What about app texts?

Apps bring their own texts. In HGDE MatchGrid the fixed storefront texts follow your shop language; English and German are included. You write headings and card texts yourself.

Plenty of content has more than one field: an FAQ has a question and an answer, a product highlight has an icon, a title and a text. For data like this Shopify has metaobjects.

What metaobjects are

According to the Shopify Help Center, a metaobject lets you create an object with multiple fields. Metaobjects can be used on their own or referenced by metafields – from a product, for example.

Examples from the Shopify Help Center

• product highlights with an icon, title and description
• profiles, for example of influencers, with a headline, image and links
• FAQ sections with questions and answers
• event appearances with dates and locations

Where to find them

• The definition – which fields exist – is created under Settings → Custom data.
• The entries are managed under Content → Metaobjects.

According to Shopify, themes can access metaobjects through Liquid and the Storefront API.

Why this matters for apps

Apps can store their data as metaobjects in the merchant’s store too, instead of keeping it on their own servers. That’s how HGDE MatchGrid works: your finders and bundles live as metaobjects in your own Shopify account. The app server keeps no copy.

Images sell – and they’re the part of a store you tweak most often. Here are the specs from the Shopify Help Center, plus what we pay attention to in our own store.

Formats

Shopify accepts PNG, JPEG, WebP, GIF, SVG, HEIC, TIFF, BMP and PSD, among others.

Size

• Product and collection images can be up to 5000 × 5000 px or 25 megapixels.
• Files must be smaller than 20 MB.
• For square images, Shopify says 2048 × 2048 px usually displays best.

Consistent aspect ratios

Shopify recommends a consistent aspect ratio for featured images. Otherwise tiles on collection pages end up with different heights. In our experience the same goes for image cards in a product finder – images of the same size look calmer.

Alt text

Alt text describes an image. According to Shopify, assistive technology uses it for visually impaired shoppers, it’s shown when an image can’t load, and it can help your SEO.

• keep it brief and descriptive
• 512 characters at most, 125 or fewer recommended
• add it in the admin under Products → open a product → click the image → Add alt text

Videos

According to Shopify, product videos can be up to 10 minutes long and up to 1 GB, with up to 4K resolution, as .mp4, .mov or .webm.

In HGDE MatchGrid you pick finder card images straight from your Shopify files. They’re served through Shopify’s CDN.

A shopper has a discount code, a promotion is running, and shipping is free above a certain amount. Does it all apply together? In Shopify that depends on the discount class and on what you configured for each discount.

The three discount classes

• Product discounts apply to specific items.
• Order discounts apply to the cart subtotal.
• Shipping discounts change the shipping cost.

What can be combined

According to the Shopify Help Center, these combinations are possible, among others:

• product and shipping discounts
• order and shipping discounts
• multiple product discounts on different items
• multiple order discounts
• product and order discounts (eligibility requirements apply, see below)
• multiple product discounts on the same item – Shopify Plus only

Not possible: multiple shipping discounts on the same order.

Nothing happens automatically

Combinations aren’t active by default. On every discount you choose in the Combinations section which classes it may combine with. Forget it on a new promotion and you’ll wonder why a code suddenly stops working.

Limits worth knowing

• An order can use at most 5 product or order discount codes and 1 shipping discount code.
• A store can have at most 25 active automatic discounts.
• According to Shopify, combinations work in the online store, through the Storefront API and in Shopify POS.
• To combine product with order discounts (or order with order), the store must, among other things, have no checkout.liquid customizations.

Practical tip

Before a promotion, note which discounts run at the same time – your own codes, automatic discounts, app discounts – and set the combinations on purpose. In HGDE MatchGrid you also decide whether the bundle discount combines with other discounts when you switch it on.

Bundles sell several products together. In Shopify there are basically two ways to do it – and they suit different product ranges.

Option 1: Shopify Bundles

Shopify offers Shopify Bundles, a free first-party app available on all Shopify plans. It lets you create fixed bundles and multipacks, i.e. sets whose contents you define. According to the Shopify Help Center, limits include:

• up to 30 components per fixed bundle
• a maximum of 3 options and 100 variants per bundle
• the bundle price doesn’t update automatically when the prices of its products change

That works well for sets that are always put together the same way – a starter kit or a value pack.

Option 2: build-your-own sets

It’s different when shoppers should choose: a top, trousers and an accessory to taste, or three skincare products for their skin type. Here the set isn’t a product of its own but a selection of existing products that goes into the cart together.

There are apps in the Shopify App Store for this. Whether one fits mostly comes down to three questions:

• Do they stay real products with variants, stock and prices from Shopify?
• How is the discount calculated – by Shopify at checkout, or through workarounds?
• How much code does it add to your theme?

Our approach

In HGDE MatchGrid we built the second option: shoppers pick one real product per row, add the set to the cart in one click, and Shopify calculates a tiered discount at checkout. If you need fixed sets, Shopify Bundles does the job well – the two don’t exclude each other.

Automatic discounts are convenient: shoppers don’t need to enter a code, the discount applies in the cart on its own. Shopify offers them as amount off, free shipping, buy X get Y, or as app-based discounts.

The limit

The Shopify Help Center says a store can have at most 25 active automatic discounts – and that total includes discounts created by apps. If you use several discount apps and run your own promotions, you can reach the limit sooner than you’d think.

Two things that are easy to miss

• Shoppers need to add all eligible items to the cart themselves – including the ones they get as a promotional item.
• According to Shopify, automatic discounts created in the admin don’t apply on the post-purchase page at checkout.

How to keep track

• Don’t just let expired promotions sit there – deactivate or delete them.
• Name discounts clearly so you can tell where they come from – your own promotion or an app.
• Check how many automatic discounts your apps create.

That’s why we planned for the limit in HGDE MatchGrid: the app uses at most 20 automatic discounts, so the rest stays free for your own promotions. Finders and bundles without their discount switched on don’t count at all.

Many Shopify apps no longer add their storefront features through injected code but as an app block. You place it in the theme editor like any other section or block. Whether that works for you depends on your theme.

What app blocks are

App blocks are part of theme app extensions. According to Shopify, they work with Online Store 2.0 themes. The benefit: apps built this way don’t edit your theme code. That lowers the risk of an app update or uninstall breaking your theme, and you don’t have to paste anything into theme files.

Check it in two minutes

• In Shopify, open Online Store → Themes and click Customize on your current theme.
• Switch to the product page template at the top.
• If Add section appears below the list of sections, it’s an Online Store 2.0 theme. If the button is missing, Shopify says it’s a vintage theme.
• In a 2.0 theme, Add section or Add block also shows an Apps area with the app blocks of your installed apps.

According to Shopify, vintage themes only support sections on the home page, and free vintage themes only receive security fixes. If you want to use app blocks, switching to an Online Store 2.0 theme is the way forward.

What to watch when switching

• Work on a copy first and only publish once everything looks right.
• Note which apps used to write code into your theme and check whether they now offer app blocks.
• Check the product page, cart and mobile view before you switch.

Our app HGDE MatchGrid relies entirely on app blocks. That’s why the theme question is the first thing in our FAQ.