Creating a functional online store based on PlentyMarkets

In today's digital era, a well-functioning online store has become a crucial tool for companies looking to sell their products or services. For the Polish company Krosno S.A, we created a modern online store based on the PlentyMarkets system. As part of this project, a multilingual platform was developed to facilitate Krosno S.A's expansion into foreign markets. The main challenge was to create a precise reflection of the Polish company's online store. This involved a significant amount of customization that we had to implement on the ready-made PlentyMarkets engine. In the following part of the article, we will present specific obstacles we encountered along with the ready-made solutions we applied.

We will also provide practical tips useful for working with PlentyMarkets, highlighting the benefits of using a ready-made e-commerce engine. We will discuss key project aspects that contributed to achieving our client's business goals.

Client introduction - Krosno S.A.

Krosno is a Polish company engaged in the manufacturing and sale of glass products. It is one of the largest glass and crystal producers in Poland, and also exports its products to international markets. Additionally, Krosno offers services related to glass personalization, allowing customers to have individual engravings or logos printed on selected products.

Why PlentyMarkets?

PlentyMarkets is an e-commerce management software that integrates various business processes in one place, and additionally, it comes with a built-in content management system and the ability to create an online store.

Before starting the project, Krosno was already using PlentyMarkets to handle their sales. The company was keen on quickly launching online sales in foreign markets. Utilizing the built-in, integrated online store was, therefore, a natural step.

Building and managing an online store from scratch can be time-consuming and require significant resources. However, there are tools like PlentyMarkets that offer numerous advantages and conveniences for entrepreneurs. Some of these benefits include:

• Integrated sales system - the online store is directly connected to all modules of the PlentyMarkets system.
• Speed of implementation - building a store based on this system is much faster than creating it from scratch, saving time and resources.
• Built-in translation system - PlentyMarkets offers built-in translation tools, making it easier to create multilingual versions of the store and supporting expansion into foreign markets.
• Ease of changes - thanks to the user-friendly interface of the PlentyMarkets system, making minor edits to the store is relatively easy and does not require significant time investment.

Store implementation - practical tips

The work on creating the store revealed that, on one hand, using a ready-made solution significantly speeds up the process. On the other hand, some functionalities required by the client necessitated an unconventional approach.

‍

Challenges we encountered during the work:

• Lack of direct access to the store's source code for editing.
• Absence of accordion functionality.
• Complicated store configuration - non-intuitive interface and layout of settings.
• Limited capabilities of the store's layout builder - editing all visual elements of the store requires knowledge of HTML and Javascript.
• Errors in the store's layout builder.
• Difficulties in editing CSS and Javascript files.
• Limited availability of plugins for the store.
• Challenges in integrating with external services (e.g., Google Analytics, Google Tag Manager).
• Long update time for the store after making changes.

‍

Despite the above-mentioned challenges, we successfully completed the project by finding alternative solutions. As a result, we achieved our intended goals and created a functional online store for the client. In the following part of the article, I will describe the solutions that were implemented to overcome the key challenges.

Lack of accordion functionality

Accordion is another term for tabs or collapsible sections on a website. It is one of the more interesting ways to present content in the form of expandable items that reveal their content when clicked on a parent element.

The graphic design used in the store required the use of an accordion. However, the built-in store by PlentyMarkets only offered regular tab functionality. Due to the lack of direct access to the source code, a completely custom CSS/JS code was implemented to fully achieve the desired solution. The final result of the work can be seen in the screenshot below.

‍

‍Displaying an alternative product image on hover

By default, the system allows displaying multiple images in the product list, but to see the next image, the user has to click on an arrow. As part of the store implementation, we aimed for greater dynamism to capture the customer's attention - the alternative image was supposed to appear immediately upon hovering over the first image. To achieve this seemingly simple effect, we had to use a dedicated JS script.

Product list and displaying the second product image on hover:

Star symbol next to the product price

A similar solution was used to hide the star symbol and information about the delivery fee. By default, PlentyMarkets adds information about additional delivery costs to the product list. Unfortunately, there is no option in the system configuration to hide this information, so once again, we had to use a dedicated script.

Before our style sheet edits and after removing unnecessary information from the products:

‍

‍Product image zooming

On the product page, there is a large preview image of the product. Unfortunately, in the PlentyMarkets system, the only zooming available is triggered by clicking on the image. As part of the project development, our client required a quick image preview, as they wanted visitors to the store to be able to quickly view product details. Thanks to the script we prepared, we were able to create a solution that allowed zooming in on specific areas of the product image and effectively improved the product presentation.

‍

Result:

A way to quickly edit CSS/JS files and increase the available character limit for dedicated scripts.

‍

By default, the PlentyMarkets system allows for a significantly limited amount of space for dedicated CSS and JavaScript code. This can be achieved using the script below - as you can see, it is not one of the most difficult ones:

‍

let link = document.createElement(‘style’);

link.append(` Tutaj dodaj style `);

document.getElementsByTagName(‘head’)[0].appendChild(link);

‍

Another way is to place the file in the webspace of our project.

‍

How creating the store on PlentyMarkets affected the speed and quality of work

Despite several challenges encountered along the way due to the specificities and limitations of the PlentyMarkets system, we managed to create a fully functional, modern, and eye-catching store. The result of our work can be seen in the images below, as well as on the case study page: https://www.skmgp.com/pl/case-studies/krosno

Homepage:

Leveraging the built-in content management system in PlentyMarkets works best for stores with simple functionalities. If the system is already being used within the company and there's a need to enter the e-commerce market, this solution will work excellently. However, for more advanced stores, its design may become more challenging, cumbersome, and time-consuming.