What is the storefront?

Within your Adobe Commerce or Magento Open Source implementation, the storefront is the external, public-facing part of your store. It provides the content and functional components that your customers use to shop and purchase.

The path customers take to a sale is sometimes called the path to purchase, and your storefront includes the components for customers to complete this path. The following sections provide an overview of the basic page types that provide strategic value—the places customers usually visit while shopping in your store. As you review them, consider different store features that can be used at each stage of the customer journey.

Home page

Did you know that most people spend only a few seconds on a page before they decide to stay or go somewhere else? It is not long to make an impression. Studies show that people also love photographs, especially of other people. Whatever design you choose, everything on your home page should move visitors along toward the next step in the sales process. The idea is to guide their attention in a cohesive flow from one point of interest to the next.

w-700
Example storefront home page

Catalog page

Catalog page listings typically have small product images and brief descriptions, and can be formatted as a list or as a grid. You can add blocks, videos, and keyword-rich descriptions, and also create special designs for a promotion or season. You might create a special category to feature a lifestyle or brand that is a curated collection of products from different categories.

The initial product description usually gives shoppers enough information to merit a closer look. People who know what they want can add the product to their carts and go. Customers who shop while logged in to their accounts enjoy a personalized shopping experience.

w-700
Collection page on the storefront

Search results

Did you know that people who use search are nearly twice as likely to make a purchase as people who rely on navigation alone? You might consider these shoppers to be pre-qualified.

With Live Search for Adobe Commerce, your store delivers a fast, super-relevant, and intuitive search experience, and is available for Adobe Commerce at no additional charge.

w-700
Live Search example - search as you type

With standard catalog search, your store includes a Search box in the upper-right corner, and a link to Advanced Search in the footer. All search terms that shoppers submit are saved, so you can see exactly what they’re looking for. You can offer suggestions, and enter synonyms and common misspellings. Then, display a specific page when a search term is entered.

w-700
Example of standard catalog search results

Product page

The product page has a lot going on! The first thing that catches your eye on the product page is the main image with a high-resolution zoom and thumbnail gallery. In addition to the price and availability, there is a tabbed section with more information and a list of related products.

w-700
Example storefront product page

Shopping cart

The cart is where order total can be determined, along with discount coupons and estimated shipping and tax, and a great place to display your trust badges and seals. It is also an ideal opportunity to offer one last item. As a cross-sell, you can select certain items to be offered as an impulse purchase whenever a specific item appears in the cart.

w-700
Example storefront shopping cart page

Checkout page

Checkout process consists of two steps:

  1. Shipping Information

    The first step of the checkout process is for the customer to complete the shipping address information, and to choose the shipping method. If the customer has an account, the shipping address is entered automatically, but can be changed if needed.

    img-md
    w-700
    Example storefront checkout page
  2. Review and Payment Information

    The second step of the checkout process is for the customer to choose the payment method and optionally apply a discount code.

    note note
    NOTE
    Although Commerce allows configuring multiple coupon codes, a customer may apply only one coupon code to the cart. (See the Coupon codes for more information.)
    img-md
    w-700
    Example storefront checkout page

The progress bar at the top of the page follows each step of the checkout process, and the Order Summary shows the information that was entered up to this point.

NOTE
The exception to a two-step checkout applies to virtual and/or downloadable products. If there are only these types of products in the shopping cart, checkout is automatically transformed to one-step procedure, because shipping information is not required.
recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66