Services

  • Sites
  • Content
  • Promotion
  • Apps
All services Payment

Search

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Development of the Online Store of Spears for Fishing

About the project and task

The Super Spear Shaft site is dedicated to underwater fishing spears and targets the Western market. The client came to us with ready-made layouts for the development of a functional, adaptive and multilingual online store. Did he get what he wanted? Let’s see.

Technological solution

CMS WordPress

So, the client went through the design development stage on their own. The technical implementation of the project depended on us: coding and functionality setup. And the force that made the site work was the WordPress CMS. This is the platform on which 43% of all sites on the Internet operate. And there are many explanations for this:

  • high security and performance,
  • customizable design and adaptability,
  • convenient content management,
  • multilinguality and multicurrency,
  • SEO-optimization and other opportunities to expand the functionality of the site.

In addition, the engine is completely free and, together with a variety of plugins and integrations, significantly speeds up development, and therefore reduces its cost.

Design and navigation

Main page in dynamics

Going to the main page, the user seems to fall into the depths of the ocean, where the sun’s rays fascinate with their play. This effect is caused by the video used as the background of the main page.

Along with the dynamic background, the marine logo and a spear along the entire screen emphasize the theme of the site and serve as additional reference points for potential customers. Therefore, passionate lovers of spearfishing seem to find themselves in their familiar environment.

The spear at the bottom of the screen also plays the role of a separator, under the line of which we see 3 main sections of the site: «FAQ», «Order now» and «Super Tips & Parts». These and all other sections are hidden in the burger menu, next to which there is a link to your personal account and cart. As you can see, it is almost impossible to get confused on the main page.

But despite all the simplicity, the site has a very unusual effect for an online store. The fact is that the client’s design did not provide for a page indicator, so instead of the banners familiar to users, we implemented a slide change of the main page by scrolling with automatic switching to the next screen after 10 seconds. Each of the slides illustrates the main type of product — spears, supported by text about their benefits.

On one of the slides, we placed the logos of the European Regional Development Fund and EAS, indicating that the Super Spear Shaft project received a grant for international patent protection of sports equipment. When you hover over the logos on the left, a transcript and more detailed information about the grant appear:

FAQ

The FAQ block is quite simple: it fits on one screen and is implemented as a drop-down list with unobtrusive lifting effects. Users can easily find the right question and click on it to get the answer:

Section with goods Order now

Actually, this is the main «showcase» of the online store with the main products  spears for spearfishing. Due to the fact that there are few positions on the site, this section fits on one screen. This was also made possible thanks to convenient navigation that allows users to immediately filter products by category. At the exit, the buyer receives the final price and goes to the cart to place an order:

Super tips & parts section with accessories

A small range of parts: tips, heads and adapters is also comfortably located on one screen. The section contains the names and prices of goods with animated buttons for ordering:

Responsiveness

Thanks to the adaptability of the WordPress CMS engine, the online store is perfectly displayed on all devices. All blocks and elements of the site automatically adapt to any screen size: from smartphones to desktop computers.

The only difference is that the home page slides on the mobile version only scroll when you swipe horizontally.

The reason is that the vertical swipe is not available in the mobile version: it is needed for scrolling, because all the content of the site does not fit on one screen. This is due to the small display of the mobile device. Hence the main rule of adaptive design — readability and convenience above all:

Functionality

Personal Account

The link to the personal account («Log in») is located in the header of the site, and when it is clicked, the user is offered 2 concise forms: for authorization or registration. The forms contain 1-2 text fields (including a credential authentication field) and a login button, as well as a «Remember me» checkbox and a «Forgot your password?»

Getting into the personal account, the client sees a minimalistic interface in the form of a control panel («Dashboard»), where they can easily manage their orders («Orders») and delivery addresses («Addresses»), as well as edit personal data («Account details») and leave the account («Logout»):

01

/ 04

Checkout

It is logical that ordering begins with the main showcase of goods Order now. We have already talked about this page and looked at convenient navigation with filters in the form of a spear constructor. However, in order to implement a seemingly simple panel, we had to make an effort and take into account many different variables (class, type of tips, length, diameter and cost). After the user has filtered the products and made theor choice, they click on the button and thereby add the purchases to the basket.

Shopping cart and shipping calculator

To bring shopping to its logical conclusion, the user clicks on the «View cart» link or on the cart button in the right corner of the site menu. On the screen, the user sees an interface with a list, quantity, price and total cost of goods. And not just goods, but along with the amount of delivery.

This was made possible thanks to the built-in calculator («Calculate shipping»), which prompts you to fill in a couple of fields, and then automatically determines the estimated amount of delivery based on the country of the recipient. As a result, the client receives the total cost of the order, consisting of the sum of the goods and delivery:

The cart can be updated («Update cart» button), or you can checkout the added products using the «Proceed to checkout» button and go to the order page.

Billing & Shipping Order Page

When developing the design, our client did not foresee how the checkout page would look like, so we took over this block of the site. The result is a fairly minimalistic page, taking into account the general style of the site:

The page contains an expanded form for filling in data, information about the order, as well as payment method items in the form of a radio buttons widget, which involves choosing one of 3 possible items. After filling in all the fields, the user clicks on the «Proceed to checkout» button and proceeds to pay for the order:

Payment system integration

Online purchases on the site require connection to the payment system. We implemented the e-commerce payment solution using the SEB banking system, as our client already had an account with this bank. After the payment is made, a notification about the completed order is sent to the buyer’s mailbox:

01

/ 03

Multilinguality of the site

Initially, the client needed to implement a multilingual site in 3 languages: English, German and Russian. However, it was subsequently decided to leave only English and temporarily hide Russian with the possibility of returning it in the future in a package with German and Italian. As a result, we implemented a language switcher, but due to the lack of translation of the texts in German and Italian, we temporarily hid it.

Results

Thanks to efficient cooperation, the expectations of the client for the development of the online store of accessories for spearfishing were more than justified. We developed the design in full accordance with the templates and brought the site to life with the help of the WordPress engine. The online store is responsive and convenient not only in making purchases for users, but also in managing for the client thanks to a simple and understandable admin panel.

Planning to bring your products online?

We will implement a functional online store with a unique interface from our designers or using WordPress templates that you will like.

Privacy Policy

0
Would love your thoughts, please comment.x
()
x