Caleb from Don Du Ciel approached me to implement the above UI that would allow his customers to add a custom engraving to their product.
The feature had a few requirements:
- The customer should be able to choose a desired font from a set of 3 options and specify the text they wanted to be engraved
- Send that information through with the order so that the business can fulfil it
- The customer needed to be charged extra for the engraving
Frontend implementation
The UI was implemented without a design brief. I implemented what I thought made sense, matching the existing UI. The client then provided some basic feedback to refine the look.
Backend Implementation
Given that the user needed to be charged an additional fee for the engraving, it made sense to create an 'Engraving Product' that would be added to the cart alongside the exisiting product.
Using 'Nested Cart Lines', the 'Engraving Product' is shown nested as a child product of the main product in the checkout.
The selection of the font and text to be engraved is passed to this product via line item properties.
With this implementation, the engraving essentially works as an upsell product.
The client can - at any point - change the price of the engraving or change the name of the engraving in the checkout by changing the price or the name of the product respectively.
Client feedback
"Just wanted to say thanks again for this - it’s a real pleasure working with you and really appreciate your flexibility and communication."