Shopify Plus – Post-Launch Enhancements

Optimizing the Product Detail Page

Solutions engineering for product detail page template "quick wins" focused on CRO optimization

Tools Used:

Figma, Sketch, InVision, Shopify Plus

The product detail page (PDP) is a core page template that is essential to any ecommerce store. It balances imagery, core product specs, and storytelling elements to entice a variety of customers to make a purchase. I have worked with a variety of Shopify Plus clients across the beauty, specialty hobby, health & wellness, and apparel industries to design various PDP modules that suit their specific content needs. Designed on behalf of eHouse Studio.

Solutions Engineering & Implementation

Determining how to overhaul a PDP design can be a daunting process for both a client and a design team. I find that the easiest way to tackle an overhaul is to divide it into a few steps:

Kickoff Call

Setting up a call to capture the client's initial vision, requirements, and limitations helps to get all the initial ideas on the table while also giving space to the stakeholders to vocalize their needs upfront.

Requirements & Market Research

Once the kickoff call is complete, I read through the notes and summarize the core requirements. I then define the core use cases and expected functionality as well as any open questions. I also study any cited examples for visual and functionality-related inspiration.

Wireframe & Iterate

After market research and use casing, it's time to wireframe the feature's flow. I cross-check these designs with the use cases regularly to ensure that the requirements are being met. There may also be rounds of collaboration with the client and development team at this stage.

Handoff to Dev & Visual QA

The last stage is to tighten up the details and hand off the designs to development, ensuring that all settings, expected functionality, and technical approaches are accounted for. Once the feature is developed, a couple of rounds of visual and functional QA are conducted before demonstrating to the client.

Some Favorite Solutions:

Wireframes for before-after

Baby Nina at her Commencement Ceremony, 2011.

'Before-After' CMS Module

Showcasing impactful product results with a draggable before & after photo slider

This module allows admin users to include impactful, image-driven before-and-after testimonials. The admin user can feature a short-form quote from a testimonial alongside one of two types of image displays: a single "after" image or two images layered on top of each other with a magic slider for users to drag back and forth to compare before and after results.

An example of this can be seen on the product detail pages for Ceremonia.

'Before-After' CMS Module. This Module allows admin users to highlight before-and-after

Wireframes for tabbed product details

Baby Nina at her Commencement Ceremony, 2011.

Tabbed PRoduct Details

Divide Product Details into Smaller, Digestible Below-the-Fold Tabbed Details

This product-level feature can be useful for visually breaking up long product details into more digestible sections of text. It can also help carve out key characteristics for a brand's product line and create content patterns that can accelerate a user's browsing process.

An example of this can be seen on the PDPs for The Goulet Pen Company.

'Before-After' CMS Module. This Module allows admin users to highlight before-and-after

Wireframes for Rebuy widgets

Baby Nina at her Commencement Ceremony, 2011.

Upsell Modules powered by Rebuy app

Implementing "Sections Everywhere" Rebuy Widgets to increase upsell opportunities

Rebuy is an app that provides recommendation widgets that can be implemented on an ecommerce site to facilitate upsells and product recommendations. They are powered by smart data that admin users configure to product tailored results for different users.

An example of this can be seen on the PDPs for BIOHM Health.

Other PDP Enhancements

The right PDP optimizations for a client will depend on a number of factors — how many products are in the catalog, how much bandwidth an admin team has to populate and update site content, how products and collections are set up, and so on and so forth. But a few additional favorite details and implementations I've had a chance to work on include:

Screenshot of sticky gallery desktop functionality

Sticky Gallery Functionality

Enabling sticky gallery functionality on desktop for long buy boxes can enhance a user's ability to simultaneously look at photos as they read product details in the buy box. See an example of this on SimplyProtein.

Screenshot of gallery video functionality

Video Functionality in Gallery

Adding video functionality to image galleries and content modules allows clients to feature product campaigns to paint a more vivid picture of products in use. See an example of this on Ceremonia.

Screenshot of sticky add-to-cart banner

Sticky "Add to Cart" Banner

Creating an "Add to Cart" banner that appears when scrolling past the buy box keeps the call-to-action on the PDP at top of mind for the user and reduces scrolling. See an example of this on BIOHM.

Screenshot of brand value proposition module

Brand Value Proposition Content Modules

Adding content modules that highlight key ingredients and brand value propositions provides a short-form style of storytelling through imagery. See an example of this on SimplyProtein.


Follow me on Dribbble: