The Makr website’s shopping cart and checkout flow was powered by Shopify Plus and their Liquid templating engine. In order to complete the entire product experience, pre-purchase to post-purchase, the cart and checkout pages needed to match the existing Makr website design system. When a logo was purchased, the user would be then be able to immediately download the logo files on the Shopify Order Confirmation page.

I customized the Shopify theme and checkout template CSS to match the colors, fonts, and spacing that we established on the website. I refined the initial design of the cart page to provide more information to the user about their logo purchase, which increased conversion by 18%. I also modified the Order Confirmation page UI to include the download buttons for the digital logo files.

After the user has added a project to their cart, they have the option to either view their shopping cart, checkout, or keep shopping. The Shopping Cart page initially had only the default information, including a small thumbnail, name, and price.

From an initiative to increase conversion between cart and checkout, we theorized that at the cart page level users did not fully see the value of the logo package. I then explored ways to better communicate to the user what they were purchasing (for digital logo packages) and instill more confidence in the purchase. I listed the package contents and increased the size of the thumbnail preview of their logo, which shows the user what they were purchasing and which files they would receive.

I customized the Shopify Checkout flow CSS with the Makr brand colors and fonts. I also added a new section to the Order Confirmation Page, where the user can download their purchased logo files. I also designed and implemented the transactional email that the user receives when placing an order.