Bia Home&Garden: continuous evolution and optimization of the Shopify store

Platform

Customer

Bia Home&Garden: evoluzione e ottimizzazione continua store Shopify

Bia Home&Garden: continuous evolution and optimization of the Shopify store

Services

  • Data Analytics & CRO
  • Marketing
  • Development

The Client

BIA Home & Garden is a benchmark in Parma for home and garden products, with over 25 years of activity and a single physical store at Viale della Villetta, 21. The company, Bia Fratelli SRL, specializes in selling a wide range of products: plants and flowers, gardening supplies, outdoor furniture and decor, barbecues, umbrellas, gazebos, supplies for beach resorts, pet supplies, home fragrances and accessories, Christmas items, and gift ideas.

The store is divided into eight distinct departments: Plants, Flowers, Gardening, Christmas, Garden Furniture, Barbecues, Home Care, and Pet Care, offering qualified staff and specialized advice in each sector. BIA is also a Weber Grill Academy partner, with a calendar of certified grilling courses for enthusiasts and aspiring Grill Masters.

With biastore.it, BIA has extended its offering to the online channel, making the entire catalog available with flexible payment services (Klarna, PayPal, cards), nationwide shipping, 24-month warranty, right of withdrawal, and free in-store pickup.

Website: biastore.it


The Challenge

BIA Home & Garden already had an established Shopify store, but the ambition was to transform it into an advanced, high-performance e-commerce site capable of highlighting the catalog's complexity, improving conversion rates, and offering a shopping experience on par with the in-store experience.

Identified Critical Issues and Opportunities

  • Navigation experience needed rethinking: the homepage and information architecture did not adequately reflect the breadth of the offering and product seasonality, with a static hero section and unengaging sections.
  • Product page underperforming: the organization of content in the PDP (descriptions, technical details, variants) was not fluid, and there was a lack of trust and urgency elements to stimulate conversion.
  • Absence of CRO tools: no A/B testing system, cross-sell pop-ups, wishlists, or free shipping incentives to optimize the purchasing journey.
  • Unoptimized cart: lacked confirmation pop-ups with suggested products, free shipping progress bars, and intelligent management of bulky items.
  • Fragmented tracking and compliance: need to integrate behavioral analytics tools, updated consent mode, and direct communication widgets.
  • Performance to improve: suboptimal loading times impacting Core Web Vitals and organic ranking.
  • Limited promotional management: difficulties in communicating seasonal offers, Christmas campaigns, and limited-time promotions.

Objectives

  1. Redesign the homepage with a flexible and seasonal architecture, capable of adapting to campaigns, featured collections, and promotional communications.
  2. Enhance the product page with conversion elements, structured content, and advanced features.
  3. Implement an A/B testing system to scientifically validate every UX change.
  4. Optimize the cart and checkout with smart pop-ups, progress bars, and advanced product management.
  5. Develop custom functionalities: wishlist, cross-sell pop-ups in the blog, sticky ATC, WhatsApp widget.
  6. Integrate analytics, compliance, and marketing automation tools.
  7. Improve site performance through targeted technical optimizations.
  8. Ensure continuous support with periodic reports and data analysis to guide strategic decisions.

The Hoculus Solution

The project was conceived as a journey of continuous evolution for the store, structured into coordinated strategic and technical interventions. Each intervention was guided by real data, behavioral analysis, monthly reports, A/B tests, and designed to produce a measurable impact on conversions, user experience, and average order value.

1. Homepage Redesign

