Fantastapack believes every business deserves beautifully printed packaging. Fantastapack approached Ambaum in 2018 looking for help with configuring their product detail page to price out large and bulky items. Due to the custom nature of their products, they calculate each custom order’s price based on the size, quantity, and material of the boxes. Formulas for calculating the box dimensions and pricing are stored in Shopify metafields and pricing information is passed on through line item properties and used by a checkout script to set the correct price in checkout.
A lot of our day-to-day work with them has been focused on making front-end improvements and fixes to the site. The complex nature of their PDP means that adding new customization options often requires developer assistance in editing the template to add these new features. One major task Ambaum we accomplished was building a template for a new product, precut box bundles. These products come in a range of predetermined sizes with pre-printed patterns, so customers can order a simple set of boxes when they don’t need a fully custom option. This new product required some custom pricing logic of its own, as the client wanted to offer an increased discount for larger bulk orders. Ambaum came up with code using JavaScript and checkout scripts to calculate the price based on the selected size and quantity of the boxes to arrive at the appropriate discount.
The VP of Innovation had an idea in 2019 to make it easier for their resellers to place high volume orders. Using Fantastapack.com to enter orders worked for smaller customers, but resellers placing large and frequent orders found it tedious to place orders through the standard checkout process. Ambaum worked with Fantastapack to architect a solution that involved creating a React front end application in conjuction with a Laravel framework to handle the order processing and artwork uploads from resellers. Ambaum also setup API connections to internal Fantastapack systems and integrated Ship Engine APIs to allow resellers to enter their own UPS, Fed Ex and USPS shipping rates. The custom software Ambaum created is now an integral part of Fantastapack’s operations and a valuable tool for resellers to place frequent orders.
Deep Sentinel is the next-gen home security solution that stops crime before it happens. Powered by a proprietary AI, HD smart cameras, and 24/7 LiveSentintel™ personal security guards, Deep Sentinel sets the new standard in home protection. Deep Sentinel protects your home and proactively stops burglary, package theft, or driveway break-in, allowing customers to feel dramatically safer at home.
The Overview
Deep Sentinel was a new company looking to sell their proprietary home security product through an ecommerce site. This required a full site build and a custom theme created in Shopify. We had to set up purchasing to handle the initial cost for the physical product as well as a recurring subscription cost for the service that could be annual or monthly. Their store is currently active, generating sales and can be viewed here: Deep Sentinel
The Challenge
Deep Sentinel came to us as a new store looking to sell their next-gen proprietary home security solution through an ecommerce site. Being a new company selling a new-to-the-market product, they had no site and no customer base. This meant our job was to build an entire site from the ground up that would draw customers in and showcase the product to make great first impressions.
The Process
This build required us to create a custom theme in Shopify. The actual product catalog of the site is relatively simple, so the focus of the build was on design to really feature and sell the product. There was some complex configuration we had to do to set up the subscriptions for the products. Deep Sentinel has an initial cost of the physical product and then the subscription kicks in for the service. We also had to set up a monthly subscription and an annual subscription and provide customers with the ability to toggle between the two before the final purchase.
The Solution
Deep Sentinel is a subscription-based online store that is built on the Shopify platform. The site needed to be the start of building a relationship of trust with customers. That meant building a high grade site that is easy to navigate and guides customers to all the information they need. The purpose of the site is to provide customers with a more comprehensive security system that has 24/7 “Live” surveillance. The store is currently active and generating sales.
“Hands-down…an invaluable asset for our company. [They are] extremely knowledgeable, work is top grade, and the turn-around is amazing. I would highly recommend Ambaum for UX and back-end work in Shopify.”
Pair of Thieves (PoT) is a diverse clothing brand with the tagline: we’re here to make all lovely humans ready for everything. Ambaum first engaged with Pair of Thieves in the summer of 2019 and we were brought in initially to fix performance issues on the site.
Ambaum took over regular maintenance work on the PoT site and quickly got started creating new custom pages, adding a new collection navigation features, as well as various minor style edits, and developing custom discount scripts for special promotions.
PoT was struggling with slow-loading pages and Ambaum kicked off a site speed diagnostic to figure out what was causing the problem. The biggest problem we found was how the theme managed color swatches for their products. PoT lists different colors of the same product as separate products, rather than variants of the same product in order to improve SEO, but this requires custom code in the theme to associate the different colored products with each other. The information has to be stored under the hood so that the theme knows what products go together, and what swatch image to display for each color.
The previous code developed for managing these swatch associations was inefficient, it required looping through many large lists of data in order to pull the information needed to display the swatches under a product. This slowed download times considerably as the looping caused it to take longer to pull all of the needed information from the server.
We were able to improve the efficiency of the swatch code by moving some of the data out of lists that had to be looped through, into metafields which could be accessed more quickly and efficiently. Rather than having to loop through a long list of swatches until the needed one was found, we are able to instantly access the swatch by name through metafields. We also came up with more efficient ways to store the groupings of products. While some looping was still required to go through and get the data for the products, splitting things out into smaller groupings reduced the amount of looping needed. These edits provided a noticeable improvement to the loading speed of the site.
While we were able to make some improvements to the site loading speed by editing several aspects, such as swatches, to be more efficient. Some of the site speed issues were more deeply rooted in the foundational structure of the site, so in order to further improve site speed, we began a complete theme rebuild that with an eye towards efficiency and performance.
In the process of optimizing, we recommended our tech partner, Searchspring: the leading search, merchandising, and personalization platform built exclusively for eCommerce. With Searchspring’s robust reporting and insights, Pair of Thieves is able to leverage data, creating synonyms and redirects to ensure that shoppers find exactly what they want. Searchspring’s advanced filtering and sorting capabilities mean less time scrolling through results that don’t match shoppers’ needs.
This partnership resulted in 3.5x higher conversion rates from customers using the site search, and found that customers using the site search spent 3.7x more than customers who did not.
Bulletproof is a science-based approach to nutrition and wellness that is tried, tested and proven to make your life awesome. Bulletproof Coffee approached Ambaum looking for Shopify Plus programming support for their site in Spring of 2019. The challenge for Bulletproof was to provide customers more control over their subscriptions through their Shopify Plus and Recharge integration. Ambaum provided a senior programmer for Bulletproof to help them architect and develop a custom app to give Bulletproof customers more control over their subscriptions.
Our senior Shopify Plus developer stayed engaged with Bulletproof long after the initial project and assisted Bulletproof with moving WordPress from /blog to their core domain and then put Shopify on a subdomain (shop.bulletproof.com). Bulletproof has integrated our senior developer into their weekly standup meetings and assists with a wide variety of both WordPress and Shopify Plus projects.
Ambaum also provided an experienced growth marketing consultant to help with SEO issues Bulletproof was experiencing. The growth consultant first performed an SEO audit that identified a number of broken links, as well as keyword and content gaps in their SEO strategy. A plan was put in place for remediation to help fix links and update any obvious errors. Bulletproof was happy with the work our growth consultant provided and was able to salvage many critical links that improved their backlink profile.
Solv is a doctor-recommended urinary tract supplement that starts working quickly and keeps working to promote a clean urinary tract. Solv came to Ambaum in early 2020 looking for help with development on their website SolvWellness.com. We jumped into the project and initially helped Solv out with some writing some scripts in the Shopify Plus script editor and then also cleaned up their product variants. In addition, we implemented quantity discounts on their product detail page, helped out some app selections, and made updates to a new product recently added to the site.
In the spring of 2020, Solv decided they wanted to completely redesign their site. Ambaum’s COO and Creative Director came up with a fresh look for the new Solv home page, collection, page product detail page, cart and more. Solv also had their own design team and ended up using our design inspiration + their internal design team to come up with the look they wanted. Ambaum developed the new Shopify Plus site on top of Shopify Theme Kit. We have created a proprietary custom theme that includes a lot of pre-built sections, snippets, scripts, icons, and much more. Our starter theme gave Solv the benefit of a professional theme and they got the flexibility of building everything from the ground up to fully accommodate the look and feel of their new site.
Solv sells a lot of products through their Shopify Plus site, but they also leverage a team of customer service representatives(CSRs) to take orders over the phone. The CSRs spend a lot of time in Salesforce, but they also need to get access to the Shopify dashboard as well as Recharge for subscription orders. Ambaum created a custom app that connected the Shopify, Salesforce and Recharge API, so Solv CSRs could enter their work in one location and save them a ton of time.
Inside Weather believes that shopping for furniture should be modern, personal and accessible—so we made it that way.
Inside Weather believes that shopping for furniture should be modern, personal and accessible—so we made it that way. Ambaum started assisting Inside Weather with development for their Shopify Plus site in late 2018. Inside Weather has a very sophisticated site that allows users to select from thousands of base furniture SKUs for your living room, dining room, office, bedroom and more.
Inside Weather had us start out by making changes to their custom theme and we would do general maintenance and updates to support their Shopify Plus store. As our relationship grew, Inside Weather asked about our custom app experience, specifically if we could help them build a product configurator that would let their customers choose colors, arm styles, upholstery, pillows, comfort and much more.
Inside Weather had their own technology team and we jointly approached scoping this custom app for their website. Inside Weather’s team was going to handle the creation and storage of millions of images and create an API that Ambaum could access for the configurator. Ambaum was responsible for accessing the API and creating a clean front end product configurator experience, here is a live example for building your own sofa. We built the majority of the front end experience in Vue, but also worked extensively in the Shopify Liquid theme. You are able to rotate the furniture on the fly, see your colors update, zoom in and out and save your customizations for purchase, this custom app increased customer engagement with the site dramatically.
In addition we have built out “shop by room” functionality that created custom collection pages for each of their high level furniture categories. Inside Weather’s revenue has increased significantly as their sales have gone up over 400% in 2020. As more shoppers are looking online to buy everything, Inside Weather has created a custom shopping experience that is positively impacting their bottom line.
We are excited to share our SMS partner **Octane AI** has released a new product called “The Shoppable Quiz“, and just in time for the holiday season! The Shoppable Quiz introduces the in-store retail experience online, is not industry specific, and is completely customizable to match your brand’s colors, fonts and more. Brands can add an embeddable, full-page quiz to their website and customers have the ability to add products directly to their cart from the quiz results page. Check out Octane AI’s new product demo video, and listed below is an overview of some key features:
Personalized shopping experience: the quiz can be tailored and personalized to customers by asking questions to build buyer profiles and match them with the right product recommendations.
Collect valuable data: Data collected from the quiz can be used on-site and in marketing for personalization and retargeting.
Opt-in Tool: Customers who participate in taking the online quiz are considered valuable prospects, turning them into subscribers for Email, SMS and Messenger.
Data from Octane AI’s Shoppable Quiz shows a significant lift in AOV for customers taking the quiz, and clients are seeing an increase in email subscribers too. Having the Shoppable Quiz ready for the holiday season will significantly help increase your BFCM business!
Customization:
With each quiz question, merchants have the capability of customizing the layout, size and shape of images. Different product blocks can be updated, allowing merchants the ability to have more customization over how their results pages look. From product image ratios, to desktop vs mobile-specific settings to text size, to choosing what content gets displayed— all of this can be customized based on your business’ needs.
The Shoppable Quiz opens up a ton of personalized shopping and customer profile building possibilities for your brand. Now is the perfect time to roll out this exciting product, just in time for the holiday season!
Interested in learning more about the Shoppable Quiz and setting up a demo? Contact Ambaum here and we are happy to help!
While the school bell may not be ringing for everyone this year, virtual learning will be the new norm for some students and teachers.
Being in the technology space, we wanted to showcase a virtual learning platform, share technology supplies and tools to help virtual learning, and suggest ways you can help support local schools.
Notion for Students and Teachers:
As our agency is in growth mode, we collectively decided to use Notion to organize our business. Notion is a single consolidated platform for all team members to utilize and collaborate together. Within Notion, there are many different standard templates available to help organize a business, and that’s when we came across the Education section of templates.
Teachers can use Notion to manage attendance, create lesson plans, calculate grades, and track student progress.
Remote learning can lead students to additional distractions since they are in a different learning environment. Students can use Notion to help them with overall task management, staying organized and focused. Notion has a template for note taking, gears students to stay focused with a daily agenda, and a section to manage and publish homework.
Student and Teacher’s Virtual Learning Tools:
Listed below are a few supplies to help both students and teachers with remote learning:
Blue Light glasses will help with staring at a computer screen all day and here are a few on Amazon and some additional glasses recommended by parents for kids
Mouse and mouse pads may be helpful for those who are not familiar with using a trackpad
Google chromebooks are a great option for those who need to purchase a laptop individually, and they offer educational promotional discounts
Supporting Education:
There are many ways you can give back to your local schools, however we chose to support the STUFF the BUS initiative in our area. This school year you can support the Stuff the Bus program by financially donating, or fulfill a wish list of supplies for schools in need in your local area.
Ken and Gene Neal founded BP Diesel in 2002 and started a line of high-quality custom-made truck parts: water pumps, brake lights, oil systems, engine parts and much more. Gene handled the website and got BP Diesel started selling online on Volusion, but by 2019 they reached a point in their growth trajectory where they started to look around for a platform that could fully support them. Gene found Shopify Plus and then reached out to Ambaum to get started on scoping out the development of a new custom theme and migrating BP Diesel’s data.
Scoping & Timeline
BP Diesel had recently completed a site redesign and was not looking for us to help them with a complete redesign, but they did want some subtle design help on their product detail page. The client did not have an aggressive timeline for completing the project, they wanted to get through their 2019 holiday busy season and launch in spring of 2020. From start the finish the project took 8 months, but the last 2 months the client was pushing back the timeline to get some of their internal processes lined up to go live. Our typical timeframe to move a customer from Volusion to Shopify is 4-5 months to complete the redesign, build, migration and any customizations we need to develop.
Custom Theme Build
Ambaum developed the new BP Diesel Shopify Plus site on top of Shopify Theme Kit. Shopify Theme Kit is a command line tool that manages its connection using a private app. We were able to leverage our proprietary custom theme that includes a lot of pre-built sections, snippets, scripts, icons, and much more. Our starter theme gave BP Diesel the benefits of a professional theme and they also got the flexibility of building everything from the ground up to fully accommodate the look of their new store. The new theme for BP Diesel included the following pages:
Home
Collection
Product Detail
About Us
Blog
Cart
Forms
Static Text Template Page
Mega Nav
Ambaum built the custom theme in a development environment and BP Diesel was able to view progress and give feedback through the process.
Product Migration
Ambaum helped BP Diesel moved their existing data from the last 10 years on Volusion to Shopify Plus. When the new site launched customers could login to Shopify Plus and see their past order data and view all historical information. In addition, we created a launch email to notify past customers about the launch so they could come check out the new site. The migration covered the following data elements:
Products
Customers
Orders
Product Review Migration
301 redirects were created for the oldVolusion URLs that pointed to the new URLs on the Shopify site
When we exported Volusion product data it was all lumped into one field and we needed to break it apart so we could setup products correctly in Shopify. Our team wrote custom scripts in PHP + we used the Shopify Product API to allow us to separate out products into tags, kits into tags, shipping to tags and products warnings to tags. Our script also allowed us to identify embedded You Tube and magazine hyperlinks so we could place them in Shopify metafields. The initial Volusion data migration did not bring over each order number and their ERP needed that so Ambaum setup a script to fix the relationship and update each of the orders with the proper number.
Core Charges & Kits
Some of BP Diesel are sold with a refundable core charge. When you add the product to the cart, you will see the core charge show as an additional product:
The customer is required to buy the core along with the part, but if they choose to the core can be returned to BP Diesel for a refund. We leveraged tags to make sure the approximately 10 products with core charges would show up on the product detail page and in the cart. Ambaum also used Ajax calls to show different cores that were buried in kits with multiple products.
BP Diesel sells kits which are bundles made up of many different individual products. On the product detail page of a kit we wanted to show each individual product that made up the kit, here is an example:
Also, when you add the kit to the cart it will show each of the child products. These child products are zero–dollar product variants that are associated with the “handle” or the URL slug of each product.
Filtering
BP Diesel wanted custom filtering throughout the site and wanted it front and center on the home page. The ability to shop by vehicle, shop by product, select make, select model and select year were critical filters as that is how their customers think when they are looking for a particular automotive part. Ambaum worked with Gene and decided to use the Automotive Part Search app, which powers that front make, model and year filter on the home page. We needed to create robust filters for each of the collection pages so we leveraged the Product Filter and Search app to give BP Diesel customers a number of advanced product filters. We were also able to make the filters unique to particular collectionsto give BP Diesel a lot of flexibility for all their custom automotive products.
If you are a merchant on the Shopify Plus platform there is a strong probability that subscriptions are a component of your business. We find that ~40% of the companies we support on Shopify Plus have subscriptions built into their operation and most of them are using the ReCharge app from the Shopify app store. You can find ReCharge in the app store and it is one of a handful of subscription apps: Bold Recurring Orders, Pay Whirl Recurring Payments, Spur IT Recurring Orders to name a few. Ambaum is a certified ReCharge App Partner and a Shopify Plus Partner, we have worked with many of the different subscription options and recommend Recharge to our clients for it’s ease of use, flexibility, APIs and Theme Engine which comes with the ReCharge Pro Plan.
How Recharge Works
When you setup ReCharge with Shopify Plus, you need to think about your sales funnel: home page – collection page – product detail page – cart – checkout and where along that path you give customers the option to subscribe to your products. The most common implementation is integrating subscriptions as a purchase option directly into your product detail page. We provide development support to Bulletproof Coffee and have helped them with their ReCharge implementation, here is an example of how they integrate ReCharge into their product detail page.
You can see that the subscription option is right next to the one time purchase, you may want to A/B test locating subscriptions above the one time purchase as the default option.
Checkout Process
It is important to know that when you use ReCharge and a customer moves from the cart to the checkout page that the transaction will be handled outside Shopify. If you are using Shopify Payments for your store and you sign up with Recharge you will end using another payment processor (most end up using Stripe which is what powers Shopify Payments). Recharge has mirrored the look and feel of the Shopify checkout page so from the customer’s standpoint it will be a seamless experience, but if you look closely at the image below, you can see that the URL has changed to checkout.rechargeapps.com from your primary URL.
Theme Engine allows you to fully optimize the customer portal to manage accounts and setup one-time product purchases for customers that already have a subscription. If your business is doing close to $100K/month in subscription revenue you should strongly consider upgrading to the Recharge professional plan.
You can see from this example that with Theme Engine you can make substantial changes to your ReCharge customer portal, further empower your brand and tailor to the needs of your target audience. For example, this version drastically reduces the number of clicks by allowing your customers to customize every aspect of their subscription in one page, whereas the Standard Portal will take them to different pages to perform certain actions. This is a critical area because small tweaks like this to your customer portal can lead to significant increases in your conversation rates.
Adding a one-time product
Allowing customers to add one-time products is a no brainer to increase your average revenue per user. This is a major benefit of upgrading to the ReCharge professional plan and is one of the primary reasons Ambaum gets involved in these customizations.
Things to Consider Prior to Customizing Theme Engine
This section is going to get into the details of how we approach a theme engine build, read on if you want to get “under the hood” of one of our projects.
When you are editing the ReCharge Theme engine code, here are some best practices that have helped us with our projects:
Do not edit the Base Theme directly. Theme Engine comes with a Base Theme that ReCharge provided with, this theme is considered stable and should be used as a fall back or for reference.
Avoid editing the live them, all work should be done via a development theme. It is best to duplicate the Base Theme and edit it to match your brand and the functionality you require.
Understand that theme engine is not the same ReCharge API, refer to Theme Engine doc to understand what’s doable. ReCharge tech support is also available via Slack and are very responsive.
Preview customer portals using test customer account, by default, customer portal opens a preview using an existing customer account, this makes testing hard.
To preview a specific customer account, follow these steps:
Preview a theme in Theme Engine
Recharge > Customers
Find and select customer (pic 1)
Mouse over the link icon next to customer name on top (pic 2)
Replace the token value in the preview URL with this value
Version control is highly recommended
It is best to have version control to keep track of changes made to the customer portal. Although inconvenient, a theme can be downloaded from the dashboard and push to a repository.
Alternatively, you can duplicate and name theme with appropriate work being done.
Maintain brand consistency
Here are list of things of things to keep in mind style wise when customizing the Customer Portal:
Typography – color, font size, font family for headings, and texts
Form fields like text input, radio button, select, quantity adjust
Buttons & CTA
Spacing
We hope this post gives you a clear understanding of the benefits of ReCharge and Theme Engine, for growing Shopify Plus brands this is a must!
