Contents of the case
Media
Initial data
Whole works
- /01Creating an online store with SEO in mind
- /02Migrating to another CMS from the old MODX
- /03Portal creation - landing page + catalog + online store
- /04Transfer of goods
Main objectives and strategy
The tasks facing the team
- Partial preservation of the authentic design of the old site.
- Creating prototypes for each type of page.
- Expanding the site structure with additional pages about the company.
- Developing the site structure through Brand – Collection – Product.
- Developing the look of the catalog through Collections and Products.
- Developing an online store with visuals similar to those in the catalog.
- Developing “standard packaging formats” for tiles linked to products.
- Developing functionality for linking products to images in the gallery.
- Development of a calculator function to convert the number of tiles, square meters, and packs based on packaging data.
- Development of a product card for “piece” products.
- Connection and configuration of SEO filters.
- Connection and configuration of functionality for feeds and primary analytics + e-commerce.
- Formulation of technical specifications for technical optimization + metadata generation.
- Formulation of technical specifications for website indexing.
- Transfer of part of the goods.
- Create 4 languages for the website – UA, EN, PL, ru.
- Additional configuration of website functionality depending on the viewing region.
- Form the work of the catalog, business cards, and online store through 1 database.
- Make a simple import of prices and promotions through a file based on existing offers.
Strategy and sequence of work
The strategy for working on this project was radically changed from simply copying and connecting a shopping cart to creating a separate internet portal with a business card-catalog and a separate online store on a subdomain. Therefore, the main areas of work on the final version of the website will be described below.
One of the most important tasks was to correctly divide the site into sections, organize advertising, search engine promotion, and initial optimization of the site for further SEO. This was the most difficult part, because we had to not only develop the store, but also correctly and logically divide the structure of the site so that the online store would be ranked according to its keywords and advertising would work there, while the main site-catalog would be ranked according to its keywords. All of this had to function as a single system from a single database. Therefore, the first thing that was done was to think through all the functionality.
Next was a series of important tasks related to the development of the page structure:
- products for the catalog and for the online store;
- categories in product and collection mode;
- collection and manufacturer pages.
All of this had to be developed taking into account the latest trends, competitors’ pages, and the necessary functionality for effective further search promotion, so that the number of revisions in the future would be minimal.
Separately, non-standard functional units were also developed:
- a calculator for m2-packs-pieces based on the data entered for the product;
- photo galleries with previews of related products – photo/price/name;
- functionality for standard packaging linked to the product;
- separate functionality was developed for products that were sold individually rather than in packs, such as tiles;
- and, of course, an SEO filter.
Based on all this, technical specifications for the programmer were formed, consisting of more than 50 pages purely on the functioning of the site + additional technical specifications for taking into account the nuances of technical optimization and indexing for 20+ pages.
What has been done
SEO at the development stage
It all started with analyzing competitors to understand the main trends in the niche. A very detailed briefing of the client was also conducted to understand what functionality should be on the pages and how it should work. Next, all recommendations were collected regarding the necessary blocks on all pages for promotion, their potential appearance, functionality, principle of operation, and formation. Based on this, preliminary mockups and black-and-white prototypes for all types of templates were created and sent to the designers for work.
The next step was to create technical specifications for the programmer for basic technical optimization. These technical specifications cover 90% of the main technical errors that we encounter on websites and that need to be taken into account and avoided on the new website — redirects, the formation and functioning of pagination pages, interlinking, and much more. Technical specifications for improving the indexing of the website were also added here—correct formation of the site map, internal linking, robots.txt, etc.
Next, work was carried out on forming the main tasks from the basic settings of the SEO filter according to the main parameters, compiling a list of redirects from the old site to the new one, and generating meta tags on the site for products, categories, and static filters.
A separate area of work was the formation of technical specifications for the functioning of the entire site. In fact, these technical specifications were used as the basis for combining the front-end and back-end. All page templates were described in terms of their functionality. All the necessary fields within the admin panel that are required for convenient administration and functioning of the site were described.
Design
The basic design of the site was taken from the previous site, which had a fairly modern and fresh design, as it was created not so long ago. However, the old design had a lot of non-working and outdated functionality that was unnecessary. Also, the current design did not have a large number of new pages and blocks that had to be implemented according to the new concept. By the way, some blocks were visually redesigned for more convenient perception.
First, a desktop version was drawn up with adaptability in mind—all functionality and animation were discussed. Then, a mobile version was created with maximum convenience in mind, specifically for ordering via mobile phone. After both versions were edited and agreed upon, an intermediate tablet version was created.
Layout
Based on the finished design, all template pages of the site were laid out with full animation and minimal transition functionality to reflect the primary functionality. Three dimensional screens were created and the entire design was adapted to non-standard screen sizes.
Programming and Back-end
Based on the finished layout, technical specifications for the functioning of the site, optimization tasks, etc., the site was implemented based on the OpenCart CMS.
The main and non-standard solutions during the development of the site were:
- Gallery images, to certain areas of which it was possible to link a product, and when hovering over the area, there was a small preview of the product with a picture, name, and price, so that you could immediately go and familiarize yourself with it. This functionality is necessary for those who want to buy “ready-made” solutions and not have to search for bathroom accessories separately and tiles separately.
- Since the store sells tiles in packs rather than individually, it was necessary to develop a function for converting the area of tiles into packs and individual pieces, and to calculate this correctly in the admin panel. But the peculiarity is that the product did not have any specified characteristics. The packaging characteristics were developed as a separate entity so that they could be assigned to many products and not have to be filled in over and over again.
- We also implemented a non-standard and interesting feature to display categories by product list and by collections to which these products belong. Functionally, a product catalog and a collection catalog were created using a switch. And all this is combined under one address, but taking into account all SEO requirements.
- And, perhaps, the icing on the cake was the development of a catalog and online store on a single admin panel with a single database, with the ability to flexibly manage products on both “sites.” That is, the actual database for both sites is the same, but the settings for each specific product can be configured to display and availability differently. Both sites also support 3 and 4 languages. The catalog/business card is available in Ukrainian, English, and German, and the online store also supports Russian (solely to organically and effectively reach people searching in Russian).
The table below shows the website’s ranking indicators for key queries, but it should be noted that after development, the website underwent initial optimization and content writing for 10-20 main categories. There was no other work on filling the site with reviews, purchasing links, or targeted optimization. Therefore, it can be assumed that the promotion of the site was independent.
Results
During the website development stage, comprehensive work was carried out taking into account SEO, design, and programming. First, an analysis of competitors and a detailed briefing of the client were conducted to determine the necessary functionality of the pages. Mockups and prototypes of all types of templates were created for further work by designers.
The design took into account adaptability for desktops, tablets, and mobile devices, and the interfaces were optimized for user convenience and product viewing. The layout was completed with full animation and preparation for interactive functionality.
At the programming level, non-standard solutions were implemented: interactive galleries with product links, tile calculation in packs and pieces, a combined catalog of products and collections, and a shared database for the catalog and online store with different display settings. Multilingualism has been added (Ukrainian, English, German, and Russian).
SEO at the development stage included the formation of technical specifications, redirects, site map configuration, internal linking, robots.txt, meta tag generation, and basic content optimization for 10–20 key categories. The rest of the content and promotion work will be carried out after the site launch.
| Options | To the online store | Six months after development | Difference |
|---|---|---|---|
| Ranked keys | |||
| Ranked keys | 0 | 9040 | +9040 keys |
| Keys in the TOP 3 | |||
| Keys in the TOP 3 | 0 | 578 | +578 keys |
| Keys in the TOP 10 | |||
| Keys in the TOP 10 | 0 | 1905 | +1905 keys |
| Keys in the TOP 50 | |||
| Keys in the TOP 50 | 0 | 6405 | +6405 keys |
After the website is launched, the main focus will be on improving its effectiveness and attracting targeted traffic. The following is planned:
- Filling the website with optimized content – creating texts that meet SEO requirements and user search intentions, updating product and category descriptions, adding relevant keywords.
- Refinement of technical aspects – checking redirects, internal linking, loading speed, micro-markup correctness, and other parameters for smooth website indexing.
- Link building – working on the website’s authority through external resources, which improves its position in search engines and increases user trust.
- Working with rankings in LLM and AI services – optimizing content for display in generative search engines, recommendations, and AI reviews.
- Blogging – regularly creating articles, reviews, and useful materials to support organic traffic and expand thematic coverage.
As a result of these comprehensive measures, we expect to increase the visibility of the site, attract more targeted traffic, and, as a result, increase the number of orders and sales.
