Configurators on Shopify: Best practices using the example of FC Union Berlin

Are you considering a configurator for your online store? Or do you already have one and want to optimize it? Customized products can noticeably increase your customers' satisfaction – after all, personalization ensures a unique shopping experience, higher purchase intent, and stronger customer loyalty.

In this article, we take a look at the various options for product configurators on Shopify and the approaches we recommend as an experienced agency. As an exciting practical example, we take a closer look at the jersey configurator of 1. FC Union Berlin : To provide fans with an intuitive, visually appealing, and error-free configuration, we developed a powerful Shopify solution.

How did we go about it? What challenges did we face? And what lessons can we apply to other shops? Our Shopify expert Tobi shares his insights in the tante-e podcast – we've summarized the most important highlights for you in this article.

1. Why are configurators relevant for online shops?
   1. Advantages of product configurators on Shopify
   2. Which industries particularly benefit from configurators?
2. Options for product configurators on Shopify
   1. Native Shopify features: What works without apps or code?
   2. The 3 options for configurators on Shopify
   3. Why we don't recommend apps for configurators on Shopify
   4. Which solution do we recommend?
3. Example: Requirements of the jersey configurator of 1. FC Union Berlin
   1. Why a standard solution was not enough
   2. Decision: a tailor-made solution
   3. Technical implementation of the product configurator
   4. Result: A stable, scalable jersey configurator

Our checklists & guides: Everything you need to get started with Shopify 🚀

1. Why are configurators relevant for online shops?

The ability to customize products is no longer a niche phenomenon. In our experience, customers increasingly expect online stores to offer them an active part of the shopping experience and the ability to personalize products, be it jewelry, furniture, or—as in the case of football fans—jerseys with their own name and number.

1.1 Advantages of configurators on Shopify

But product configurators not only offer a better shopping experience, but also clear advantages for retailers:

• Increased customer loyalty: Those who design a product according to their own wishes build a stronger emotional connection to the brand.
• Higher margins: Personalized products often justify higher prices and reduce price sensitivity.
• Fewer returns: Customers are more satisfied with customized products and return them less often.

1.2 Which industries particularly benefit from configurators?

The possibility of customization is by no means limited to fashion or sporting goods. Many industries rely on configurators to optimize the shopping experience:

• Fashion & Accessories: Engraved jewelry, printed T-shirts or individually designed shoes.
• Furniture & furnishings: Customize colors, materials and dimensions.
• Technology & Electronics: Laptop or PC builds with custom components.
• Food & Beverage: Custom muesli mixes or personalized chocolate boxes.
• Sports & Teams: Jerseys, fan merchandise and club equipment with individual branding.

Configurators offer a great opportunity, especially for brands with a loyal community – as the example of 1. FC Union Berlin shows.

2. Options for product configurators on Shopify

2.1 Native Shopify features: What works without apps or code?

Shopify doesn't offer a full-fledged configurator out of the box, but there are simple ways to add basic customization options to products. One of the most common solutions is the use of line item properties. These allow you to store additional information such as names or numbers that are requested via input fields on the product page.

For example, a store can add simple custom fields to the product page where customers can enter their desired text—for example, for custom name embroidery on a jersey. Some Shopify themes, such as the Impact theme, already offer such features integrated.

Advantages of this solution:

• No additional costs for apps or development
• Fast implementation
• Works with any Shopify plan

Disadvantages of this solution:

• No visual preview for customers
• Entries cannot be directly checked for correctness (e.g. forbidden words or numbers)
• Complicated pricing logic is not possible

This solution may be sufficient for simple customizations, but as soon as the configurator is to offer a real visual experience, a more powerful alternative is needed.

2.2 The 3 options for configurators on Shopify

Depending on your requirements, there are three approaches to integrating a configurator into Shopify:

Line Item Properties as a basic solution (free field on product page)

This variant uses Shopify's native line item properties to enable simple text input. It's suitable for stores that are looking for a quick and cost-effective solution but can do without previews or complex logic.

Configurator directly on the product page with drop-downs and selection fields

This method uses not only free fields, but also dropdown menus and selection options on the product page to provide various flocking options. This method allows for slightly more control over input and provides a structured user experience. It can be combined with Shopify metafields to control price adjustments and product variations.

Configurator as a separate drawer (individual solution with custom coding)

With this method, the configurator opens as a separate slider or drawer where customers select their options. This variant allows for a live preview, an intuitive UX, and seamless integration into the checkout process. Management is done via meta fields and meta objects, allowing for flexible customization of changes—e.g., new players or jersey colors.

2.3 Why we don't recommend apps for configurators on Shopify

At first glance, it seems simple: The Shopify App Store offers numerous product configurator apps that promise a quick solution for custom products. However, in our practical experience, these apps often pose more problems than benefits—especially for shops with high traffic or more complex requirements.

Limited flexibility:

Apps often offer only a limited selection of configuration options. Specific requirements, such as dynamic pricing control, customized logic for specific products, or a customized user experience, are often difficult to implement. Furthermore, many apps are unable to properly map complex product variants or customized ordering processes.

Performance issues:

A major risk with app-based solutions is the additional loading time they cause. Many apps load external scripts that slow down the shop's performance – especially for shops with high visitor traffic, this can negatively impact conversion rates. Particularly problematic: If the app crashes or loads slowly, the entire configurator stops working – and customers can't place orders.

Limited control:

