Metropolitana, established over 40 years ago, is the national leader in flooring commercialization, continually incorporating new products to meet evolving market trends, services, and technologies.
Metropolitana specializes in consultative sales, assisting customers in identifying suitable products and quantities. The complexity of surface dimensions and waste from cuts makes accurate quantity estimation challenging.
With a strong customer focus on end consumers, companies, and architects, Metropolitana has earned a prestigious reputation for its customer service policies, after-sales support, and valued advice.
Metropolitana is dynamic in marketing, holding semi-annual mega sales and offering a variety of promotions and offers.
We were enthusiastic when Metropolitana decided to enter e-commerce, motivated by the company's reputation and project challenges.
Challenges included supporting a consultative selling strategy, catering to diverse audiences, maintaining a solid reputation, and managing a dynamic marketing department.
BigCommerce's flexibility provided reassurance. Scaffolding was mature and stable, with many initial challenges resolved. We aimed to demonstrate Scaffolding's value and test its architecture for a customized solution. These changes aim to make the text more concise and easier to read while retaining the original meaning and key points.
The theme: Scaffolding
Customized design
As a company linked to the decoration industry, the design of our site was a matter of special interest. From the beginning, it was evident that a custom design was necessary.
Additionally, due to our continuous marketing efforts, we anticipated that the site would undergo almost constant updates.
Knowing that BigCommerce periodically releases new versions of Cornerstone and that Scaffolding was continually evolving, our initial challenge lay in the site's architecture. We designed the architecture with a well-organized system of templates and components, ensuring that when new versions of Cornerstone and the Scaffolding base theme were released, any conflicts would be minimal and easy to resolve.
Now, two years later, we can confidently say that Scaffolding allows us to update both standard and customized versions safely and in minimal time.
Site: https://metropolitana.com.uy/
Surface to unit converter
A significant challenge for customers when purchasing these products is determining the quantity needed. Most products are sold in boxes or by linear meter with a fixed width, yet customers measure them in square meters.
To simplify the calculation and price understanding for customers, it was essential to develop a conversion system from square meters to boxes or linear meters. Additionally, displaying the price in square meters, along with the price per unit, was necessary.
The solution was implemented using product custom fields. Depending on the product, the store loads the appropriate conversion parameters. This allows customers to enter the quantity in square meters, and the converter determines the number of units needed. Alternatively, if customers choose to enter the units, the corresponding square meters are displayed.
Furthermore, using these conversion parameters, one of the Scaffolding Display Widget was configured to show the price per square meter.
Example: https://metropolitana.com.uy/pisos-de-madera/liston-h2o-piso-de-madera-de-6mm-resistente-al-agua
Highlight product attributes
To enhance the product descriptions, Metropolitana requested that we display icons on the product page to highlight key attributes. This way, customers can quickly identify important features at a glance.
Once again, custom fields proved invaluable. By adding a custom field named _badges (Scaffolding hides custom fields that begin with an underscore) to the product, containing the attribute names we want to emphasize, Scaffolding automatically searches the Image Manager folder for corresponding .png image files to display.
https://metropolitana.com.uy/pisos-de-madera/liston-h2o-piso-de-madera-de-6mm-resistente-al-agua
Automatic promotions and offers
The retailer conducts two annual promotions featuring discounts on virtually the entire catalog. These discounts vary, even among products within the same category.
BigCommerce's Automatic Promotions efficiently handles the application of these discounts by allowing rules to be defined for each discount.
The next step was to emphasize these promotions within the product listings. Highlighting the discount directly on the product is always more effective than using a banner at the top of the category page, especially when products in the same category have different discounts. Scaffolding's Display Widget made this task straightforward.
The third requirement was to create a landing page listing selected products grouped by discount range, which posed a challenge.
The solution involved assigning a template to a category. A new category template, called Subcategories, was added to Scaffolding. This template can list products grouped by subcategories. By creating a subcategory for each discount range and assigning the relevant products, the desired landing page was achieved.
This listing of products grouped by subcategory has multiple uses. It allows for an organized selection of products on the same page, enhancing product discovery and improving the overall user experience.
FIG: Screenshot of subcategory page with discount range
Show variants on category pages
Most products come with various layout options. Displaying these variants directly on category pages or within product listings enhances product discovery and improves user experience by eliminating the need to enter each product page to view available alternatives.
Scaffolding's Show Product Variant (SPV) feature enables you to configure the display of thumbnail images or swatch images of variants within product listings such as categories, feeds, and search results.
With SPV, users can select these thumbnails to view an enlarged version, automatically updating the Display Widget with the selected variant's details, such as price. Furthermore, if a user chooses to visit the product page, the selected variant will be pre-selected for a seamless browsing experience.
Example: https://metropolitana.com.uy/pisos-de-madera/
Show the selected design on the image
Metropolitana's commitment to providing clear information to customers presented another challenge, especially regarding product variants. When a customer selects a variant, the chosen design should be clearly displayed in the image.
The Display Widget was already updating the information shown when a variant was selected, but it lacked the ability to show the value of the selected option. To address this, we introduced a new type of token to the Display Widget: Variant Option Tokens.
As the name suggests, these tokens represent the options of a variant. For instance, if you have a Color option, the {Color} token will display the value corresponding to the selected color variant.
This new token provided an immediate solution. By defining a Display Widget with the content "Design: {design}" and overlaying it on the image, we successfully resolved the challenge.
https://metropolitana.com.uy/pisos-flotantes/pisos-laminados-smart
Show discounts by payment methods
A unique feature in Uruguay is that banks (credit card issuers) often partner with large stores to offer discounts when customers use their payment methods.
Scaffolding's Display Widget provides a solution for this. By configuring a discount rule, it is possible to create display widgets that show the discounted price, the amount saved, or the discount percentage. Additionally, to the banks' delight, the widget can include the payment method's logo, drawing attention to the savings opportunity.
Mailing to VIP Clients
As mentioned at the beginning, Metropolitana has different audiences, including schools and architects, who are offered special commercial conditions.
The idea was to send them an email that, when clicked, would direct them to the site where they would be informed about selected products, discounts, coupons, or other communications without needing to log in.
The Display Widget facilitated this communication. The challenge was to target only specific individuals without requiring them to log in.
To address this, a new feature was created: the URL token.
By simply adding a parameter to the URL, you can define a token with the desired value that will be available in any Display Widget block.
For example, by adding the parameter dwt_vip_coupon=PRE-BLACK-FRIDAY to the URL, a token named vip_coupon is created with the value PRE-BLACK-FRIDAY. This way, a display widget with the content "-15% with coupon {vip_coupon}" will show these visitors "-15% with coupon PRE-BLACK-FRIDAY".
Product weight
Metropolitana products can weigh several kilos. For instance, a good quality floating floor covering as little as 10m² can weigh over 70kg.
As a company known for its customer care, Metropolitana wanted users to be aware of the product weights to avoid surprises with freight costs.
To achieve this, it wasn't enough to simply show the unit weight. The goal was to display the total weight corresponding to the selected quantity. Therefore, a functionality was incorporated that prominently displays the total weight of the selected product quantity.
Integrations and applications
Metro 360
Consultative sales often require the intervention of a purchasing consultant. From the start, it was decided that a chat facility should be included. For Metropolitana, WhatsApp was chosen as the chat platform.
Scaffolding offers this feature natively through its Contact Widget functionality. Simply configure it and choose where to display it (in the menu and/or as a floating icon at the bottom of the screen) to enable online chat.
Following Metropolitana's policy of providing advice and peace of mind to its customers, the approach was to allow remote cart configuration for users, even without requiring them to be logged in. This means that visitors can remain anonymous.
This is how Metro 360 was implemented. With just a simple click, users can communicate with a purchasing advisor and even share their cart for review. During the conversation, the advisor selects the products and quantities needed, and then sends a link to the customer.
By clicking on this link, the customer is redirected to a shopping cart with the products and quantities chosen by the consultant. This way, the customer completes the purchase with the assurance that a Metropolitana consultant has advised them on their selections.
Product card widget
The client regularly uses Page Builder and Scaffolding's Display Widget. During discount campaigns, they prefer to individually select which products to display and where to place them on the home page.
The standard Page Builder widgets, Product and Product Set, allow product selection and placement on the home page but do not use the product card template (the one that appears in product listings). As a result, Display Widget blocks are not shown, leading to a missed opportunity to highlight promotional elements on the home page.
To address this, we developed two new widgets for Page Builder, similar to the Product and Product Set widgets, but using the product card template. This means the products are displayed as they are in categories or other product listings.
With these new widgets, you can use Page Builder to select products individually, place them in any region of the home page, and ensure they are displayed with the highlight blocks characteristic of Display Widgets.
Cart weight
Metropolitana recognized the importance of informing customers about the weight of their shipments, which can sometimes be quite heavy, spanning several tens of kilos. Initially, we displayed the weight of individual products based on the selected quantity. However, we also needed to provide the total weight of all items in the cart.
This task was somewhat complex, but thanks to the flexibility of BigCommerce APIs, we found a solution. We developed a feature that communicates with the APIs to retrieve the products in the cart, calculate the total weight, and display it to the customer.
Stock up to date
There’s no denying it: customers become very frustrated when they purchase a product only to find out it's out of stock. At Metropolitana, maintaining accurate stock levels is non-negotiable to ensure a positive customer experience.
BigCommerce excels at reporting product availability, but it naturally requires that stock levels are kept up to date. Metropolitana’s ERP is a legacy system developed specifically for the company, which unfortunately lacks APIs for direct information access. However, it can generate Excel spreadsheets.
By leveraging Excel spreadsheets as a data exchange format, along with BigCommerce APIs and webhooks, we were able to automate the stock update process seamlessly.
Obtaining the postal code
In Uruguay, the use of postal codes is not widespread. Requesting it at checkout might cause customers to hesitate and abandon their purchases, leading to lost sales and a poor user experience, which Metropolitana found unacceptable.
However, BigCommerce requires a zip code to establish shipping rules, making it necessary to obtain one.
To address this, we developed a service that maps 100% of Uruguay's localities and integrates an auto-complete feature in the locality field. This allows customers to easily select their locality for shipping, automatically generating the corresponding postal code.
This solution ensures that customers can confidently select the correct locality, with the appropriate postal code being entered automatically.
Apply discounts according to payment method
Scaffolding, with its standout feature, Display Widget, enabled us to easily show the product price, savings, or discount percentage when a customer selects a specific payment method.
However, applying the discount and displaying it for both the customer and the merchant was initially missing. Since such discounts are uncommon, we needed to develop a solution.
Using the Bank Identification Number (BIN), we could identify if a discount was applicable. By leveraging BigCommerce APIs, we implemented a solution that accurately applies the discount, details it in the order, and clearly informs both the customer and the merchant.
Conclusions
BigCommerce and Scaffolding enabled us to overcome all challenges and develop an e-commerce solution for Metropolitana that meets all their requirements.
The flexibility of BigCommerce, with its APIs and webhooks, allowed us to easily implement the unique features the project needed. By integrating with our Drupal platform, designed to develop services that interact with BigCommerce simply and securely, we were able to create integrations and apps efficiently.
Scaffolding, on the other hand, helped us address most challenges from the start. Its architecture, designed for custom solutions, made the development process smoother and less effort-intensive.
After two years, we are proud that the client is very satisfied. The site continues to evolve, providing the solutions Metropolitana's strategy demands with robustness, security, and efficiency.