Company: Urban Surfaces
Website: urbansurfaces.com
Urban Surfaces hired me to build out the designs from their own design team. In addition to their unique designs, they had some custom functionality that was needed to display, preview, find and order their products. This build included about 20 pages, 4 portfolio projects, and 50 products.
Custom Functionality
What made this project extra fun was developing the custom functionality needed to achieve what the client wanted for their products setup within WooCommerce. There are a few completely custom plugins used throughout the site, built with PHP and JavaScript.
Functionality Request #1:
We want to be able to display a grid of 3 of our top products from WooCommerce. When the user hovers over one they can click to open the product detail page, or click to pop up a quickview of the product. The quickview needs to display some product detail info, as well as the main product image, also show a gallery of example images. The user should be able to add that product to their cart, or go to the product detail page.
Functionality Request #2:
We need to have a product page that shows a similar grid of products, but showing all products available. Then we want the user to be able to select specific things to filter the products by their specific features. When the user hovers over one they can click to open the product detail page, or click to pop up a quickview of the product.
Functionality Request #3:
We would like a way for interior designers to be able to explore the many different colors available with a grid of color swatches. The user should be able to navigate several pages of colors, and then select a specific swatch to view it, download it, print it, view the product detail page, or add it to the cart.
Functionality Request #4:
We also need to have a page for our different types of trim and moldings. The user selects one of six types of moldings, then chooses a color from a grid of all colors available. Then the page updates to show a preview image of the molding, and displays the product details.
