Handcrafted Focus
Specialized in wooden fireplace mantels, floating shelves, and home décor.
Project Overview
A handcrafted home décor brand,modernized for better discovery
Cottage Beams is a Shopify store specializing in handcrafted wooden fireplace mantels, floating shelves, and home décor products. The client wanted to modernize their online store with a fresh design that improved the shopping experience while maintaining their premium brand identity.
Custom Filtering
Product attribute filtering using metafields and tags for easy refinement.
AJAX Interactions
Instant filtering and pagination without page reloads.
Modern Design
Complete redesign based on Figma with Rebuy cart integration.
Challenges
Modernizing a Handcrafted Brandfor Digital Commerce
1. Complete Store Redesign
The client wanted to completely redesign the existing Shopify store with a modern, user-friendly interface based on the provided Figma design. The challenge was to create a fresh, contemporary look while maintaining the warm, artisanal feel that reflects the handcrafted nature of their products.
2. Product Browsing Experience
With a diverse catalog of wooden products in various sizes, finishes, and styles, customers needed an efficient way to browse and filter products. The goal was to improve product discovery so customers could quickly find mantels and shelves that matched their specific requirements and style preferences.
3. Custom Product Attributes
Building custom collection page filters using product attributes (metafields/tags) required careful implementation to ensure customers could easily refine products based on wood type, size, finish, and other specific characteristics without cluttering the interface.
4. Seamless Shopping Flow
The purchasing experience needed to be streamlined with faster interactions and a clean, modern user interface. Every interaction—from browsing to filtering to checkout—had to feel smooth and intuitive while showcasing the premium quality of the handcrafted products.
Impact
Elevating the Shopping Experiencefor Artisan Products
1. Improved Product Discovery
The custom filtering system using product attributes dramatically improved how customers find the right mantel or shelf for their space. AJAX filtering allows instant product refinement based on wood type, size, finish, and style without page reloads, creating a smooth browsing experience.
2. Modern Brand Presentation
The redesigned storefront based on the Figma design successfully balances modern e-commerce functionality with the warm, artisanal aesthetic of handcrafted wooden products. The custom layouts across homepage, collection pages, and product pages create a cohesive brand experience.
3. Streamlined Purchasing
The Rebuy-powered cart drawer with custom CSS styling provides a seamless checkout experience that matches the store's premium design. Combined with AJAX pagination and optimized shopping flow, customers can complete purchases faster while exploring upsell opportunities.
Key Feature 1
Custom Horizon Theme:Figma-Based Design Implementation
Built a fully customized Shopify storefront using the Horizon theme as the foundation, closely following the provided Figma design. Developed custom layouts for the Homepage, Collection Pages, Product Pages, and Cart Drawer to create a consistent shopping experience.
Created a modern custom product page focused on improving product presentation and customer engagement. The design showcases the handcrafted quality of wooden products while providing clear product information, specifications, and purchasing options.
Key Feature 2
Advanced Product Filtering:Attribute-Based Discovery
Built custom collection page filters using product attributes (metafields/tags), allowing customers to easily refine products based on their preferences. Implemented AJAX filtering and AJAX pagination, enabling products to update instantly without reloading the page.
The filtering system allows customers to narrow down products by wood type, size, finish, style, and other specific characteristics. This makes it easy to find the perfect mantel or shelf for any space, improving conversion rates and customer satisfaction.
Key Feature 3
Rebuy Integration:Custom Cart & Upsells
Integrated the Rebuy app to power the Cart Drawer and upsell functionality. Customized the Rebuy Cart Drawer with custom CSS to match the Figma design and ensure a seamless visual experience across the storefront.
The Rebuy integration enables intelligent product recommendations and upsells within the cart, encouraging customers to discover complementary products like matching shelves or décor items. The custom styling ensures the cart drawer feels like a natural part of the store's premium design.
Tools
Tools &Technologies
Platform & Theme
- Shopify
- Horizon Theme
- Liquid
Front End
- HTML
- CSS
- JavaScript (AJAX)
Apps & Design
- Rebuy
- Figma
Final Product
A Modern Storefront for Artisan Craftsmanship
Cottage Beams' redesigned Shopify store successfully bridges the gap between traditional artisan craftsmanship and modern e-commerce functionality. The custom-built solution maintains the warm, handcrafted aesthetic of wooden products while providing a streamlined, contemporary shopping experience.
With advanced product filtering based on attributes, AJAX interactions for seamless browsing, and a Rebuy-powered cart system, Cottage Beams now offers customers an intuitive way to discover and purchase handcrafted mantels and shelves. The Figma-based design implementation ensures visual consistency across all pages while optimizing the shopping flow for better conversion rates and customer satisfaction.
More projects
Healthcare
Appointment and operations platform built for clinics that need clarity at scale.
Ed Tech
Media and learning brand system built for storytelling that converts attention.