Shopify Development

photo_2022-04-18_11-55-33
OrbitSoft
  • Score Awaiting client review
    n/a
  • Date Published
  • Reading Time 9-Minute Read
kinder-comfort-1029x1002-1-1

How OrbitSoft remade an online store on Shopify for a German company

The Client

This German company sells furniture for children’s rooms on the Western European market. The company had an online store on Shopify, but its managers didn’t like it. The design was outdated, it was inconvenient to fill out product cards, and there were so many products that it was difficult for buyers to find the one they needed. In short, the company needed some professional help with its ecommerce website development.

Why the Client Chose Shopify

Shopify is an online store builder and hosting platform with a paid subscription. The Shopify ecommerce development service offers many convenient tools for online trading by default. Additional functions can be found in annexes to the main system.

The client initially chose Shopify because this platform is especially popular in the US, Canadian, and European markets. The platform includes Shopify theme development and customization, great Shopify support, upgrade and maintenance services, and Shopify migration services, as well as the following advantages:

  • It’s friendly with American services by default: it easily integrates with Facebook and Instagram, and is well-indexed by Google. There’s no need to hire specialists to drive traffic or for SEO optimization.
  • Product migration to Shopify is direct and no-nonsense.
  • For us, as a Shopify developer, the platform has many built-in tools for online trading, such as hosting, an SSL certificate for a secure connection, and a payment infrastructure in accordance with the PCI standard. There’s no need to access these features separately, which saves time and effort.
  • ecommerce development and ecommerce website design with Shopify don’t require deep programming knowledge. To create an online store, you don’t need a large team. On this project, we only needed a designer and a layout developer.
  • The platform has a simple and clear administrative panel. It’s easy for the client’s staff to work with.
  • The Shopify store is easy to scale. The service is suitable both for a small workshop with big ambitions, and for a huge hypermarket.
  • The Shopify website builder, Shopify app development, and Shopify integrations are straightforward and easy to accomplish as tasks.

Entrepreneurs trading in the territory of CIS countries might notice Shopify’s lack of built-in integration with the MoySklad and 1C systems. However, this isn’t a reason to give up on the platform’s benefits. If a company isn’t intimidated by the platform’s tariffs, an experienced developer can programmatically configure the necessary integrations.

The Challenge

Before starting development, we discussed with the client the design problems of the old online store, and their wishes for a new one.

  • The external design of the site was created a long time ago and is outdated.
  • Navigation suffered: there was no clear structure in the catalog; all goods were simply in one big group. In order to find the main product of the company — ready-made children’s rooms — a user had to first select the age of the child, then gender, and only then proceed to the selection of the collection. The more difficult it was for a customer to find what they needed, the more likely they were to abandon their purchase.
  • Cards of goods were not informative. The parameters were listed in solid text in a single window. This was inconvenient for the buyer to read the description, and made it difficult to choose a product.
  • We formulated the terms of reference. We described the stages of work, the functional structure of the new site, and designed a new, logical user path.

The old version of the main menu sections: Room for a child, Room for a teenager, Bunk beds, Beds-typewriters

The Solution

Redesigned Appearance and Navigation

In the new structure, products were divided into ready-made children’s rooms and individual pieces of furniture: beds, tables, chairs, textiles, lighting

Instead of just drawing a new kind of interface, we developed a design system for the client. This was an integrated approach to the design of software products, combining design and programming.

  • A designer created the main visual elements: the appearance of buttons, icons, panels, and other components of the interface using the client’s corporate colors, fonts, and logo.
  • The rules of application were described: where and how to use each element.
  • A developer recreated visual elements in program code, and formed a framework from them: a library of components in a single repository.

From such ready-made components, design bricks, you can assemble interfaces for a given product and any future, even with a different team, over and over again – for example, if a customer wants to expand the store or release an application.

The benefits of design systems are especially noticeable in large projects where many interfaces need to be designed. A traditional approach takes a lot of time for rendering layouts and programming. Errors inevitably appear in the process – for example, someone might miss the color of the buttons in an application, or someone on the site might miss the size of the fields, and so on. The development of a unified design system automates such processes, eliminates errors, and saves time.

In order for the client to see how an online store with a new design would look on different devices, we laid out static HTML pages. These pages were not connected to the server, but looked like fully-fledged site pages, ‘frozen’ at different stages of a user’s journey: choosing a product, send products to the shopping cart, placing an order, and so on.

After approval, we proceeded to the development of the design theme. The task was complicated by the fact that the old store had to keep working until the customer switched to the new theme with a new directory structure. To do this, we made additional temporary logic that ensured the continued work of the old store structure.

Redesigned Pages of Furniture Collections

It’s more profitable for a store to sell not just one piece of furniture, but whole rooms – that is, sets of furniture, lighting, textiles, and decor made in the same style; everything needed to completely furnish a nursery.

On the old site, the pages of the rooms contained only photographs, the cost of various configurations, and links to individual items from the collection. We added sections with text descriptions, a section with accessories from the collection, and the ability to upload a video about the room.

The basic version of Shopify doesn’t support so many extra fields, so we used a Custom Fields app. Shopify apps are plugins, add-ons that extend the functionality of the main service. Add-ons are created by third-party developers and uploaded to the Shopify App Store.

Redesigned Individual Product Pages

In the old version of the online store, product cards had to be filled regularly. The entire description was in one large field. It was cumbersome, and inconvenient for buyers to read. The client had to use lists to separate blocks of information from each other. Adding new products, and editing already created cards, slowed everything down.

We created additional fields using the same Shopify Custom Fields app.

  • We changed the logic of displaying delivery options and the availability of goods in the warehouse.
  • We added a section with PDF-documentation for goods – for example, certificates, and instructions.
  • We added a section with a video about the product, which can be downloaded from the company’s YouTube channel.
  • Dimensions, product characteristics, and customer reviews were moved to a separate system of tabs.

Feedback Page and the Ability to Design Landing Pages

Landing pages are needed when a company is promoting its products on social networks or search engines – for example, the company announces a sale for a specific furniture collection and talks about it using targeted Facebook ads. By clicking on the link, the buyer wants to see information about this particular promotion. Therefore, instead of going to the general catalog, the customer should go to a landing page – a page dedicated to a specific advertising campaign.

We added a designer for such landing pages to the admin panel. The administrator can choose a suitable template, arrange sections, customize them, and fill them with content: text, pictures, and goods from the store.

We also added an online customer support page. Previously, the company could only be contacted by phone or email. We designed FAQ sections, and Skype chat with a store employee.

Trained Store Employees

We prepared tutorials on working with the admin panel, added screenshots, and screen recording of non-obvious theme settings. At our meetings, we conducted express training for employees.

Results

The development of an online store for children’s furniture on Shopify took 25 working days. We achieved the following.

  • We made a design system that the client can use in the future to expand the store and develop additional services.
  • We created logical navigation, and optimized the product cards. The user journey has become clearer and easier, and this will help the store to increase sales.
  • We added a landing page designer. Managers will save time running advertising campaigns to drive traffic.
  • We created a feedback page. It will be easier for buyers to contact the store and solve their problems. This will increase both service satisfaction and repeat sales for the company.

The customer’s employees fill the new store with content: they update product photos, add images for categories, and fill in new fields and sections. Due to temporal logic, the old version of the store also works at the same time as the new one, so that the company can continue to take orders and make a profit. The customer will be able to turn off the old store as soon as the new one is ready.