The homepage underwent multiple iterations, each guided by data analysis and seasonal business needs.

  • Dynamic slider hero: the hero section was transformed from a static image to a multi-slide slider with differentiated calls-to-action (best sellers, offers, new arrivals), designed with a dedicated graphical preview and custom development after validation via A/B testing.
  • "Categories of the Moment" section: development of a module with visual icons and a category menu, designed to guide the user towards the most relevant collections based on seasonality.
  • Dynamic featured collections: a flexible system to highlight specific collections on the homepage (garden furniture promotions, best sellers, trends), with quick updates based on ongoing campaigns.
  • Integrated Blog section: a direct link to the blog section with a clickable "Our Blog" heading, to enhance editorial content and in-store events.
  • Repositioned company description: the brand presentation was moved to a more visible position to immediately communicate BIA's identity and experience.
  • Seasonal adaptation: the homepage was reorganized on several occasions to support Christmas campaigns (Lemax sections, snow villages, decorations), summer promotions (garden furniture, pools), and post-sales periods focusing on spring collections and outdoor furniture.

2. Product Page (PDP) Evolution

The PDP was rethought with a conversion-oriented approach, enriching each element with features designed to increase trust, urgency, and informational completeness.

Structured Content and Organization

  • Tab restructuring: "Tab v1" and "Tab v2" sections were unified into a coherent system to manage products with different informational organizations. The product description was extracted from the collapsible content and made immediately visible.
  • Metafield table formatting: truncation in "Product Details" tables was resolved for a complete display of technical specifications.
  • Duplicated content obscuring: "Product Details" and "Packaging Details" tables already present in the tabs were removed from the description to avoid redundancy.

Conversion and Trust Elements

  • Benefit bullet points: inclusion of icons with text to communicate key strengths (secure payments, shipping, warranty) directly on the product page.
  • Remaining quantity alert: animated indicator with a "pulse" effect to signal limited availability and create urgency.
  • Free shipping progress bar: progress bar strategically placed near the purchase button, with subsequent adjustments to manage differentiated shipping profiles (heavy and oversized products).
  • "Sold Out" label: clear visual indication for out-of-stock products.
  • Delivery forecast: repositioned in the "Packaging and Delivery Details" tab for more contextualized information.

Advanced Features

  • Sticky ATC (Add to Cart): development of a persistent purchase button on mobile, designed with a graphical preview, developed in V1, and validated with A/B tests before final adoption.
  • Mobile image zoom: activation of zoom via Photoswipe to allow detailed exploration of product images on mobile devices, an intervention suggested by Clarity recording analysis.
  • Variants with dynamic dropdown: product variants automatically switch to dropdown view when exceeding a defined threshold, to maintain layout cleanliness.
  • Contextualized contact form: resolved the issue preventing identification of the source product in messages sent from the form on the product page.
  • Contextual promotions: system to show specific supplier promotions only on relevant products.
  • "Inspired by our sets" section: dedicated block suggesting complete furnishing compositions, linking the product page to styling proposals curated by the BIA team.

3. Custom Wishlist

A completely custom wishlist was designed and developed, without dependence on third-party apps:

  • Saving favorite products via storage, without the need for login.
  • Dedicated wishlist page displaying saved products.
  • Bulk add-to-cart functionality to simplify the transition from wishlist to purchase.
  • Consistent integration with the store's design and accessible from the main navigation.

4. Cart and Checkout Optimization

The purchasing flow was enhanced with targeted interventions to reduce cart abandonment and increase the average order value.

  • "Added to cart" pop-up: development of a confirmation pop-up with related products suggested via metafield, preceded by wireframe and low-fi graphical preview for design validation.
  • Shop the Look with bundle: button to add all products of a "Shop the Look" composition in a single action, encouraging coordinated purchases.
  • Smart Quick Buy: the quick buy button is automatically disabled for out-of-stock products, avoiding user frustration.
  • Optimized purchase button: the purchase button in PDP was updated to match the theme style with direct redirect to checkout for a faster flow. The CTA in the cart was simplified from "Payment - {amount}" to "Checkout."
  • Customized shipping management: the free shipping progress bar was adjusted to correctly manage differentiated shipping profiles for heavy and oversized products.
  • Newsletter checkbox in checkout: deselected by default to reduce unintentional subscriptions and improve the quality of the contact list.

5. Cross-Sell Pop-up in the Blog