Apps often use workarounds to transfer configuration data to the Shopify shopping cart and order. Many apps don't save customizations as Shopify-native line item properties, but rather as separate text fields or email attachments, which complicates processing. Furthermore, complex pricing logic is often impossible to map. Upsells or customized pricing calculations often require additional scripts.

2.4 Which solution do we recommend?

Apps can be a short-term solution for simple customizations. However, those who rely on a scalable, powerful, and individually customizable configurator solution cannot avoid customized development.

Choosing the right method depends heavily on the shop's requirements. While simple free fields or dropdowns may be sufficient for smaller shops, professional, scalable solutions usually require a custom-programmed version.

The jersey configurator of 1. FC Union Berlin shows how a custom-developed solution improves the user experience, remains flexibly adaptable and at the same time runs technically stable.

3. Example: Requirements of the jersey configurator of 1. FC Union Berlin

1. FC Union Berlin has undergone rapid development in recent years. From a former second-division team to participation in the Champions League, the club has grown not only athletically but also financially. With its growing success, so has the demand for merchandise, especially jerseys.

It quickly became clear to the club that the existing e-commerce infrastructure needed to be modernized to meet the increased demand. The fan shop needed to not only be able to manage more products efficiently but also offer an improved user experience—especially for the sale of the highly sought-after jerseys.

Jerseys are one of the most important merchandise items for any football club. They are not just a fan item, but also a symbol of club loyalty. Customization plays a crucial role: Many fans want not just the standard jersey, but a personalized jersey with their own name or the number of their favorite player.

3.1 Why a standard solution was not sufficient

Union Berlin faced several challenges that could not be addressed with a classic Shopify solution:

Several jersey variants

• There are at least four different jerseys per season: home, away, alternate and Champions League jersey.
• In addition, there are separate versions for women, men and children, which further increased the diversity and complexity of the product range.

Flexible customization

• Fans should be able to choose between predefined player names and numbers or completely individual flocking.
• In addition, they should be able to decide whether their jersey will be provided with a competition logo (e.g. Bundesliga, DFB-Pokal or Champions League).

Easy maintenance and administration

• In football, squads can change quickly. Players come and go, which means the configurator needs to be updated regularly.
• Union Berlin needed a solution that would allow its own team to make adjustments independently – without having to hire an agency or developers every time.

High traffic & performance

• The release of new jerseys generates an enormous rush of visitors to the shop – especially at the start of the season.
• An unstable solution or an app-based implementation would have increased the risk of a crash during peak times.

3.2 Decision: a tailor-made solution

Union Berlin therefore decided together with us to implement a custom solution directly on Shopify, which we tailored specifically to the club's needs.

In the next section, we'll take a look at the key aspects of the technical implementation of this configurator. For a complete overview of the jersey configurator's strategy development and approach, listen to Tobi's podcast episode:

4. Technical implementation of the product configurator

4.1 Drawer instead of product page solution

When developing the jersey configurator for 1. FC Union Berlin, one of the first decisions was: How should the configuration be integrated into the shop?

Union Berlin opted for our recommended option: a drawer that opens after selecting the jersey and size. This keeps the product page uncluttered, allowing users to fully concentrate on the configuration.

Advantages of the drawer:

• Better user experience: The drawer opens across the entire screen width (especially important on mobile).
• Direct preview: Changes are visible on the jersey in real time.
• Clear purchasing process: Users go through the selection options step by step and keep track of everything.

4.2 Central element: Live preview

A key element of an intuitive jersey configurator is the visual preview. Customers want to see exactly what their jersey will look like with the flocking and competition logo before purchasing it.

The challenge: Each jersey has a different base color and requires a matching font and number color.

This is how the preview was technically implemented:

• Metafields in Shopify: Each jersey has a metafield in which the appropriate preview graphic is stored (e.g. home jersey = red jersey, white font).
• Dynamic text overlays: Name and number are placed as text elements over the preview image – with the appropriate color for each jersey variant.
• Image overlays for the numbers: Since Union Berlin integrates a small Berlin bear into the number, the numbers were implemented as an image overlay to faithfully represent the design.
• Competition logos as selectable elements: Bundesliga, DFB Cup or Champions League badges can be added directly in the configurator.

This solution keeps the preview flexible: If Union Berlin changes its jersey design in a new season, new graphics and color values can simply be stored in the backend – without complex programming.

4.3 Flexible maintenance through metafields and metaobjects

Since the squad changes regularly, a way had to be created to quickly and easily add new players or remove existing ones from the selection.

The solution: Shopify meta objects for players.

• Each meta object contains the name, number and player picture.
• Changes can be made directly via the Shopify backend without having to adjust any code.
• With the jersey product, the desired players are simply activated or deactivated using a checkbox.

For those responsible at Union Berlin, this means: no agency support is necessary, no complicated adjustments – changes can be made in just a few clicks.

4.4 Flexible pricing

Another technical detail concerns pricing. Since flocking or a competitor's logo entails an additional charge, a flexible solution for pricing had to be found.

This is how the price calculation works:

• The customization options (player flocking, own flocking, competition logo) were created as separate add-on products.
• These are added dynamically in the configurator as soon as a selection is made.
• Each variant has its own price, so the final amount is automatically calculated correctly.
• Customers can see at any time how their jersey price changes with the selected options.

This add-on logic avoids complicated product variants and ensures that prices can be easily maintained.

4.5 Result: A stable, scalable jersey configurator

This combination of drawer technology, live preview, meta fields and add-on products resulted in a powerful jersey configurator that:

• A seamless customer experience offers
• Can be easily maintained by the Union Berlin team
• Technically stable and scalable – even with high traffic