You’ve probably already heard of the academic painter Mirna Sišul and her playful work – if not through social networks where she is ubiquitous (because the audience simply adores her and does not hesitate to share her posts), then through other media, which gladly follows this young academic painter (one such article was recently published in InDesign magazine with Mirjana Mikulec – click for more).
The mirnasisul.com web store is specific in many aspects – from visual to functional, so we’ll take a closer look at the ones that we thought would be most interesting to you, the readers of our blog.
A few words on the foundation of the site
Mirnasisul.com comes in two flavors, or, languages – Croatian and English. We had two paths to walk here. The standard way which many in the WordPress eco system take, by using WPML as the base multilingual plugin, or to create a WordPress multisite, with a separate site for each language.
Now, we have a lot of experience with WPML, and to a certain degree, we like using it. But, it comes with a significant performance considerations. To put it bluntly, it absolutely devours ones hosting resources. Now, this is okay with classis corporate websites, where there’s not a lot of frequent and comprehensive content changes and / or a lot of visitors, because you can pretty much get away with it by heavily caching the site and optimizing scripts and stylesheets.
But, with an online store that has a lot of visitors, this is just too risky and can be quite expensive to run due to the vast resources needed to run it.
Now, setting up the site with WPML in terms of multilingualism is much more simple than setting it up as a multisite. But, performance is king.
So, we went with the multisite route. And, we haven’t looked back since. The site is responsive, stable, quick and easy to maintain, and it doesn’t hog the server’s resources, so it’s not that expensive to run.
Separate subdomain for the English version
The English version of the site is located at en.mirnasisul.com. Client can switch to different languages through the standard multisite dropdown without the need to log into the separate language version. Multisite offers the benefits of having the same site’s data inside a single database, but still having it run like separate websites, which makes localization much simpler and offers more possibilities and flexibility in terms of running the site in a full blown separate language version.
In simpler terms, everything you want to translate or modify is much more simple to do with a multisite, than on a WPML site. Of course, there are benefits with WPML that you just won’t get out of the box with a multisite setup, but it pays off in the end, through the website stability and performance.
Content and stock sync
Some of the site’s content needed to be synced, so we made it possible to sync:
- posts, pages and products
- product stock
The way this works is, the client checks an existing post to be duplicated into the second language, and then translates it on to the other multisite site.
As for the stock, it is reduced automatically when a particular product is purchased (products were synced beforehand between the two multisite sites).
Also, when client wants to copy the product from one site to another, it can do so by copying every bit of information from the original product (titles, content, images, attributes, variations, stock, etc.).
Different currency per site
The English version of the site displays the prices in EUR (€) (unlike the Croatian, which uses HRK (Croatian Kuna)) through a global website conversion rate, without the need for the client to enter prices manually for each product. Currency rates are updated automatically every day by using the quotes from ECB (European Central Bank).
Orders and invoices
We’ve created a custom invoicing solution for our clients tightly integrated with WooCommerce, to minimize the time needed for managing the website’s orders. The invoicing solution is created through the integration of TCPDF application and WooCommerce orders module.
The way this works is, when the website administrator switches the order status to completed, in the background a custom PDF invoice is generated and attached to the order notification email sent to the customer. Also, a PDF document is attached to the order in the order edit screen, so that our client can download the invoice for bookkeeping. The invoice is created as a custom designed PDF template in accordance with the Croatian tax laws and specifications from the government.
We’ve also localized this module, so that it generates invoices in Croatian and English both, with EUR as the currency on the English generated version. This saves our client the time needed to manually generate invoices and manually send them to customers.
The design is minimalistic, and the online store is very rich and easy to manage
When planning the design and concept of the mirnasisul.com online store, our clients (spouses Mirna and Marin Sišul) were very clear – the product has to be the main star, and they wanted to achieve this through minimalism and choosing neutral color palettes. They had specific wishes and requirements regarding the concept of the store and the content that should be on the homepage. Given that they already have extensive experience with online tools, and that the client is an already established artist with extensive knowledge about the preferences of their target group, their ideas were a great help and an important prerequisite for the future success of this web store.
As is the case with other projects that come out of our workshop, the online store mirnasisul.com is based on WordPress and WooCommerce, with a custom developed WordPress template – tailored to the needs and wishes of the client. Some of the visual and functional specifics of this topic are described below.
Management interface for homepage sections
When developing all of our websites, our main goal is to enable the client to independently manage as much of the content present on the website. Therefore, in most cases, we expand the native capabilities of WordPress CMS and, with the use of as few plugins as possible, create a framework for managing the content modules.
So, in the case of the mirnasisul.com online store, we made possible the editing of the content on the most important segments of the homepage – content slider, central content blocks and footer blocks.
Content slider on the homepage 
Content slider management console
Horizontal homepage sections
Additional featured homepage blocks 
Horizontal homepage sections management
Website footer
Homepage footer sections 
Homepage footer sections management
Extending the native WordPress capabilities to manage internal pages
Just like with the homepage, the client had specific preferences regarding the look of the interior pages. For example, the client wanted each inner page to have a header in the form of a full-width image, with a title and subtitle embedded in the image. WordPress does not have the ability to place a header image on individual subpages and archives of articles / products (categories), nor does it have the ability to display subtitles (it only provides a field for the title).
Therefore, it was important to program this design and functional element (positioning the image in the header, placing the title and subtitle on the image), and provide the client with the ability to upload images and text inside the header – for each individual subpage, but archive pages as well (categories of articles and products ).
The “About Mirna Sišul” page with custom header (click for the full view) 
Section management console for individual pages (click for the full view) 
Product category archive with custom header (click for the full view) 
Custom header management console for product category archive (click for the full view)
A departure from the classic WooCommerce product look
The classic WooCommerce product template is okay, but why not go a step further and make the product presentation more interesting and enjoyable to use. In the case of the mirnasisul.com web store, we did as follows:
- We dropped the standard side menu, which made the page feel crowded, and we “stretched” the information and elements across the entire width of the page.
- We transformed the classic WooCommerce tabs (cards), and introduced attributes and ratings (otherwise hidden in the tables), positioning them on the right side of the product page. Instead of the standard WooCommerce tabs, custom cards are placed under the photo gallery, which we’ll take a look at below.
Together with the classic product description, the product page should also contain other important information (about delivery, payment methods, etc.), we decided to create custom tabs (cards) and allow the client to easily manage their content. This way, the client can then define universal tabs for each product category that will be displayed on all products in that category.
Front end tabs 
Back end tabs management
Advanced functionalities for sales automation and resource savings
User registration and email marketing
When browsing the product, one of the things you will probably notice right away is the need to register – if you want to see the prices. No matter how dubious the usefulness of this practice is, requiring users to register in order for the price to be disclosed is a matter of the business policy of the mirnasisul.com portal, which has so far not proved harmful. What’s more, the online store functions as a platform for fans of Mirna’s works, who have no problem giving out their personal information so they can in turn see the price of their favorite artist’s products. When registering, the system asks them if they want to receive interesting news from the store via the newsletter, which many agree to, so their data is automatically stored in the database of the e-mail marketing service Mailchimp and then used during promotional campaigns.
This strategy is very simple, and extremely effective for building a database of contacts, which, given that it is a confirmed target group, represents a small fortune to the client’s return on investment.
Custom wallpaper pricing calculator
One of the novelties on the mirnasisul.com web store is the Wallpaper category (click to view).
These are products that are not standardized and cannot be presented as standard simple (see example here) or variable products (see example here), but the user must be allowed to define the desired dimensions and get automated price calculation (click for example).
To make this possible, we installed an online calculator and programmed a formula for calculating the price of the product depending on the square meters a customers enters. This happens through the entry of the width and height of the desired wallpaper. The entry of width and height is done in “cm” because the precision in the production of wallpaper is crucial here, but the calculation of the price is done in “m2” (squared meters). Programming this conversion was an additional challenge, which we successfully solved.
After entering the desired dimensions and calculating the price, the customer is redirected to the checkout where she/he once again sees which dimensions were entered, and receives the same information in an automated e-mail confirming the order. In the same way, the online store administrator is informed about the order and the entered dimensions, thus minimizing potential errors when processing orders.
Conclusion: An online store should motivate visitors to buy
Many wonder what it takes for an online store to be successful. The answer to this question can easily be given by the owners of the mirnasisul.com portal, spouses Mirna and Marin Sišul – who witness the usefulness of this tool every day. The answer to this question without much thought is: simplicity, clarity, pragmatism.
We would have a lot more to write about the mirnasisul.com online store. There are a lot of technical details that are invisible to the “naked eye”, and difficult for less technical readers to find interesting – no matter how fascinating they were. We believe that through these few paragraphs we managed to introduce you to the benefits of this store, which has found a path to the hearts of many of Mirna’s fans, and also an additional motivation for people across the region to buy her colorful works.
