The Client

Boring Litter is an Italian brand that has revolutionized the concept of cat litter by designing a stainless steel product designed to last and simplify the daily lives of feline owners. The brand's promise is clear and ambitious: eliminate unpleasant odors, make cleaning quick, maintain high levels of hygiene, and reduce waste associated with traditional plastic litter boxes.

With an e-commerce site on the Shopify platform ( boringlitter.it ), the brand targets a knowledgeable audience, attentive to quality and sustainability, who are looking for a definitive solution for managing their cat's hygiene.

The Challenge

Boring Litter offers a high-end product with several variants (open-rim and closed-rim models), as well as a range of complementary accessories such as the LittyBag. The existing product page (PDP), however, failed to effectively guide the user through the selection of model, quantity, and optional accessories.

Problems Identified

1. Poorly guided selection process : the user had to orient himself independently among variants, quantities and accessories without a structured path
2. Lack of clarity in the differences between variants : the distinctions between open-edge and closed-edge models were not immediately understandable
3. Untapped upsell opportunities : Complementary accessories and related products (LittyBag) were not being adequately valued within the purchase flow
4. Setup friction : The lack of a dynamic summary and an always-visible add-to-cart button created friction, especially on mobile
5. Complex pre-order management : The brand needed a flexible system to manage launches with restricted access via whitelists and pre-orders

Project Objectives

The client had specific objectives:

1. Increase clarity in choosing variants and quantities
2. Reduce friction during the product configuration process
3. Promote related products and accessories within the purchasing flow
4. Ensure a smooth and consistent UX across mobile and desktop
5. Integrate pre-order mechanics and reserved access without interrupting the purchase flow
6. Equip the merchant with behavioral analysis tools for future optimizations

Our Approach

Phase 1: Discovery and Analysis

The project began with an onboarding call and an in-depth analysis phase to understand Boring Litter's specific needs. The Hoculus team conducted:

• Existing purchase flow analysis : Mapping the user experience onto the current PDP to identify friction points
• Detailed requirements gathering : alignment sessions with the customer to define the expected behavior of each step of the configurator
• Study of product specifications : understanding variants (open edge vs. closed edge), quantity combinations and the logic of progressive discounts
• Data architecture definition : design of the Metaobject and Metafield structure needed to power the configurator in a dynamic and merchant-manageable way

Phase 2: UX/UI Design

The design phase was a fundamental pillar of the project. A complete step-by-step flow was designed, in line with the look and feel of the existing site, structured into the following steps:

• Step 1: Model selection : design of visual cards for the choice between open and closed edge, with a support pop-up that can be activated in case of doubts, containing explanatory texts and images provided by the customer
• Step 2: Quantity selection : dedicated layout with the possibility of differentiating the variants in the case of multiple purchases, with dynamic indication of progressive discounts
• Step 3: Add-on : section dedicated to complementary accessories with intuitive selection
• LittyBag Section : promotional area for the flagship related product, with dedicated analysis for the most effective integration method in the flow
• Sticky CTA "Add to Cart" : button always visible after scrolling through the configurator section, with dynamic summary updated in real time

The design was developed for both desktop and mobile, with detailed technical annotations to guide the development phase. Iterative reviews were conducted with the client to refine every detail of the interface.

Phase 3: Development and Implementation

The development translated the design into a robust and high-performance technical solution, addressing several architectural challenges.

The Solution Realized

1. Step-by-Step Configurator (Step 1 and 2)

The heart of the project is a new PDP layout structured as a guided configurator. Step 1 allows litter box model selection via visual cards, while Step 2 manages quantity selection through Metaobject-powered blocks.

Each quantity block is configurable and contains:

• Combination quantity
• Subtitle with placeholder for calculated savings
• Promotional badge
• Discount automatically applied to cart
• Total price of the combination

When you change the selection in Step 1, all radio buttons in Step 2 automatically update to the selected variant, and the main PDP image changes accordingly. The add-to-cart form handles multiple variants and quantities via hidden inputs, allowing you to add multiple products at once.

2. Add-ons and Complementary Products (Step 3)

Step 3 features a dedicated accessory block with support for both static and dynamic data (via Repeater and Metafield/Metaobject functionality). It includes:

• Tooltip for selecting add-on quantity
• Automatic add-on selection logic as the quantity selected in Step 2 increases, to encourage the purchase of complementary accessories
• Information icon with detailed modal for each add-on, managed via metafields (title, image and text)

3. Information Modalities

To improve product understanding, two types of modals have been implemented:

• Variant Differences Modal : Activates when multiple product variants are available and displays a clear comparison between the options. Each variant has a dedicated metafield for a custom description.
• Add-on modal : when clicking on the information icon or on the add-on itself, a modal opens with contents that can be managed by the merchant (title, image and text) via metafields

