The Giftery Box

Project Highlights

• Full product customization
• Slide out cart
• Instagram feed
• Several product template options
• Shipping date picker
• Pop-up newsletter signup/announcements 
• Grid collection display
• Customizable pages

Project Challenges

• Product customization
• Order tagging
• Minimal amount of app integrations
• Avoid extra costs as necessary

Details  

The client requested a slide out shopping cart, full product customization including the option to choose a shipping date, order tagging, and a minimal use of third-party apps. 

The Finished Product 

We decided to use a base theme provided by Shopify for free in order to keep development costs down.

Slide out cart

 

Product customization accordions

Each product allowed for many customizations. We decided to handle these options with accordions. Customers could choose a card, included add-ons, and even a preferred shipping date. Purchased add-ons were also available, which changed the price of the product. We handled this change in price with product variants. These options were editable from the admin screen.

Shipping Date picker, configurable in Shopify Customizer

Each product included the option to choose a preferred shipping date. I was able to create a custom section for the store owner to configure shipping options such as processing time and dates and days to be disabled from the datepicker. All without an app!

Multiple products per order

This was actually a difficult task, since most third-party apps that allow for product add-ons will only allow one item in the cart at a time. We decided this would be too inconvenient for the customers, since they would most likely wish to buy more than one item in a single transaction. I solved this issue by tying all of the customizations to the product. That way, the options were not assigned to the cart, and there could be multiple products with different options selected. At the time of this project, the only apps available limited the user to one product. So this feature was quite an undertaking with no apps required!

Order Tagging

The store owner wanted fulfillment to be as seamless as possible, and requested the ability to filter orders based on when the orders would be shipped. I was able to accomplish this by adding order tags to orders when placed by the customer. These tags could then be used to filter from the orders admin screen. This was possible thanks to a free app.

Horizontal scroll Instagram section and Rewards app

Some custom styles were required for the Instagram feed. We also integrated a rewards app. 

Custom pages

Rearrange blocks on any information pages, similar to the way Shopify sections are configured on the home page. This feature was created before Shopify allowed for blocks to be rearranged on pages other than the home screen! At this time, all pages on the store that were not the home screen had static sections, meaning a developer needed to edit theme code whenever the store owner decided to move a video section or heading around. 

 FAQ section, configurable and mobile-friendly.

 This FAQ section is configurable as a custom section in the customizer.

Tutorials and Walkthroughs

I also provided the owner with a manual to reference when adding new products, editing settings in the customizer, viewing order tags, adding collections, and even setting up MailChimp for newsletter and marketing.