A customer approached our team with the task of developing an online store for gadgets and electronics. The first thing our specialists did was identify the customer’s needs for functionality, animations, pages, and other aspects of the future site. After that, the developers started creating an online store. Let’s consider what we implemented.

Briefly About The Structure

Upon entering the site, the first thing a user sees is a large clickable banner with online store offers. If you click on it, you are transferred to the appropriate category. This is implemented by a slider, in which the client enters a link where the user will be transferred. Site structure:

  • The Header. In the upper left corner is a button with the customer service center number. This is a convenient option if the user views the page from a phone or tablet, as a call can be made instantly. We did this through an active button, that is, when the user clicks on the phone, the call program automatically opens. In the upper right corner, we have implemented buttons that lead to the pages «Payment», «Shipping», «Exchange and Return», and «Contacts». By clicking, the user will go to the corresponding section. Also on it are the company logo, drop-down menu «Goods catalog», «Search», «Personal account», «Saved products», «Comparison», and «Cart» buttons.
  • About the company. This section describes the company’s values, mission, and approach. Our developers have created a separate block for each short description. Above the three blocks are clickable buttons with links to social networks.
  • New offers. This block displays the latest models of popular gadgets, the admin panel of this section has a complete list of products, the client simply chooses the products he wants to have in this section. The customer can independently change the display order of goods.
  • Hot offers. Users are offered original gadgets and electronics at special prices.
  • Popular products. Positions most preferred by users are displayed. We implemented this block by analogy with the «New Offers» section.
  • Footer. The black element contains a set of points. Here are contact information, links to social networks, payment methods, a catalog with a list of categories, and buttons that lead to the pages «Payment», «Shipping», «Exchange and Return», «Contacts», and «User agreement».

All products from the new, hot, and popular blocks offered are clickable. The user does not need to look for the gadgets and electronics he likes in the catalog, he can buy them immediately.

Animation and other features

We understand that the site should be functional, visually attractive, and interactive. When you move the cursor over the products displayed on the main page, a rectangle is created around the item. If you hover over a category in the drop-down menu above, the selected section will be highlighted in green.

Google Maps integration is provided in the «Contacts» section. Our developers implemented it through a frame. If a user wants to visit a physical store, he can easily make his way there. A chatbot and a callback order button are integrated at the site’s bottom. We used the Binotel chat by inserting a script from the service.

Learn more about integrations and technologies  

An online store is a complex system because it must be convenient and understandable for the user. That is why we implemented the following features:

  • Category filtering. This function is implemented using AJAX technology. If, for example, a user enters the category «iPhone», he can specify the desired characteristics — color, model, memory capacity, etc.
  • Product search. If the user already knows clearly what gadget and model he wants to buy, it is easy to find it through the search. The function is implemented using AJAX technology and the FiboSearch – AJAX Search for WooCommerce plugin.
  • Product page features. We implemented credit purchases and one-click purchases. Such functions are implemented using PHP, JS and third-party banking scripts. In addition, we have implemented the «Notify availability» button if the product is temporarily out of stock. Thanks to this, the potential lead can come back later and make a purchase.
  • Integration of different payment methods. Pay for the purchase easily online with a bank card, using Apple Pay, Google Pay, Plata by mono services. 
  • Delivery service integration. Thanks to this, the user can buy goods with delivery to the door, branch, or post office.

Testing and result

Before the release of the site, our developers tested all buttons, functions, scrolls, etc. It is important to us to make sure that everything is working smoothly. IFRUKT is one of the projects we are proud of. We managed to implement a functional and convenient online store that satisfied all the business needs of the customer. Our client was completely satisfied with our cooperation — from the first communication to the website in live mode.