Both were made as Custom Elements to ensure encapsulation and reusability.

4. LittyBag Section (Featured Product)

A promotional section dedicated to the flagship product, the LittyBag, has been integrated into the PDP template. This section is fully manageable from the Shopify theme editor and allows the merchant to:

• Select the product to promote
• Display name, image, price and badge
• Configure the CTA to link to the dedicated PDP or enable independent add to cart

5. Sticky Add to Cart and Summary

To ensure the purchase action is always accessible, a sticky ATC section has been implemented that automatically appears after scrolling past the configurator blocks. The solution uses the Intersection Observer API to detect when the last step exits the viewport towards the top, triggering the display of the sticky bar.

The floating ATC button appears after selecting Step 2 and remains visible until it overlaps with the static button. The button behaviors exactly replicate the functionality of the native PDP buttons.

6. Advanced Add to Cart Behavior

To optimize user flow, advanced behaviors have been implemented:

• No quantity pre-selection in Step 2, to guide the user towards an informed choice
• Automatic scroll to the next step after each selection, positioning it in the center of the page to maximize visibility
• ATC floating visible after quantity selection, which disappears only when overlapping the static button

7. Pre-Order Management

The configurator integrates complete pre-order management that replicates and improves the behavior of dedicated apps:

• Customizable CTA : The add-to-cart button text is configurable for pre-order products
• Order Attributes : Product metafield for estimated delivery, with one field visible to the customer and one hidden for automation
• Automatic tagging : Through Shopify Flow, orders containing pre-order products are automatically tagged by reading the hidden attribute in the cart

8. Restricted Access and Whitelist Management

To support the launch of the new configurator, a reserved access system has been developed:

• Host Product : Configure the main product as a "host" to contain itself and the enclosed onboard product within the same configurator
• Reserved Preview : Custom script that activates the configurator on the PDP only if the user lands on the page with a specific url parameter, allowing the sending of exclusive links to whitelisted users.
• Post-whitelist template switch : once the restricted access phase is over, simply assign the "configurator" template to the Host product to make the functionality available to everyone
• Metafield swatch management : Variant images in the selector are managed via metafields for complete editorial control

9. Compatibility with Third Party Apps

The configurator introduces custom add-to-cart logic that could conflict with existing apps. A compatibility issue with One Click Upsell (OCU) has been resolved, allowing the app to fully coexist with the implemented solution.

Microsoft Clarity Implementation
To equip the brand with behavioral analytics tools, Microsoft Clarity was configured with an optimized implementation to avoid negatively impacting site performance. This tool allows for the analysis of heatmaps, session recordings, and user behavior on the new PDP, providing valuable data for future optimizations.

Quality Assurance and Go-Live Process

The release was preceded by a rigorous quality assurance process consisting of several phases:

Multi-Level Internal Review

• Technical review : functional verification of all configurator steps, discount logic and interaction between components
• Design review : Pixel-perfect comparison between the implementation and the approved design, with fix iterations on layout details, spacing, typography, and responsive behaviors
• Review with the client : gathering and implementing feedback through shared documents, with targeted fixes on aspects such as side padding, font size, bullet points, crossed out prices and quantity break texts

Go-Live Checklist

Before the launch, a structured checklist was followed:

• Cleaning of test products used during development
• Alignment between development theme and live theme with code merge
• Removing bundle caching on the Host product
• Removed discount restrictions for test users
• Sending link with URL parameter for whitelist access
• Post-whitelist product template switch

Results

Quality Improvements

• More guided and consistent purchasing flow : the step-by-step configurator eliminates user uncertainty, accompanying them through each stage of the choice with immediate visual feedback
• Better understanding of variants : Informative modals and help pop-ups make the differences between models immediately clear
• Greater visibility of accessories and related products : Step 3 and the LittyBag section naturally integrate cross-selling into the purchasing flow
• Reduced risk of errors : Automatic selection logic and integrated controls prevent incorrect configurations
• Greater editorial control : thanks to Metafield and Metaobject, the merchant can independently update texts, images, prices and descriptions and combinations of the configurator without technical intervention
• Advanced analytics tools : Microsoft Clarity implementation provides behavioral data to drive data-driven optimizations of the new shopping experience
• Operational flexibility : the reserved access and pre-order system allows you to manage product launches and waiting lists without changing the code

Technology Stack

Deliverable

• Complete PDP configurator design (desktop and mobile)
• Step-by-step configurator with 3 steps (model, quantity, add-ons)
• Featured product section (LittyBag) integrated into the PDP
• Sticky ATC section with dynamic summary
• Information modalities for variants and add-ons
• Pre-order management system with automatic tagging Shopify Flow
• Restricted access system via whitelist with switch template
• Compatibility fix for One Click Upsell (OCU)
• Microsoft Clarity implementation for behavioral analytics