The Custom Product Page Functionality That Enables Customers to Create Their Own Swimwear Sets

In 2024, Swanky was proud to collaborate with Australian fashion swimwear brand bond-eye swim to design and build a brand new custom storefront on Shopify Plus.

Part of this project involved developing interactive ‘find your set’ functionality that would help elevate the traditional transactional experience of product detail pages (PDPs) to something more experiential.

The inspiration for this functionality was a Barbie outfit designer game from childhood – something that evoked fond memories for a number of the bond-eye swim team. They wanted to bring this sense of nostalgic fun to their ecommerce store, serving up an immersive on-site shopping experience that would engage and delight their customers.

This article will explore our custom development in more detail, before examining the benefits of such functionality for both consumers and retailers.

Build your own swimwear set: The frontend experience

This bespoke product page functionality provides shoppers with a dynamic experience as they search for the perfect swimwear ensemble.

On select PDPs, underneath the product imagery and description, users are presented with a carousel where they can browse tops and bottoms that are the same colour and material as the product they’re currently looking at.

In the above example, the ‘find your set’ carousel on the Blake Bandeau PDP presents other bikini tops in the same ‘Lake Recycled’ blue colour and crinkle material. This allows users to easily explore different top styles without needing to navigate through multiple PDPs.

Consumers are also shown complementary bikini bottoms, helping them to create a full swimwear set that suits their specific tastes or sizing needs.

Product and price details for the selected outfit combination appear in a real-time cart preview.

Behind the scenes: Bespoke Shopify development

Underneath the hood of this interactive functionality is bespoke Shopify development, engineered by Swanky’s team of in-house developers.

The ‘find your set’ product sliders leverage Shopify Online Store 2.0’s native metafield technology, looping through bond-eye’s collections to check for items that share the same ‘mix_and_match_group’ metafield value as the product being viewed. Any matching products are displayed in the two sliders for tops and bottoms.

A second component displays the user’s selected top and bottom as an outfit, and allows shoppers to add these two products to cart with just one click. This component leverages Alpine.js for interactivity and reactive data management. It retrieves the relevant product IDs to display and can update these dynamically when a user changes their selection. The price field is also dynamically updated depending on the chosen top and bottom products.

What are the benefits of this custom ecommerce functionality?

Functionality like this offers several benefits for both consumers and retailers:

• It adds an element of fun to an ecommerce site, providing an interactive and engaging online shopping experience that encourages repeat site visits and brand advocacy.

• Gamified product builders also encourage users to spend more time on-site, thereby boosting engagement metrics. Longer session durations are also linked to higher conversion rates and increased average order value.

• An immersive product configuration experience can serve as a compelling differentiator for a brand, especially in a crowded industry where competition for converting and retaining customers is high.

• Allowing users to browse complementary products and build a set without having to navigate multiple PDPs streamlines product discovery and simplifies the overall shopping experience. This can save time and effort, making the path to purchase much smoother, which can increase conversion rates.

• Retailers can enjoy higher average order value, as the cross-selling element encourages customers to purchase multiple items to complete a set.

• It allows customers to mix and match products based on their individual preferences, giving them a sense of control and customisation. This can improve the overall user experience and encourage repeat purchases.

Alternative applications of this ‘find your set’ functionality

This sort of functionality has applications across a range of verticals, beyond fashion ecommerce. It can be adapted across industries to elevate PDPs and drive all the benefits listed above.

For example:

• It could be used by home decor and furniture brands to allow shoppers to browse coordinated items for a full room set, based on the style of the item they’re currently browsing.

• For beauty and cosmetics brands meanwhile, it can be leveraged to recommend full skincare or makeup routines of complementary products, based on skin concern or makeup style.

• Food and beverage brands like meal kit providers could use it to allow configuration of meals, with shoppers easily browsing through different ingredients or courses.

Other examples of custom product page functionality on Shopify

Interactive product pages are becoming increasingly popular because of their positive impact on customer experience and key ecommerce metrics. Beyond ‘find your set’ or ‘complete the look’ features, let’s explore some examples of immersive PDP functionality designed to engage online shoppers and maximise sales opportunities:

Newcastle United FC Online Shop: Kit personalisation

Newcastle United fans are provided with an intuitive and engaging experience on the club’s online product pages, thanks to sophisticated kit personalisation functionality developed by Swanky.

Users can personalise their chosen kit with a name and number, choosing between font and badge options, with an instant product mock-up visually rendering within the personalisation widget. The cost of the personalisation is also displayed in the widget and adjusts instantly depending on the options chosen.

This instant visual response not only allows fans to preview each aspect of their new kit, it helps to build anticipation amongst users and create an immediate emotional connection by emphasising the personal value.

Veneta Blinds: Made-to-measure product builder

Australian window dressings brand Veneta Blinds provides an immersive experience for shoppers with a step-by-step interactive product builder.

Users select each feature of their bespoke purchase, working through properties such as material, colour, drive control and size. Custom pricing is calculated and displayed within the widget, based on the values inputted by the customer.

A visual render of the product is also presented – enabling customers to see what their bespoke creation will look like before committing to a purchase.

You can find out more about this product builder in the Veneta Blinds case study.

Aeris: Office furniture configurator

International ergonomic office furniture retailer Aeris provides another great example of how product configuration functionality can elevate a PDP.

Consumers can enjoy a fast and intuitive product customisation experience, where they can choose between thousands of variants depending on their requirements. They are presented with an instant image response of their furniture design, with accurate pricing and delivery information also available.

By allowing shoppers to visualise a custom product in this way, retailers can help to boost purchase confidence and reduce return rates.

Custom development to elevate your Shopify store

Our industry-leading team of web developers are passionate about pushing the boundaries of Shopify and creating innovative on-site features to elevate the user experience and drive key performance metrics. We bring a wealth of technical knowledge and platform expertise to custom Shopify development projects, delivering complex bespoke functionality to meet highly specific client needs.

Reach out to our solutions team to discuss your custom development requirements.