Visune Phase 2

Modifying the Shopify checkout process

We decided that using the standard Shopify cart was still appropriate to allow a customer to collect their purchases together, but the cart behaviour needed to be modified as we wanted to avoid using the checkout.

If the cart only contains asset items, then providing the customer has enough Units, they can still click a single button to start the purchase. This sends the information to our bespoke app that handles these custom features, and uses the Shopify GraphQL API to add the products to the customer's account, reduce the number of Units remaining and log the transaction details. This all needs to be done securely and a number of systems are in place to ensure that the information hasn't been tampered with, and is a valid request from a customer using the site. The customer is then smoothly redirected to their account page where their new purchases will be listed and available for download.

Overcoming Shopify's caching limitations

Shopify is a SaaS (Software as a Service) platform, which means that all of the server optimisation that a site needs to run quickly is undertaken by Shopify. However, during testing, we noticed that sometimes the front end of the website was 'cached' and an older version of the page was still being shown for the customer, so they didn't get to see their new purchases straight away. This was a difficult problem to solve because we couldn’t control the caching on a Shopify site as we could for example on a Magento site The solution was for the app to send back limited information about the new purchase, and if that isn't found on the listing page, then we could display a placeholder to let customers see that the purchase had been successful, but was still processing. The page then periodically checks for updates in the background and if the information is now accessible, replaces the placeholder with the full information so the customer can download their asset immediately.

Subscriptions and Top Up purchases - supplementing the Shopping Cart process

Visune not only wanted to avoid the checkout for asset purchases, but they also wanted to avoid using the cart for any subscription or top up purchases. This presented a better UI for the customer, and felt much more inline with industry standards. We changed the conventional Shopify checkout process by allowing the Subscription and Top Up products to go directly through to the checkout, creating a much smoother experience for those critical purchases.

This worked well, but we needed to create a frictionless experience for customers who had carefully added download assets to their cart to then find they didn't have enough Units to purchase them all. We couldn't send them to the checkout with both the downloads and a Top Up product in their cart, but we didn't want them to lose their carefully put together cart either. So, if the customer doesn't have enough Units for their cart, the purchase button is replaced with a button that saves their cart, and then takes them directly to the Top up product. Once they've completed that purchase through the standard checkout, the site restores their cart and allows them to then proceed with those asset purchases. What would have been a complex set of steps for the customer is now all automated into a smooth flow.

Handling large file sizes

Some of the digital assets being offered by Visune are several gigabytes in size, so using Shopify's own hosting for these files wasn't possible given the 20Mb limit. We had to therefore use a third party hosting provider, but needed to make sure that all requests to download these files were only from customers who had purchased them. In theory if a customer posted a link on social media, that would enable anyone to download the asset for free. We've put a number of systems in place to make sure that even if someone does discover the link that the download came from, it can only be used once, and within a small time frame, making sharing it pointless. Legitimate customers have the download start automatically within their browser without seeing any of these security measures.

Recreating Analytics events

Because the checkout wasn't being used for asset purchases, standard Google Analytics (GA4) events wouldn't be seen as converting, and creating reports to understand best selling assets for example wouldn't be possible. We set up purchase events that would be triggered and sent with the full product details each time a digital asset was purchased.

Quick wins

Phase 2 of the project was all about quality of life for Visune's customers, and one feature they'd been considering for a while was offering a discount if purchasing a different format of an asset the customer had already bought. With the new faster purchase system, this was a lot simpler to implement and we very quickly had that in place allowing smoother upsells.