Explore Storefront Design Best Practices

Configure Catalogs

B2C Commerce supports multiple catalogs for the same site, but only one catalog is exposed to the storefront at a time. Best practice is to configure a product catalog that owns all products and a storefront catalog that’s assigned to a subset of products. Typically, product catalog data is imported from a system of record.

This product/storefront catalog configuration ensures that the merchant has a catalog structure that supports both current and future business requirements. A new online merchant with simple requirements might not need this level of separation at first. But later, they might want to configure multiple storefronts that each use a unique assortment of products derived from the product catalog.

Remember, categories drive storefront navigation. With a unique storefront catalog per site, you can assign a different set of categories and subcategories to each, customizing navigation by site.

The product/storefront catalog navigation lets merchants:

• Maintain a single record of the product.
• Create unique storefronts for each site with independent navigation.
• Easily expand sites for both domestic and international storefronts.
• Replicate products separately from the storefront because they are owned by the product catalog, and not the storefront catalog.
• Perform replication and jobs a lot faster because product data is separate from the storefront catalog data.

Catalog Quotas

Like content and content slots mentioned in the last unit, catalogs have quotas, too. Quotas are hard limits after which performance suffers. To help with this, B2C Commerce automatically reports when these limits are exceeded.

Mirror Page and Catalog Navigation

Best practice is that the storefront page navigation should mirror the storefront catalog structure. This ensures that merchants can control which categories appear in the storefront navigation and the order in which they appear.

Otherwise, confusion ensues—for the merchant and for the shopper!

For example, a shopper navigates to a storefront and a category page opens showing a sale on shoes. The shopper is confused, not knowing what to click. They definitely didn’t want to buy shoes that day, so they abandon the site. A more daring shopper might enter a search term and go from there.

A better way would be to show top-level categories as a set of tabs on the landing page. The shopper clicks a top-level category, and the sub-categories display in a pane, or as a list of content slots on a mobile device. The page flow matches the storefront catalog structure.

This example shows a list of sub-category content slots on a mobile device. The top-level category is Women’s. The sub-categories are Summer Style, Women’s Dresses, and Women’s Jewelry.

Show In Menu Navigation

Best practice is to use the Show in Menu Navigation attribute for all categories to give merchants more flexibility. Merchants can turn categories on or off by setting this attribute in Business Manager. By default, all categories are available.

While the storefront page structure maps to the category structure that’s defined within a catalog, search refinement happens after a search. Search refinement can be by category and subcategory, but it can also be by color, size, fabric, and so on. For merchants who use search refinement, using the Show in Menu Navigation attribute allows them to show a different set of values (in a separate pane or as a list of selections) from the page navigation categories. They can turn menu navigation off for certain categories and use refinements instead.

With search refinement, shoppers can search using multiple attributes such as price, category, or product type. For example, a search for jewelry by type (bracelet, ring, necklace, earrings, or sets), metal (gold, silver, or platinum), and category (fine jewelry or costume) yields more targeted results than searching the entire catalog.

Use Existing Attributes

Use existing attributes instead of creating new ones. If the storefront page navigation needs to be shown a certain way, investigate existing controls before customizing.

For example, if you want to show standard vertical tabs for each category, with the tabs displaying horizontally, use the standard Header Nav Menu Banner attribute. Alternatively, if you want to show categories horizontally, with categories displaying from left to right, use the Header Menu Orientation attribute.

Category/List Pages

A category landing page is the result of selecting a category. It can be a static page or it can look similar to a search results page, with a list of the products for the selected category instead of the products in the search results.

Like all B2C Commerce web pages, a category page should not contain more than 6 content slots.

Quickview

This is an abbreviated version of the full product details page. It should always contain a link to the full product details page. Mobile experiences should not include a Quickview page.

Product Details Page

Certain details about a product can change dynamically, such as its inventory and the promotions that apply based on other items in the cart, a coupon code, or a customer group that the shopper belongs to. Best practice is that this page changes dynamically to reflect the business rules that handle this information. For example:

• Inventory rules used to support in stock, out of stock, pre-order, and backorder
• Promotional messaging for item and order level discounts