Element Eight: Shopify Storefront, Subscriptions and Customer Account for a Skincare Brand
Theme development from the client's Figma designs, auto-replenishment with Recharge and a custom My Account area
About the project
- Project: Element Eight, a skincare brand store on Shopify
- Industry: E-commerce, beauty
- Timeline: January – May 2023
- Technologies: Shopify, Recharge, JavaScript, CSS
- Team: Shopify developers and a project manager
Element Eight is a skincare brand with an online store on Shopify. Its own design team redesigned the store block by block in Figma, and it needed developers who could turn each block into working theme code, connect the apps behind the store and build a customer account area.
So the work had two sides: a storefront that follows a design that keeps changing, and features that touch money and repeat orders, such as subscriptions. We worked on it from January to May 2023, as developers working with the client's team.
What we delivered
THE CHALLENGE
- A redesign made block by block.
- Figma files that kept changing.
- Subscriptions and a customer account.
- Releases a few times a week.
THE SOLUTION
- Theme pages built from the designs.
- Auto-replenishment with Recharge.
- My Account on a restyled app.
- Test, staging and release steps.
THE OUTCOME
- A live Shopify storefront.
- Ingredients, FAQ and Press pages.
- Subscriptions on every product page.
- A custom customer account.
When the design keeps moving, the developers need a steady rhythm: a ticket, a test link, a review and a release.
How we worked
We started from a theme archive, because the store had no code repository, and began with a code review and a call about priorities. Three first tasks, a fix and two app integrations, went to the client in January.
After that, the client's product owner kept the tasks in a Notion board. For each block the client wrote a ticket with the Figma design and a spec, and we built it and showed it on a test link. After a review on staging, the client sent small fixes as new tickets until the block was approved.
The client also defined the release rhythm: launches twice a week, none on Friday, and a check of the key customer journeys on desktop and mobile after every release. Those journeys were buying on a phone, discovering the brand, the contact form and writing a review.
The storefront
We rebuilt the main pages of the store from the designs. The Shop All page got filters and sorting, and the best sellers come first. The navigation bar became a sticky menu on desktop and a burger menu on mobile with four entries. The homepage received new blocks and a responsive slider.
On the product page, we added the product video, cross-sell blocks, image swipe on mobile and reviews with a form for writing a new one. A newsletter pop-up, a pop-in for the 8-day program, coupon codes for its sale and a selection of a complimentary sample completed the storefront.
Content pages
The Ingredients page lets visitors search for an ingredient and filter the list by skin concern, from fine lines to redness. We also built the FAQ page and the Press page with its "As seen in" block, and moved the press content to the new page.
Each page followed the client's design, so the work included careful spacing, mobile layouts and the font sizes that iOS needs in forms, because smaller fonts make Safari zoom the page.
Subscriptions with Recharge
The store sells skincare that people reorder, so we connected auto-replenishment through the Recharge app. On the product page, a buyer chooses between one-time purchase and a subscription with a discount, picks the delivery interval and opens the details of the offer.
In the account area, links lead to the management of subscriptions in Recharge and back to the order history. The wording of the skip screen and the colors of Recharge pages follow the new design.
A custom customer account
The biggest part of the project was the My Account area. It covers login and password recovery with social login, a left navigation, a dashboard with the customer's details and orders, and a wishlist. The wishlist has a widget and a modal on the product page, and only logged-in customers can add items.
We built it on top of a third-party account app and restyled it to the new design, page by page. After the delivery, the client reviewed it in rounds, and we added error messages and validation to every form, the US date format, a redesigned password reset page and many typography fixes.
What turned out to be hard
- A moving design. The Figma files changed during the work, so we had to tell a real bug from a new design on every ticket.
- Browser details. Small fonts made iOS zoom the page, and checkboxes looked different in Safari, so we tested on the devices that the client listed.
- No code history. The store started from a theme archive, so we began with a review of the existing code.
- Many small tickets. Every reviewed block produced a batch of pixel-level fixes, so we kept the releases frequent.
- Third-party apps. The account and subscription apps come with their own templates, so we restyled them page by page.
Result of the project
The Element Eight store runs live with the new storefront, content pages, subscriptions and customer account. Auto-replenishment is part of every product page, and customers manage their subscriptions from their account.
Looking for a Shopify developer? See our e-commerce development services or read how we built an app that sells NFTs inside Shopify. The subscriptions run on Recharge.
Need developers for your Shopify store or an app inside it? Tell us about your task.
SEE MORE OUR CASE STUDIES
Contact us
Please fill out the form, and we will get back to you once your request has been processed.
You can also send your request directly to our email: info@24gen.space
We will respond as soon as possible after receiving your message.