Lushly Succulents

View Live Site View code

Lushly Succulents is a fictional Shopify store that specializes in selling succulents and indoor plants. I found that Shopify's starter theme, Debut, made an excellent starting point for the custom theme I created for this store. It is very unopinionated and easy to play around with. It comes with plenty of built-in settings to allow shop owners to easily create a beautiful store without touching a lick of code.

Debut Theme
Lushly Theme
Comparison of Debut starter theme vs. my custom theme

However, there were certain customizations I wanted to make where dipping into the customization settings was not the solution. Debut was missing a few sections that my fake client required: one for highlighting the latest products, one for displaying the team, and one for showcasing key contact information. I focused on creating these sections to fulfill the needs of my client.

New Arrivals Section New Arrivals Section

The New Arrivals section displays the latest 3 products from the 'New Arrivals' product collection.

Contact Section Client-side UI view of Contact section
Team Members Section Client-side UI view of Team Member section

The Team Member and Contact sections utilize "blocks" to allow the client to choose how many team members or means of contact they would like to include. The Contact section uses Material Icons to allow the user to pick and choose the corresponding icon per block.

I had a lot of fun using Shopify’s liquid and their built-in Slate grid system to build these custom sections. Using the schema tags to set up the customization options was incredibly enjoyable. It is both powerful, yet easy to set up. The options are endless – there are so many schema types that Shopify provides that allow developers to fulfill a client’s every need.

The schema code for the Contact section.

Another major change I made to Debut was adding product meta information to the product page, such as the type and the tags of the product. This allows users to get quickly get an idea of what kind of plant they are looking at.

Debut Product Page
Lushly Product Page
Debut vs. custom theme product page comparison

Overall, I really enjoyed this exercise. I'm enamored with Liquid and how easy it is to learn, especially for those who have experience with programming languages like JavaScript. Using schemas to create customization options for clients is by far my favorite thing about making and altering Shopify themes. I look to creating more themes in the future.