An innovative cross-selling system was integrated directly into blog articles, transforming editorial content into sales touchpoints:

  • Trigger based on reading percentage: the pop-up appears when the reader reaches a defined scroll threshold in the article.
  • Configurable products via metafield: for each article, up to 6 related products can be specified via a dedicated metafield, with a guide sheet for compilation by product type.
  • Non-invasive design: dedicated graphical preview before development to ensure a smooth and brand-consistent experience.

6. Dynamic Banners in Collections

A system of dynamic banners in collection pages based on metaobjects was developed:

  • Configurable banners to promote trending products, offers, or related items.
  • Autonomous management by the BIA team, without the need for technical intervention to update content.
  • Flexibility in customization to adapt to different promotional strategies from collection to collection.

7. A/B Testing Strategy

A data-driven approach was introduced to validate every significant UX change, with a series of A/B tests conducted on key elements:

  • Homepage Hero A/B test: comparison between traditional hero (version A) and collection proposal (version B) to determine the impact on navigation and conversions.
  • Sticky ATC A/B test: validation of the new version of the persistent purchase button against the existing version, identifying the winning variant.
  • ATC + Checkout button A/B test: experimentation between a configuration with a double button (ATC + Checkout) and a single ATC button on the product page.

Each test was conducted with methodological rigor, monitored through monthly reports, and concluded with the removal of testing code and the definitive implementation of the winning variant.

8. Integrations and Compliance

A complete ecosystem of tools was configured to support analytics, marketing, and regulatory compliance.

  • Microsoft Clarity: inclusion of the tracking script for user behavioral analysis, with dedicated analysis sessions of recordings to identify bugs and optimization opportunities.
  • Google Consent Mode v2: integration of the updated consent mode to ensure compliance with European privacy regulations, while maintaining tracking effectiveness.
  • WhatsApp Widget: implementation of a customizable "click to WhatsApp" button for direct contact with the support team.
  • Optimized cookie banner: the cookie pop-up was redesigned to reduce clutter on mobile (the original version took up too much screen space), and a bug that prevented correct functioning in private browsing mode was later fixed.
  • Dedicated Klarna page: creation of an informative page with a custom template including banners, explanatory content, and an FAQ section to best communicate the installment payment option.
  • DNS management: resolution of errors in CNAME records of domains to ensure proper store functioning.

9. Performance Optimization

Targeted technical intervention focused on improving loading times and PageSpeed scores on all main store pages:

  • Lazy loading and sizing of images to reduce initial page weight.
  • Deferral of non-critical scripts and CSS to accelerate above-the-fold rendering.
  • Removal of unnecessary code from the homepage, collection pages, and product pages.

10. Promotional Management and Seasonal Campaigns

The store was dynamically adapted to support various promotional campaigns throughout the year:

  • Christmas campaign: "Guaranteed delivery by Christmas for orders placed by 12/15" communication, announcement bar with 30% off Christmas offers, replacement of best sellers with Christmas collection lists, dedicated sections for Lemax, snow villages, and decorations.
  • Homepage changes for Christmas: complete redesign of homepage sections for the Christmas period with seasonal products and collections.
  • Summer campaigns: update of featured collections with a focus on garden furniture, pools, and Weber barbecue courses.
  • Creatives for advertising: creation of creatives for Meta campaigns and banners for Google Ads.
  • Dynamic announcement bar: moved below the menu and updated messages (payment in 3 installments, ongoing promotions).

11. UX/UI and Markup Review

Extensive review work was carried out on the desktop and mobile interfaces:

  • Complete markup audit: systematic review of the site with comments and reports on desktop and mobile, followed by the resolution of every identified critical issue.
  • UI Fixes: removal of duplicate newsletter in the account area, improvement of the login interface, optimization of blog article layout, logo fix on mobile, correction of currency code and forms.
  • Copy review: update of site texts, removal of outdated seasonal disclaimers, and refresh of the About Us page.
  • Bulleted list fixes: resolution of the visibility issue for bulleted lists in product descriptions.

