The client needed to offer a customer the tools to fully customise their Aquababy carrier with personal graphic panels, body colours and safety fixing buckles. Specifically designed to accommodate and introduce a baby to water the Aquababy carrier is manufactured in light weight durable neoprene waterproof fabric with choose your own graphic features, different colour fixings and harness straps.
To meet this design criteria and feature the wix code product configurator was applied which gives customers tools to fully customise products and make them one of a kind.
What we Built
In this example, https://michaeljfox344.wixsite.com/aquababy/custommaterials-title a site visitor can choose different patterns and colours to design a custom carrier.
How we Built It
Utilising the wix code product configurator API a collection was added, combinedMaterialsImages collection and the following fields applied:
Title: The name of the carrier graphic, body colour or buckle for the carrier part
Option: The part of the carrier that the graphic or body colour modifies
choiceImage: A sample image of the graphic, body colour or buckle.
displayImage: An image of the specific part of the carrier with the specific graphic, body colour or buckle
To populate the display images field individual parts images were created to exactly match an example pre-designed carrier, these were loaded into the combinedMaterialsImages collection under their respective field headings.
On the actual design a carrier page a container box was loaded with each pre-designed carrier part, body, graphic and buckle then positioned in the box to match the default carrier example. All parts images had transparent backgrounds.
Price, product description, weight, product ID, options etc were added to the stores products collection, only relevant items were seen in the shop, the rest were hidden from view. In essence the customer wants to sell a few completed carrier examples and the remaining products would be custom made.
Customising the Carrier
On the carrier page, visitor's can customise a carrier by selecting specific graphics, body colours or buckle fixings for different parts of the carrier.
Initially the page displays a default image of an example Aquababy carrier, as well as the repeater selector, carriers title, price, and description from the products collection.
As the visitor makes a selection, the corresponding image from the displayImage field is overlaid on the default image so the visitor can preview their design.
For each customisation option, containers hold the elements that let visitors select the carrier part’s graphic, body colour or buckle, these containers collapse or expand as visitors progress through the steps. Visitors can click on the heading text for any step to expand that container and collapse the others.
To display the graphic choice, body colour and fixing options repeaters are used for each part and are defined based on the graphic, body colour and fixing options from the combinedMaterialsImages collection.
Each graphic, body colour and fixing button is made up of a button and an image. The button implements the hover effect, which displays a black border. The image is connected to a filtered dataset and displays the graphic, body colour and fixing for that customisation.
Clicking add to cart adds the customised carrier to the visitor's cart.
The existing display graphics are a small token of what can be achieved, to expand customer choices further an online bespoke design your own graphic software package is linked to allow customers to design their very own unique graphic for Aquababy Ltd to print on the carrier panel. https://michaeljfox344.wixsite.com/aquababy/custommaterials-title
A call to action button steers the customer towards a custom graphic panel facility if they can't find what they are looking for in the graphic panel collection.
Full customer instructions are given to advise the client about the graphic design process, once the unique graphic is designed its downloaded on to their computer then added to the customers order by uploading the graphic within an onsite wix coded order form.
For more information contact:
Mike Fox, email@example.com