Case: How to create an online store for clothing and sports shoes from scratch

Table of contents
  1. Goals and objectives of the project:
  2. General description of the project
  3. What about SEO promotion?
  4. Choosing a CMS for the implementation of a project or on which platform to create an online clothing store?
  5. How did you create the Hype online clothing and footwear store?
  6. Site design
  7. Technical and marketing solutions
  8. What is there for SEO:
  9. What happened in the end

Goals and objectives of the project:

  1. Create an online clothing and footwear store with a user-friendly interface that allows you to quickly find and buy goods
  2. Implement additional functionality required for the sale of clothing and footwear
  3. Develop a website that will easily be promoted to the TOP of search engines

General description of the project

A branded online store of sportswear and footwear is a rather competitive niche, so it was necessary to implement functionality that would help reveal all facets of the product, show it from its best side, and answer the main questions of the buyer. Make a convenient selection of goods by color, size and other parameters, as well as make it possible to make a purchase as easy as possible.

What about SEO promotion?

An important criterion was the complete readiness of the site for promotion. It includes: correct technical optimization, implemented opportunities for working with metadata and texts in categories, products and filters.

Choosing a CMS for the implementation of a project or on which platform to create an online clothing store?

Initially, they tried to implement the project on Wordpress in another web studio, but since this CMS is intended mainly for blogs, the development of an online store on it caused certain difficulties. As a result, the project was never implemented.

After studying the market, SEO specialists from Netpeak recommended that the client pay attention to OkayCMS, developed specifically for online stores, which already has a basic set of necessary tools. The choice was between OkayCMS Pro (paid version) and OkayCMS Lite ( free platform for an online store ), but since further promotion was planned, we chose the Pro version, which has a built-in SEO module.

The online clothing store was launched within a month, already with internal optimization. Further, new improvements and improvements were introduced, including for SEO.

How to create an online clothing store from scratch

How did you create the Hype online clothing and footwear store?

Site design

The site design was transferred by our specialists from the template for "Wordpress", which the customer liked. At his request, individual additions to the template were made.

The site is adapted for all devices.


Technical and marketing solutions



An online store of clothing and footwear is, first of all, large and high-quality photographs where you can view the product from all angles.

LookBook is often used for better product presentation.

LookBook is a series of photographs featuring original looks created from clothing and accessories from one or more brands. Images are shown mainly on models, but sometimes they can only be represented by clothes and accessories.

In the Hype online store, an online lookbook was implemented from banners on which the product is presented on the models, and immediately in it you can view a preview of the desired product with a price and go to the card for purchase.

On the backend, this is implemented as follows:

In the admin panel, the necessary products are marked on the banner and links are inserted, which on the front turn into a preview of the product.

Correspondence table

The second most important factor for the buyer is the correct sizing, since this fear haunts all online buyers: "Will the purchased product fit me in size?" Each brand sews things in its own way, and often sizes are either small or larger. It is important to understand what to focus on.

To do this, the opportunity has been implemented in each brand to add its own dimensional grid along with a correspondence table.

Search by color

How often do you look for clothes or shoes of a certain color, for a certain outfit or image?

For the "Color" property, we have implemented the ability to select any color using the colorpicker. This property can be used in a filter. To generate a URL for the filter page, you additionally need to enter a color name.

Choosing a color in the product card in the admin panel:

Color display in filter:

Such functionality helps not only to select the product of the desired color, but also to create CNC filter pages with low-frequency queries to collect target customers.

Buyers typing in the search: "Turquoise Sneakers", will receive exactly the page with the products of the desired color, and not the category page, where there are models of different colors.

Quick purchase from the list of goods

When the buyer sees the right model and the right price, he is ready to buy the product right away, and he needs to be given the opportunity to do it as quickly as possible, without unnecessary transitions.

We have implemented the ability to quickly purchase from the list of products on the main or in a category. When you click the "Buy" button, you are prompted to select the desired size and the product is sent to the basket without going to the product card. If one size is available, then clicking on "Buy" immediately opens a pop-up basket with this product.

Discount percentage calculation

Each item can have an old and a new price. For example: the price was $ 100, they made a discount and now the product costs $ 80. On the frontend, this is displayed as a crossed out old price and a new price in red next to it.

For the online store of clothing and footwear Hype, the automatic calculation of the discount based on the old and new prices has been improved. This is a good marketing ploy that allows you to visually see the savings and assess how beneficial it is for you.


The category pages display all the models that are in the current section. On the side there is a filter and a catalog, with the help of which you can conveniently select the desired parameters of goods, such as:

  • The size
  • Color
  • Brand name
  • Collection
  • Price


All filters form pages available for indexing and promotion by low-frequency queries such as category + brand, category + color, category + size.

For example: Sneakers man size 40

When you select a filter, meta title, h1, description are automatically generated.

For categories, products and single filter pages, it is possible to set metadata by templates.

Card Product

Here the emphasis is on large photos from different angles for product presentation. When you hover over the photo, we implemented a zoom that shows the original image.

Product characteristics are displayed to the right of the main photo. In the administrative panel, you can make any product property a link to the corresponding filter. This solution makes it easy to make linking between the desired pages. Also, the buyer can choose for himself a product that is similar to the one being viewed with certain parameters. This will make it easier for himself to find and choose the right position. This solution is useful for both SEO and website usability.

Below there is a block of recommendations, which includes products from the same category, the same brand.

Convenient checkout

Most importantly, the ordering process takes place on one page.

The logic is structured as follows: after choosing the city where the buyer is located, the delivery and payment methods available for this city appear.

The popular in Ukraine delivery method by "New Mail" through the API has been integrated. This allows you to select the city and the desired branch.


Language versions of the site

The site is available in two languages: Russian and Ukrainian. In addition, it is possible to add other language versions.

What is there for SEO:

  • Automatic filling of metadata in products
  • Automatic generation of filter page metadata
  • Ability to add a description on any pages, including filters
  • Actual at the time of formation of the sitemap.xml
  • Editable from the admin panel robots.txt
  • Convenient connection of analytics counters and other third-party scripts, online assistants, remarketing, Facebook pixel from the admin panel
  • Correct CNC shaping

What happened in the end

After the implementation of the main conceived functionality, the Hype online clothing and footwear store was launched. And today it has reached stable profit indicators.

Based on our experience, we can say that customers who want to have a good online store work on their projects after launch. In this process, there is usually an understanding of what else is needed for the effective operation of the store and what does not work. Only through continuous analysis, improvement and innovation can a successful business be built.

Work on the project continues today, gradually improving the store and its marketing performance.

Comments 2
20.09.2018, 17:17
20.09.2018, 17:16
Классный сайт. А можно узнать, кто разработчик?
Write your comment
log in
Download OkayCMS
version 4.2.1
Subscribe to the newsletter
You will receive a selection of useful articles on working with the site on OkayCMS, discounts on modules and templates