Shopify Custom Development

Let customers visualise products together

Allowing people to visualise the contents of their cart together can increase conversion rates by improving buyer's confidence in their product choices. It can also increase the number of items customers order by appealing to their need to "complete the set".

There are 2 common approaches which suit different types of products...

Superimposed Products

Cart contents are represented using transparent-background product images layered on top of one another. This approach is perfect when there is a main product with optional accessories, for example boats, cars, toys, and electronics.

Coastal Distribution, a power boat distributor, used this feature to allow people to "build a boat" and see their chosen outboard motor, trailer, and canopy actually on their boat model. See it in action →

Adjacent Products

Here cart contents are represented using product images that are positioned relative to one another as they would be arranged in the physical world. This approach works especially well for modular products that are laid-out together such as furniture, kitchen cabinets, floating docks, storage systems and clothing apparel.

Dam Docks, a floating dock system manufacturer, used this feature to allow customers to "design a dock" and see modular dock sections together in plan view in their own environment. See it in action →

How it works

Typically each product has a custom image field used for the visualisation and either pre-defined positions for each product image, or the ability for users to specify the order and orientation for each product they add to cart.

The visualisation is done by looping through cart contents and plotting each image in the correct position (or the correct layer in the case of superimposed images). All users need to do to build up the complete visual is add products to their cart.

The benefit of using the cart contents for a build/design tool is that users don't need to login, download or save their finished design anywhere. The design can be recreated based on the cart contents, which persist for around 10 days on Shopify.

Cart Visualisation can also be combined with Step-by-step Ordering, where users are led through product choices in a pre-defined sequence.

Lead users through multiple products in sequence

When customers are ordering multiple products or components to be used together there is often a logical sequence they should be added in. For example the first product choice might affect which products are suggested to customers next to ensure compatibility. Leading users through a sequence can also ensure they don't miss adding required components.

iKustom used this feature to allow customers to easily place complex orders for custom kitchen doors and panels. Different product choices are presented at each step according to customers' initial style choices. See it in action →

How it works

The best approach depends on the "rules" for creating the product sequence, but typically a custom metafield is added to each product allowing store owners to choose the next product to be presented. Sometimes rules are coded into the product page template to interrogate the cart contents and make the correct decision about which product should come next.

A progress bar can show users where they are in the sequence and allow them to navigate back and forth by dynamically adding the correct product URL to each of the steps.

Add multiple items to cart with one click

Shopify's own Search & Discovery App is useful for presenting users with add-on products that they might also want to buy; but most themes don't support adding multiple products to cart in one go. Often users have to add the add-on product to cart first, and then go back and add the main product too. This isn't the best user experience.

A "Buy it with" button that allows adding the main product AND the accessory to cart in one click can increase conversion rates and average order values.

Blooming Events uses this feature to allow people to add a greeting card or chocolates to their flower order with a single click. See it in action →

Beija Flor, another florist, enabled customers to buy flowers with multiple add-ons by simply checking boxes to include them when they click the add-to-cart button. See it in action →

How it works

Add-on products can either be generated using Complimentary Products specified in Shopify's free Search & Discovery app or using a custom product metafield to allow the add-on options to be selected for each main product. A custom add-to-cart button is then created to submit multiple products to cart instead of just one.

Sell products as a bundle or package

Customers love bundles, especially if there is a saving versus buying all the components individually. Bundles can encourage customers to buy more items than they would have otherwise.

The Limitations of Bundle Apps

There are apps available for creating product bundles but finding one that perfectly fits your business can be tricky. In the case of Shopify's Bundles app it has some limitations... there is no way to automatically display the list of products included in the bundle. You have to manually add that into the bundle's product description and, when the details of included products change, you need to update the bundle description. A custom solution can be a better approach because it can be setup to work exactly how you need without manual updating.

Coastal Distribution used a custom solution for creating accessory packages to show an auto-generated and always up-to-date list of the products included. See it in action →

How It Works

Using a custom metafield any product can have multiple Included Products associated with it. A special product page template for bundle products loops through all the included products and lists them along with their images, descriptions and prices. When any of the included product details change the list is updated automatically.

Let people order without paying the full amount

If your product is a big-ticket item, or customers need to order in advance, you can often increase conversion rates by only asking them to pay a deposit rather than the full amount up-front. Shopify typically works by charging customers the full price of a product when they order online so custom development or a third-party app is needed to allow customers to place orders without paying the full amount.

BayTub Softubs, a spa dealer selling spas costing upwards of $6,000, used this approach to increase conversions by only requiring a $1,000 deposit to place an order. See it in action →

Cape LaHave Adventures used this feature for kayak tours because their guides rely on tips, so it was important to ensure clients still had a balance to pay on the day to give them an opportunity to add a tip. See it in action →

How it works

When someone reaches checkout whatever you set as the product price is what they will pay; so the simplest approach is to set product prices as the required deposit amount and then add a custom field for the "full price". Product pages and the cart can then be customised to show customers the full price alongside the deposit amount to pay now.

Directory of stockists, partners or locations

If you have a long list of store locations, people, stockists, suppliers or partners you want to show to customers, in a that's easy to maintain and update, creating a data-driven directory page is the answer.

Beija Flor florist created a vendor directory for local suppliers of wedding services other than florals. With 4,500 website visitors per month being listed in the directory was an obvious benefit and, as a condition of entry, listed vendors were required to link to Beija Flor's website in return. See it in action →

How it works

Directory entries are stored in a metaobject and categorised to allow grouping entries together, sorting or filtering. Available categories (or location regions) can be auto-generated by looping through entries and generating a unique list of groupings.

Editing and updating metaobject entries is much quicker and easier than having to update details in theme templates. Each entry can also have relevant products or blog posts associated with it.