Build A Box Custom Section

Project Goal

Help migrate WordPress website functionality to Shopify.

Macaroner sells Fancy French Macaron Cookies. They wanted to create a better user experience for the Build A Box option that lets customers select the Macarons they want in many box sizes and delivery options.

They wanted to reduce the number of steps for the customer to get their custom build a box into the cart.

They wanted the build a box component to easier to use on mobile.

The challenges were:

    • 4 different box sizes.
    • 3 Different delivery options: Shipping only, Pickup, Local delivery.
    • The delivery options needed to be very clear to the customer when selecting a box size.
    • Each Macaron needs to show a description that did not clutter the design.
    • The JavaScript needs to be very lightweight as to not affect the performance of the website.

Original Build A Box

Solution

Live Website

To make the Build A Box section more user friendly, I started with a mobile first approach, as that is the device most likely used to browse the website.

I choose to use horizontal scrolling sections so the choices and selection are easy to see without a lot of scrolling back and forth.

For the JavaScript functionality, I choose to use Alpine JS over jQuery as Alpine.js comes in at 21.9kB minified and 7.1kB gzipped, compared to jQuery at 87.6kB minified and 30.4kB minified and gzipped. Only 23% of the size!

For styling, I used Tailwind CSS and created cards that were Intuitive so the user can get information about a macaron or add to selections, or delete that selection if they wanted.

To achieve the different Shipping and Delivery options, we set up 3 different shipping profiles in the Shopify admin.

build a box custom section

Build A Box Mobile View

Build A Box Desktop View