Best practices for building custom storefronts

A great customer-facing user experience (UX) is important to the success of buyers and merchants. This guide describes some best practices for building Shopify custom storefronts with Hydrogen.

Images

An image represents the product being offered to the buyer. Products are easier to sell if buyers are provided with pictures.

Use three to five images for each product

Buyers rely on a variety of images to inspect products and decide if the product matches what they are seeking. Make sure to provide buyers with sufficient visual information about products.

Present images from multiple angles

Buyers need a comprehensive visual understanding of a product in order to make a purchase decision. Straight-on shots of the product rarely fulfill this requirement.

The images should be easy to navigate and provide additional context to the buyer. You can present images using different angles or sizes.

Show products in scale

Buyers are unable to evaluate a product’s size if they’re only provided with cut out product images. Cut out images are photos of products that have been cut out from their original background and placed on a white background. Consider presenting products in relevant surroundings to give buyers a clearer sense of a product's size.

Provide feature callout images


Buyers typically focus on product images, which means they might overlook key product features if they’re only described in the product description and specifications. You can add text to your image to highlight key features.

Provide lifestyle images for relevant products

Buyers need images to inspire them and get them excited about a product or risk missing out on interesting product features. For example, for apparel, accessory, or cosmetic products, buyers need an understanding of how the product will look on their own body (or face) before they feel comfortable purchasing.

Provide images of these products on a human model. Cut out, in scale, and other common image types frequently fail to provide this visual information.

Always include image alt text

Clearly describing the contents of each image in the alt text is imperative for buyers using screen readers or other assistive technologies. As an added bonus, alt text increases the relevancy and search engine ranking of your site.

Product variants

Products are the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options.

Each combination of option values for a product can be a variant for that product. For example, a t-shirt might be available for purchase in blue and green. The blue t-shirt and the green t-shirt are variants.

Always use swatches as the selector for color variations


Buyers who can't easily determine all the color variations a product comes in might overlook options they would prefer and prematurely abandon buying a product that could have been suitable.

Use individual buttons for each size variation


Some buyers will miss size options when they’re not immediately and directly visible. This results in wasted effort as they realize their required size is out of stock, or validation errors if they fail to select a size.

Reproduce core content across product variations


When core product content is stretched thinly across multiple product variations, it’s harder for buyers to gather all the information they need to make an informed purchase decision.

Remove variation selectors when there’s only one option left


Buyers waste time making an unnecessary selection when there’s only one variation available, and might misinterpret the meaning of a single displayed variation.

Videos

You can reach a larger audience of buyers by publishing videos about the products offered on your custom storefront. The following section provides guidance for including videos on a Shopify custom storefront.

Include videos without sound that automatically loop

Video content should default to paused on page load as it can be unexpected, overwhelming, and distracting when defaulted to playing. If a video plays on page load, then it should be muted by default.

Consider including a video without audio of the product which automatically plays and loops. Position the video as the third or fourth media item.

Buy section

The Buy section represents the area where buyers can purchase a product. The following section includes guidance for optimizing a buyer's purchasing experience.

Make the Add to Cart button visible


Style the primary Add to Cart button to be unique and prominent. Competing call to action buttons are distracting and make it difficult for buyers to add the product to their cart.

Allow buyers to purchase out of stock products by increasing the delivery time


Temporarily unavailable or out of stock products leave buyers at a dead end. Buyers who have decided on a particular product are then very likely to go to a competing site.

Make the product price visible

Buyers should be able to clearly identify the price of a product. Without a clear price, buyers can't evaluate a critical aspect of the product.

Display price-related special offers and discounts


Place offer and discount descriptions in the “Buy” section in close proximity to the product price, and generally display a single offer only once.

Next steps

• Explore example Hydrogen implementations in GitHub.
• Get familiar with React Server Components.
• Learn more about the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.