Development of dietary supplements and sports nutrition online store on Shopify
Customized the Shopify theme, integrated advanced features into the site and helped the client bring the business online
Healthcare, Sports, Trade
UK
2023
About the client
A client is the owner of a store chain selling dietary supplements, sports nutrition, and fitness accessories. The business was developing well offline, and the client decided to create an online version of the store. The target audience consists of athletes, fitness enthusiasts, and people who engage in sports and take care of their health. They need high-quality products for training and maintaining an active lifestyle.
The client wanted to go online in order to attract more customers and expand the brand’s geographical reach. He independently created a website on Shopify using a ready-made theme, but faced some issues. The website looked outdated and lacked style, and the platform’s limited features prevented him from implementing ideas that could set his store apart from competitors. Therefore, he needed a team of professionals to create a unique solution.
The client reached out with a request to revamp his Shopify online store. What should have been done:
- Refine the design of the chosen theme, move away from the standard template and create a unique design for the brand.
- Expand the functionality of the site, since the standard Shopify tools did not allow the necessary functions to be implemented. This required customization of blocks and plugins.
- Create an interactive calculator that would calculate the user’s calories, proteins, fats, carbohydrates and give recommendations on choosing products from the catalog. This functionality will help differentiate the store from competitors and create added value for users, enabling them to make more informed decisions.
Solution
1. Update the website design to align with the client’s expectations and ensure it stands out attractively among competitors.
2. Adapt the ready-made Shopify theme, creating a unique and modern interface based on pre-designed mockups.
3. Develop a custom calories calculator with product recommendations based on the user’s goals.
4. Integrate external services for payment, delivery and customer management. This made it easy to scale the business and offer a convenient service to its users.
This project was not just the fulfillment of a standard order. The client contacted us after he tried to create a website on his own on Shopify, but he was not satisfied with the result. We realized that it was necessary not just to change the site, but to create a unique product that would stand out from the competition.
We paid special attention to creating a custom design. Despite the many ready-made themes on Shopify, the customer wanted something special to highlight the character of their sports nutrition store. We took a ready-made theme as a basis, but redesigned it, creating a new user-friendly design.
The most difficult part was the introduction of additional functions — a sports nutrition calculator, notification system, logistics and payment systems for the UK and Europe. There were some technical difficulties, especially with synchronizing data with CRM and setting up pre-orders, but the team coped perfectly. It is important that the interaction with the client was very productive: we managed to build a trusting relationship, which allowed us to quickly make decisions even on the most difficult issues.
This project was an opportunity for us to show that working with platforms like Shopify can be creative and deep.
Implemented features
Product catalog interface
Developed a user-friendly and intuitive catalog
Products are displayed as tiles with key information: image, name, price, rating and number of reviews, as well as a button for quick add-to-cart. This allows customers to quickly find the right products and make purchase decisions.
Each tile links to the product detail page, where users can find a full description, specifications, and usage recommendations. To customize the catalog, we used the Liquid language, which allowed us to flexibly customize the interface and functionality to the client’s needs.
Detailed product card
Made an informative product card
We added the following elements to the card:
- product image;
- options for choosing variations (e.g. sizes or flavors);
- a button for quickly adding an item to the cart;
- product description, its composition and recommendations for use;
- a block with reviews and ratings that helps customers evaluate a product based on the experience of others.
To customize the appearance of the product page and integrate additional elements, we used custom Liquid blocks.
Product comparison functionality
Added product comparison
The user can add several products to the comparison table, where they are displayed by key parameters: description, weight, price, composition and other characteristics.
This format allows you to evaluate the differences and choose the product that best meets the requirements.
To customize the functionality, we used JavaScript to create an interactive table and Liquid for integration with Shopify.
Favorite products in personal account
Added the “Favorites” feature
With the “Favorites” feature, users can save products they like in a separate list.
These products are displayed in the user’s account, where customers can return during their selection process, compare items from the list, or come back later to make a purchase.
Product filter in the catalog
Developed a multi-level menu and a filter system
The menu is located on the side of the page and makes it easy to find the right products, excluding unnecessary ones. It includes filters by brand, price, weight, as well as protein categories (e.g. whey, isolate).
Additionally, filters have been added by taste preferences (chocolate, vanilla, banana) and countries of production (USA, UK and others), which makes the search more accurate.
To implement the menu, we used JavaScript and the Shopify API for dynamic data loading.
The checkout page
Set up a quick checkout
After adding products to the cart, the user goes to the checkout page, where the checkout takes place. The selected products are displayed on the right, and on the left there are fields for entering contact information, address and delivery method.
If the user is logged in, the data is filled in automatically. There is a “Pay” button at the bottom of the page, and after clicking it, the buyer gets to the “Thank you” page. An order is created in the personal account, where the user can track its status and delivery.
User’s personal account
Developed a personal account
Users can manage their data and purchases through their personal account. In the account users can change personal information, password, add or remove delivery addresses and cards for quick order processing.
It is also possible to track the status of current purchases and view the order history in the orders section. In a separate tab, users can save their favorite products, as well as see information about bonuses and quickly log out of their account.
Payment systems available for Shopify
Set up integration with payment systems
Various payment methods such as Visa, Mastercard, PayPal, Apple Pay, Google Pay and other local systems (for example, Klarna and iDEAL) are easily connected on Shopify.
All systems comply with security standards, which guarantees the protection of customer data and the correct execution of financial transactions.
Implemented delivery services
Integrated the website with logistics services
When placing an order, the buyer can choose one of the delivery options:
- Royal Mail, DPD, Hermes;
- UPS — for the UK, DHL or FedEx — for international shipments.
After placing an order, the customer receives a tracking number and can track the parcel through his personal account.
The HubSpot CRM interface
Set up integration with the CRM system
We have set up integration with HubSpot CRM to automate customer management. With this integration, order and customer data can be transferred to the CRM, simplifying the creation of marketing campaigns, personalized offers, and analysis of customer behavior.
The seller will now be able to better manage contacts, organize automatic mailings and offer promotions, which should increase sales and improve the quality of service.
Store on mobile devices
Optimized the store for mobile devices
The interface adapts to the screen size, maintaining ease of navigation and fast page loading.
Customers can comfortably search for products, view cards and place orders on smartphones and tablets.
The bonus program page
Implemented bonus programs and discounts
We have added a system of bonuses and discounts to encourage regular customers and attract new ones. Users can accumulate bonus points for purchases and use them to receive discounts on the following orders. The system also allows you to hold promotions for certain products or groups of customers.
Email notifications
Implemented a notification system
It is needed to keep users informed about the status of orders and store news. After placing an order, the customer receives notifications by e-mail or SMS with confirmation and updates on the status of the order.
The notification system also informs customers about new promotions, offers and the arrival of goods from favorites to the warehouse.
Choosing the language and currency on the website
Added several languages and currencies
The client went online to sell his product all over Europe and the world. Visitors from different countries can choose the interface language and currency (pounds, euros, dollars) through the menu on the page.
The exchange rates are updated automatically, and the payment system supports multi-currency transactions, which makes purchases easy for an international audience.
A block with recommendations
Personalized product recommendations
We have implemented a system that analyzes user actions on the site and offers suitable products. The algorithm takes into account previous purchases, viewed products and added to favorites in order to offer products that may be of interest to the user.
Customer reviews
Added the ability to attach images to reviews
Now users can not only write reviews, but also upload photos of purchased products. This helps other customers to better evaluate the product before buying and increases confidence in the product.
During development, we used a combination of tools: Liquid — for displaying reviews and JavaScript — for uploading and displaying images.
Special offer
Implemented dynamic pricing
The dynamic pricing system automatically changes the price of goods depending on demand, promotions or availability of products in stock.
This helps the seller to flexibly manage prices and offer relevant offers.
We used Shopify Scripts to set up automatic pricing and the platform API to display up-to-date data.
Reservation of goods upon arrival at the warehouse
Added automatic pre-order reservation
A function for products that are temporarily out of stock. When the product goes on sale, the buyer receives a notification, pays for it, and the order is sent to the customer. This allows the client to keep sales even if the product is out of stock.
During development, we used the Shopify API to process orders and notifications and webhooks to automatically track the status of goods in stock.
Calculator with recommendation engine
Developed a sports nutrition calculator
The calculator helps users select products based on their goals. The user enters their gender, height, weight, activity level, and goal (weight loss, weight gain, or maintaining fitness). Using this information, the system calculates the daily requirements for calories, proteins, fats, and carbohydrates. Afterward, the tool automatically suggests products from the store’s catalog that align with the user’s objectives.
The calculator is placed on a separate page and integrated with the product catalog. Custom JavaScript code was used for implementation, along with the Shopify API to fetch and display real-time data.
Stages of work
Analytics
We conducted an analysis of competitor websites and selected several references that helped set the direction for development. The main focus was on improving the user experience so that the store stood out from the competition with simple navigation and convenience of shopping.
Design
The client shared his vision of the design, and our design team conducted several rounds of approvals to take into account all the wishes. As a result, a custom design was developed, which was adapted to the existing Shopify theme.
We have added unique blocks and pages, while maintaining compatibility with the platform. This made it possible to create an individual interface based on the capabilities of the chosen topic, which accelerated the implementation and made the project more time-efficient.
Frontend
We have transferred the developed design to the Shopify theme, using standard blocks and custom elements of the project. To do this, we changed the template source code to Liquid, which Shopify uses to customize themes.
Some elements, such as product cards and a sports nutrition calculator, were made from scratch, which added uniqueness to the site and made it convenient and interesting for the user.
We used JavaScript and CSS to customize standard components and smoothly implement custom elements, which helped maintain a balance between the original design and the stability of the platform.
Backend and integrations
We have configured and integrated features that have expanded the capabilities of Shopify and supported the unique functionality of the store. Since Shopify limits the possibility of changes in the backend, the main tasks were solved through API integration and application configuration.
We integrated payment services and delivery systems, which provided convenient and secure order management. For automatic pre-order and dynamic pricing, we have developed applications using the Shopify API. This made it possible to process orders in real time and flexibly manage prices.
We linked Shopify with the HubSpot CRM system to automate the transfer of customer data and their purchases.
These solutions allowed the customer to effectively manage the store and expand its functionality without the need for deep changes in the Shopify base code.
Testing and content filling
We conducted a full check of all the functions of the online store. We tested standard Shopify features and custom solutions, including a pre-order system, a sports nutrition calculator and dynamic pricing.
We started with manual testing, checking various user scenarios: placing an order, working with a catalog, a calculator and a filter system.
We conducted a load test to ensure the stable operation of the site during peak visits, especially during periods of promotions and sales.
After the testing was completed, the store underwent final improvements, and we handed over to the customer a fully finished and tested product ready for launch.
Results
-
Brought the business online
We have successfully launched the project online. The client’s products are now available to a wide audience in the UK and beyond.
-
Sales increased 2.5 times, and the average check increased by 30%
The store is user-friendly, with personalized recommendations and interesting features that have improved customer interaction.
-
Business scaling
The client is going to enter new markets and add even more categories to the catalog, and we will help him with this.
Did you like the case?
Contact the manager to discuss your project
