Porcelain Ceramics

Tile calculator

Always a handy feature on any tile site, we added a custom tile calculator so the customer could just enter the area that wanted to cover, with the option to allow some extra to cover any cuts and wastage. To further enhance the UI, we made sure that with each specific tile size, the area the individual tile would cover was displayed and also displayed the ‘per square metre’ price on the listing pages to make comparisons between styles easier.

Theme customisation

While the range of pre-built themes is excellent, there’s always room to make the front end feel more on brand and refine the theme to precisely suit what the site needs to do. We built some bespoke sections that fit into Shopify’s drag-and-drop content editor giving Porcelain Ceramics more flexibility in how they communicate with their customers. We also enhanced the product detail page UI, tightening up elements of the design to make the user journey more intuitive.

Stock availability

During testing we became aware that it was frustrating to require a specific number of tiles to cover a surface area and then try to add those products to the basket, only to find out there wasn’t enough in stock. It might be that all but one of the required tiles were in stock and if the customer had allowed a generous margin for cuts and wastage, then they could reduce their requirement to be able to complete their purchase.


So, to overcome this UI issue, we added a simple feature to display the number of boxes (or tiles in the case of the larger tiles) and this figure updated as the customer changed the finish and size options to reflect what they were interested in.

Sample ordering

It’s often difficult to see the subtleties in finishes from a photograph on a website, so Porcelain Ceramics wanted to offer free samples to help customers select the right tile for them. We developed a bespoke system that enables customers to add up to 4 samples, set at a special shipping rate which allows for these to be sent for free.

Data import

One vital area for this project was getting the product data into the site. As it was early days for this site, we didn’t develop a custom integration with the supplier to import the products and stock levels but instead, we worked with supplied spreadsheets to get them into a suitable format for Shopify to import the products. We also provided some rules and lookups in Google Sheets that could be used to take the daily stock update spreadsheet and convert that into the format Shopify requires for the inventory updates.
This means the client can easily update the stock levels each morning without the need for a costly bespoke integration at this stage.