Leaf’d Box

Fully Custom development from PSD
Project Name: Custom Development From PSD

Work Outline

The Story Behind

 Leaf’d Box’s mission is to make gardening fun, easy and accessible for those new to the gardening world. They provide healthy seeds and specialized knowledge to grow them with all the supports needed to prepare a beautiful and healthy garden. 

Mr. Robert, the founder of Leat’d Box from California, came with a premade PSD theme design to develop an online store to make their products and services available for others. And we took the challenge to get his plan into action. Below are the steps we took: 


Home page: 

The home page is the most prominent page of any website, and it has the biggest impact on the conversion rate.

Robert and his team worked pretty well on how the home page should look. As it’s more of a service based rather than product based ecommerce website, we used a manual image slider that best describes their works. They described how they work and their offer packages came after. Then there are some knowledge tips on gardening with a very helpful chart called crop chart that describes the timeline of growing plants.


Collection page / Shop page:

Shopify collection page is perfect for displaying items that are only sold as part of a collection, so customers can easily view everything related to a particular set of products.

As Leaf’d Box sells plants and seeds packages and provides the services to grow them, they have divided their offers into categories and subcategories and showed them as well. 


Product details page: 

A product page in Shopify is the main page of your store. It’s your chance to showcase your products and sell them to the world. The page is the place that customers go to when they’re looking for a product to purchase.

For this site, as the product is plantation related, it needed more explanation in the product page section and Leaf’d Box team worked hard on that. They have accommodated all the information like size and quantity, plantation instruction, shipping procedure, price and billing, pause or return policy, gift cards and the rest covered by frequently asked questions (FAQ). They wanted only the add to cart button in the product page and you  can buy when you are done with selection by clicking the cart logo on the right side of the menu bar.   .


PSD to Shopify Theme Development:

From time to time, someone may need to create a custom theme for their online store based on the product type they sell or their business plan. You may want to consider using a PSD theme for this. A PSD theme is a design document that you can actually use to design your store. It’s sort of like a normal web theme, but it’s designed specifically for your store.

And the best thing is a PSD theme can be converted into Shopify using shopify theme development technology and we will do that for you like what we did for this website.


Section ready theme:

At a high level, sections are modular components of a Shopify theme that merchants can customize. Sections contain content and settings for specific areas of a Shopify store, such as the basic elements of a product page, or a slideshow component. Within these sections, developers have access to a range of different setting types, from text inputs and image pickers, to custom HTML and menus, that merchants can customize from the theme editor and populate with their content. 


Mobile responsive Theme development:

People are spending more time using mobile phones than doing other things these days. So whenever you are thinking about going online you must think about this device. In the same way, one of the most important decisions you need to make for your online store is to create a mobile-friendly design so that it can respond and adjust to different ranges of devices and screen sizes.

Shopify has all the functionalities to make the websites mobile friendly and obviously you can rely on us for that. 


Custom Slider section:

Sliders are often found on e-commerce sites despite some of its drawbacks. They consist of a series of images or other media elements which can be scrolled across and displayed that helps showcase your products or services. 

A business like Leaf’d Box could have used a slider in the homepage header but they did not want to. Instead they used a carousel in another page dedicated to show their works and we appreciate that and we will explain that in a later section of this writing.


Quick view:

Quick view is a shopify supported app that comes with some special features that helps to engage shoppers and drive them to action. With the help of the App, shoppers can check product information by clicking the product preview without leaving the page. 

Well, we did not use this feature in this website as there are not so many products to display and customers can easily browse through the products in a short time.


Cart Drawer Functionality development ( which called ajax add to cart ):

For any online store, cart drawer functionality is a must to allow customers to continue shopping without paying each time they pick a product. You can use one of the many cart drawer apps that works fine with shopify.

We used one for this store of leaf’d Box.  


Product page Color swatch, Size variant:

When a product comes in more than one option, variants like size or color helps to order for the right product the customer wants. What should be the variants depends on the product type. 

For Leaf’d Box, product type and services they provide did not require the variants so much and they decided to use only the size variants for some of the product packages for now. 



Product image carousel on product page:


When a product has a large variety of images you’d like to show customers or a service has to show how they work, a carousel is a way to organize those images into a slideshow, or a long vertical strip of images where the show never stops and revolves automatically.

We have used a very nice carousel that demonstrates how leaf’d box works. 



Sometimes it might be a bad idea to use a carousel, because it distracts the customers in other directions than to convert them. 


Quick check out button:

Many customers abandon their purchase just because the check out process is way more complicated. A quick check out process is very important for conversion. We always suggest our clients to keep a quick check out button and insist on keeping the process simple.


Product page Tabs option:

Product page is actually the most informative page on the store that answers a lot of questions that a customer is probably going to ask. So, with product page tab options we can easily organize various necessary information for customers to help take decisions and forward them to conversion. 

Tab option in the product page reveals the information under the tab when customers click it. Here on this website, we did not use any tab options rather we put the necessary information all together because Mr. Robert wanted the notes to be seen in the first place..  


Mega menu development without apps:

The mega menu is a feature of the Shopify e-commerce platform that allows for a large menu that can be used to jump directly to a section of your site without having to scroll down the whole page. This provides a consistent and clean look across your site and helps your customers make their purchase quickly.

As there are not so many products, we skipped using the mega menu on this website. 


Currency Functionality:

Shopify’s currency functionality helps sellers to sell beyond borders in any currencies. All you have to do is mention the currency name while setting up the product page. Unless you set up a currency it will take the shopify default currency and if you want to change it, you will have to depend on the admin to change it for you. 


Shopify apps integration:

Shopify is a leading platform for e-commerce businesses. They offer a range of complete e-commerce solutions that include store, store management , payment gateways, order management , marketing tools, and more. 

Beyond these facilities if you need further options of your choice there are multiple 3rd party apps that you can integrate to your shopify website. Besides, If you’re interested in customizing an app to fit your brand, we’ll be happy to help. 


Shopify subscription app integration:


Integrating the right apps on your online store can be a great way to operate your business seamlessly. These subscription apps enable you to collect payment, manage subscriptions, and manage recurring billing. Subscription is a great way to keep the customers loyal. You can make a discount offer for the customers who will subscribe to your store. A simple discount and save app integration in shopify checkout can do this job so easily for you. 

We have used one of these apps on this store.


Below are some of the most used apps that help increase conversion rate.


  1. recharge Subscription apps integration for monthly subscription services 
  2. Instagram feed integration with instagram apps 
  3. Wishlist apps integration 
  4. review apps integration 
  5. Klaviyo email popup integration