For this project, our web designers were able to leverage an existing theme while incorporating custom elements and components to add features and functionalities that could not have been achieved otherwise.

Studio Rob Diaz requested a background video that would play on an auto-loop in the above-the-fold space of their home page. The existing theme featured a built-in video section that resembled YouTube and required clicking to begin playing. After the video finished, the user was left with a blank screen unless they chose to replay it. However, the theme did not have a background video section that could play continuously. To rectify this, we custom coded this section for improved UX & UI and configured it so that our client can edit it directly from the Shopify Theme Editor in a no-code fashion.

For example, if they decide to use a different video, they are able to upload it directly from the Shopify Theme Editor and ultimately don’t need to reach out to us. We always strive to not only deliver a finished project but to ensure that our clients are comfortable navigating and using the Shopify platform independently, as this is their business, their livelihood, and, as business owners ourselves, we can relate.

The team at Studio Rob Diaz also wanted to use a custom watermark / logo as their CTA (call-to-action) button on the above-mentioned video background, so we custom coded this and, again, configured it so that they could edit this directly from the Shopify Theme Editor.

Studio Rob Diaz works with a select clientele, namely high-net-worth individuals who can afford multi-million-dollar homes in the Los Angeles area. In an effort to prioritize and streamline communication, they wanted to use Acuity Scheduling to require prospective clients to initiate the process with a $350 / hour initial design consultation. Acuity Scheduling does not have an app in the Shopify App Store, so we embedded this directly in the code so that they could use their preferred software, rather than being limited to the options available in the Shopify App Store.

Using metafields and metaobjects, we built a fully custom portfolio page. A drawer or modal slides out on the left side of the page with a list of all of the properties in their portfolio. As the user scrolls across the different properties, the featured image on the right dynamically changes on hover to reflect the featured image of each property.

Once the user clicks on one of the properties, the individual property page opens. We built a custom collage, again using metafields and metaobjects, to display a variety of photos of both the interior and exterior of the home. There is a space below the featured image for a brief description of the inspiration behind the design of the home. Again, in keeping with our stated mission of ensuring that our clients are able to manage their Shopify store independently, Studio Rob Diaz can replace or reorder these images directly from their Shopify admin using the metafield definitions section.

While carousels are fairly ubiquitous and straightforward components in e-commerce storefronts, we custom coded the one that features at the bottom of each property page in order to achieve the visual effect and aesthetic our client desired.

Lastly, Studio Rob Diaz has been featured in a variety of respected publications, and we created a Publications page using metafields to dynamically source the data, in this case the individual articles, rather than using the standard blog post pages.