12. Custom Pages and BIA Card

  • BIA Card page: restyling of the loyalty card page with optimized CTAs and improved layout to encourage program enrollment.
  • "Work with Us" form: graphical fix of the application form with background and element layering correction.
  • Shipping disclaimers: addition of information on delivery times in PDP, cart, and shipping profiles to manage communication during periods of delays.

13. Data Cleaning and Database Quality

  • Elimination of fake customers: cleaning of the customer database by removing fictitious accounts (0 orders, fake addresses) subscribed to the newsletter, to improve the quality of the contact list and the reliability of email marketing metrics.

14. Data-Driven Reports and Analysis

A service of periodic reporting accompanied the entire process, providing the BIA team with a clear overview of the store's performance:

  • Monthly reports with analysis of main KPIs: traffic, conversions, AOV, performance per channel.
  • Dedicated Clarity analyses: user recording analysis sessions to identify behavioral patterns, bugs, and optimization opportunities.
  • CRO investigations: targeted analyses to identify conversion rate and average order value optimizations, with concrete proposals translated into operational interventions.
  • Each report directly fed into the roadmap for subsequent interventions, creating a virtuous cycle of analysis → action → measurement.

Results

The project produced a deep and progressive transformation of the BIA Home & Garden store:

  • Dynamic and seasonal homepage: a flexible architecture that adapts to ongoing campaigns, seasonal collections, and commercial priorities, with hero sliders, trending categories, and promotional sections that can be updated autonomously.

  • High-conversion product page: an enriched shopping experience with sticky ATC, free shipping progress bar, remaining quantity alert, mobile zoom, dynamic dropdown variants, and trust bullet points, each element validated with A/B tests.

  • Optimized purchase funnel: confirmation pop-ups with cross-sell, custom wishlists, "shop the look" with bundles, and simplified checkout have helped reduce cart abandonment and increase average order value.

  • Blog as a sales channel: the cross-sell pop-up system in articles has transformed editorial content into effective commercial touchpoints, with products suggested contextually to the reading.

  • Consolidated data-driven approach: the introduction of A/B tests, systematic analysis of Clarity recordings, and monthly reports have created a culture of data-based decision-making, eliminating choices based on intuition.

  • Improved performance: technical optimizations on lazy loading, defer, and code cleanup have resulted in improvements in loading times and PageSpeed scores.

  • Updated compliance and tracking: Google Consent Mode v2, mobile-optimized cookie banner, and privacy management aligned with European regulations.

  • Autonomous management: thanks to systems based on metaobjects (collection banners, cross-sell products) and continuous training, the BIA team is able to autonomously manage promotional campaigns, seasonal updates, and store content.


Technologies and Tools

Area Technologies
Platform Shopify (Online Store 2.0)
Front-end development Liquid, HTML, CSS, JavaScript
Structured data Shopify Metaobjects and Metafields
Image gallery Photoswipe (javascript library)
Analytics Google Analytics, Microsoft Clarity
Compliance Google Consent Mode v2, Custom Cookie Banner
Installment payments Klarna
Communication Custom WhatsApp Widget
Email Marketing Shopify Newsletter
CRO Custom A/B Testing, Clarity analysis
Advertising Meta Creatives, Google Ads Banners

Conclusions

With the BIA Home & Garden project, Hoculus has demonstrated how a Shopify e-commerce can be transformed through a path of continuous and data-driven evolution, without ever interrupting store operations.

The work touched every aspect of the digital presence, from the redesign of the homepage to the creation of custom features such as the wishlist and cross-sell pop-ups in the blog, from performance optimization to the construction of a solid A/B testing framework. Every intervention was guided by concrete data: Clarity recordings revealed hidden opportunities (such as mobile zoom), monthly reports guided priorities, and A/B tests validated every design choice.

The result is a store that reflects online the same care and expertise that customers find in the Parma store: a rich, reliable, and meticulously designed shopping experience. BIA Home & Garden now has a solid and flexible platform, capable of adapting to business seasonality, supporting promotional strategies, and growing with the brand, with an increasingly autonomous team in daily management and a technical partner ready to support future evolutions.

Articoli visualizzati di recente