A Gift With Purchase promotion generally means customers get a free item with orders above a certain value. This can be a win-win for both merchants and customers – merchants encourage their customers to increase their average order value (AOV) whilst customers get a free gift, and who doesn’t want that?
By Association Only recently built a GWP for jewellery brand Astrid & Miyu featuring a few extra bells and whistles – including being able to choose from a range of gifts and supporting multiple different GWP promotions simultaneously. Here’s how we built it.
GWP is made up of multiple components, some of which are complex. To simplify the processes of developing and testing we split the components into three categories: discounting functionality, displaying gifts to customers and promotion rules.
The discounting functionality was an obvious place to start as it’s the most critical and easiest to test independently. This script is written in Ruby and sits on Shopify’s back end in the Script Editor app.
The Ruby script runs each time the cart updates and checks each item in the cart for two things: a maximum quantity and a discount to apply. If there are too many GWP items in the cart we first remove the extras and then apply the discount to the remaining items.
Showing gifts to Astrid & Miyu’s customers was challenging because the cart is already feature-rich – it has a free shipping progress bar, shows upsells at the side, and some products have addons that appear immediately beneath them too.
The GWP must be visible to eligible customers so that they don't miss out on promotions. Equally important is that the GWP doesn’t detract from the existing feature set. We, therefore, chose to stick the GWP to the top of the cart footer.
For better accessibility, content can be hidden beneath the GWP block whilst remaining discoverable by scrolling. To achieve this we used absolute positioning in CSS to ensure the GWP component is always shown just above the cart footer. We also used z-index to make sure it always shows on top of other content.
The GWP content is also hidden inside an accordion – an expandable block of content – so when a user becomes eligible for one or more rules a button is revealed to inform them and clicking it expands the list.
A potential problem was that if eligible, customers could be offered multiple gifts at the same time, therefore creating a lengthy list that hides other essential content. To prevent this, we capped the list at 2.5 products, making it scrollable beyond that.
Presenting product options was also a challenge as many products on Astrid & Miyu’s website can't be paired through variants – for example, Birthstone and Zodiac Signs. Allowing customers to change these product options required extra logic because as far as Shopify is concerned they're entirely unrelated to each other.
Rather than make Astrid & Miyu maintain a large list of these related products we built in the logic to detect the relationships and ensure any promotion available for one could be applied to all.
As an alternative to writing an abundance of JavaScript, we used Shopify’s Section Rendering API. Each time an entirely different product is selected we request the GWP card for it, then update the list with the new version Shopify has returned.
Requesting a new product each time the customer changes their selection isn't entirely free though – customers need to wait for Shopify to render the new item and send it back. To counter this we hooked it into our caching system, which allows us to request the data just once – if a customer switches from the Aries sign to Taurus and then back again, it can update instantly because we've already saved it.
We also pre-emptively fetch the first set of options into the GWP cache. Having these options saved in the cache ahead of time reduces the likelihood a customer will be kept waiting.
The final step was to integrate the promotion rules and logic, tying the previous two steps together. This allowed the checkout script to apply discounts to products added via the GWP block.
Astrid & Miyu can run promotions based on the following criteria: minimum spend, number of items, number of unique items and items from a specific collection.
The “items from a specific collection” rule was a little more complicated to implement than the others as Shopify doesn't provide the data within the cart. To address this, we built an "additional data" payload into the cart that contains all of the collection handles associated with a product.
The additional data payload can easily be expanded too, should any other rules need access to external information in the future.
Each rule also has the option to be private, meaning if required Astrid & Miyu can make it available to a limited set of its customer base. For example, the brand may wish to incentivise customers to subscribe to its newsletters by offering exclusive promotions to a segment of loyal customers. These customers would then be sent a private link associated with the promotion.
To ensure Astrid & Miyu can run as many simultaneous promotions as possible we built a plug-and-play rule list. Every time the cart updates it passes the new state into this list. The list tests the cart against each set of eligibility criteria and informs the script which tests have passed.
Along with allowing multiple promotions to run at once, another benefit of the plug-and-play rule list is the GWP can more easily grow with Astrid & Miyu.
If the company ever wants to expand its rules, for example if it wanted to offer a promotion only to customers with a particular tag, it's easier to add those new criteria because the logic is self-contained. The broader system only needs to know two things from each rule: "does the current cart pass your test?" and "what discounts can be applied when your test passes?".
Founded in 2012 by Connie Nam, Astrid & Miyu has been shaking up the world of jewellery ever since. Astrid & Miyu engages with its customers through social media and newsletters, helping them to discover their personal style.
Astrid & Miyu worked with By Association Only to migrate to Shopify 2.0 and refresh its web design. The new build extended Shopify to include bespoke features such as personalised jewellery and product sets. Read the full case study here.
By Association Only is the Shopify Plus agency for the world’s most design-conscious luxury brands. Get in touch to discover how our team of experts can support your brand’s Shopify ambitions.
By Association Only has won its fourth Awwwards site of the day title, this time for our work with luxury sneaker brand P448.
From made-to-order luxury bridal gowns to more affordable ready-to-wear bridesmaid dresses, we take a look at the bridal stores using Shopify to sell their pieces.
%20(1).jpg)
Last week By Association Only hosted its annual summer soiree at Coal Office in London. Read all about it here.
.jpg)