Encircled

Even the best Shopify theme can’t always offer everything you want and sometimes there isn’t a suitable app available.

Encircled wanted a way of improving how kits/bundles were sold through their Shopify store. Not something that was supported within their theme, they’d already investigated apps as a possible solution. Unfortunately, product bundle apps didn’t integrate with their stock management system so they asked me to look at alternative options.

My solution was to create a custom collection page template for use with kit collections. Collections assigned to this template list the products available in a kit and the discount code the customer should use at checkout once they’ve finished making their selection. All of the options for a kit can be set by Encircled by editing a custom HTML block in the collections description.

With a mixture of custom HTML, SCSS, Liquid and JavaScript I allowed customers to build a kit from the available products, selecting individual product options (size, colour) as they went. To ensure customers weren’t drawn away from the kit page, full details of each product could be viewed in a ‘quick view’ pop-up window. A summary table at the top of the page updates each time a product is added to the cart to show the customer what else they need to choose to complete their kit.

Encircled wanted to push the option of pre-ordering products beyond what was already available in their Turbo theme. I updated their product template so that when a product is only available for pre-order, “Pre-Order” banners are displayed above the product title and in the bottom right-hand corner of the main product image, the “ADD TO CART” button text is replaced with “PRE-ORDER NOW”, a “Pre-Order: Ships approx. [Date]” banner is displayed and the express check-out (e.g. “Pay by PayPal”) buttons are hidden.