vercel/commerce
May 5, 2026
Date: May 2026
Generated by Inkwell Forge — automated codebase documentation analysis. Subject matter expert review is recommended before distribution.
This End-User Manual covers 5 screen(s) of the Commerce application.
Screens covered in this document:
/)/[page])/product/[handle])/search)/search/[collection])Screens and features not included in the assessed documentation are outside the scope of this document.
The Commerce application is a full-featured online store that lets shoppers browse, discover, and purchase products. The store presents a curated selection of products on its home page, supports keyword search and category browsing, and provides detailed product pages where shoppers can review product information and add items to their cart.
The store is designed to be fast and easy to navigate — pages load quickly, and you can move between products, categories, and informational pages without unnecessary delays.
The store is open to all visitors. You do not need an account to browse products, read informational pages, or search the catalog. Any shopper who visits the site can use all of the features described in this manual.
Open your web browser and navigate to the store's web address. The home page loads automatically and is your starting point for all browsing and shopping activity.
The screens covered in this document are all publicly accessible — no login is required to browse products, search the catalog, or read informational pages.
Note: Account-based features such as order history, saved addresses, and checkout may require you to sign in. Those screens are outside the scope of this document. Please consult your system administrator for the complete process.
Session timeout behavior is not applicable to the publicly accessible screens covered in this document.
The store is organized around a few key areas:
You can always return to the home page by clicking the store's logo or navigating to the root address. The footer at the bottom of every page provides links to informational pages and site-wide navigation.
Several features and controls appear on more than one screen in the store. Rather than repeat the same instructions throughout this manual, this section describes each shared feature once. Individual screen chapters refer back here when these features appear.
A product grid is a structured display of multiple products arranged in rows and columns. You will encounter product grids on the Search Screen and the Search Detail Screen.
The grid automatically adjusts the number of columns based on your screen size:
Each item in the grid is a Product Card (described below).
If no products are available to display — either because a search returned no results or a collection contains no products — the grid is not shown. Instead, a message appears explaining that no products were found. See Section 2.1 — Empty State Messages below.
A product card is a clickable tile representing a single product. Cards appear inside product grids and in the Related Products section of the Product Detail Screen.
Each product card typically displays:
Sort controls let you change the order in which products are displayed on a screen. Sort controls appear on the Search Screen and the Search Detail Screen.
Sorting is controlled by a sort option that you select. The available sort options are defined by the store and may include options such as sorting by price (low to high or high to low), by title, by best-selling status, or by newest arrivals. The exact list of available sort options depends on the store's configuration.
When you select a sort option, the page reloads and displays products in the new order. The selected sort option is reflected in the page's web address, which means you can bookmark or share a sorted view and it will display the same way when revisited.
If no sort option is selected, the store uses a default sort order automatically.
Note: The sort control itself (the dropdown or button that lets you choose a sort option) is part of the site's navigation or layout area, which is outside the scope of the screens documented here. The sort options and their effect on product display are documented in the relevant screen chapters. Consult your system administrator if you cannot locate the sort control in the application.
The footer is a consistent band of links and information displayed at the bottom of every page in the store.
The footer contains:
Note: The exact links and content displayed in the footer depend on how the store has been configured. The footer's full contents are outside the scope of this document.
The Home screen is the store's main landing page — the first thing you see when you visit the store's web address. Its purpose is to give you an immediate, visually engaging introduction to the store's products and to help you start browsing quickly.
From the home page you can:
The Home screen is always available at the store's root web address. You can return to it at any time by:
No login or special access is required.
The Home screen is organized into three sections stacked from top to bottom: the Featured Products Grid, the Product Carousel, and the Footer.
[Screenshot: Full home page showing the three-item featured grid at the top, the product carousel below it, and the footer at the bottom]
The topmost section of the page is a prominent visual grid showcasing exactly three featured products. This section is designed to be the first thing you notice when you arrive at the store.
The layout typically presents:
Each product in the grid shows the product's image and identifying information. Clicking on any product in this grid takes you directly to that product's Product Detail Screen.
The three products shown here are specifically chosen or curated by the store — they are not random. This section is intended to highlight the store's most important or promoted items at any given time.
[Screenshot: The three-item featured grid showing the large hero product and two smaller secondary products]
Directly below the featured grid is a horizontally scrollable carousel of additional products. This section lets you browse a broader selection of the store's catalog without leaving the home page.
What you'll see in the carousel:
How to use the carousel:
[Screenshot: The product carousel showing a horizontal row of product tiles, with scroll/swipe interaction visible]
The footer appears at the bottom of the home page and is consistent across all pages in the store. See The Footer in the Common Features Guide for a full description.
This screen contains no input fields. The Home screen is a display and navigation page — all interactions are clicks and scrolls, not form entries.
Q: Why are only three products shown in the top grid? The featured grid is intentionally curated to highlight exactly three products at a time. The store's team selects which products appear here. If you want to browse more products, use the carousel below or navigate to the Search Screen.
Q: Can I search for a product from the home page? The home page itself does not contain a search form. A search bar may be available in the site's header navigation (which is outside the scope of this document). You can also navigate directly to the Search Screen.
Q: The carousel seems to have more products than I can see — how do I view them all? Scroll or swipe horizontally within the carousel to reveal more products. You can also visit the Search Screen to see the full product catalog in a grid layout.
Q: The featured products look the same every time I visit. Do they ever change? The featured products are curated by the store's team and updated at their discretion. Changes to the featured selection are made in the store's administration system and will appear automatically when the page is next loaded.
Q: What happens if I click a product and it doesn't exist anymore? If a product has been removed from the store, clicking its link will display a "page not found" message. This is uncommon but can happen if the store's catalog changes between your visits.
| Problem | Likely Cause | What to Do |
|---|---|---|
| The featured products grid appears blank | The store's featured collection may be empty, or the store's product data may be temporarily unavailable | Refresh the page. If the problem persists, try again later or contact the store. |
| The product carousel is not visible | No carousel products are available, or the section failed to load | Refresh the page. If the problem persists, try again later. |
| Clicking a product does nothing | A temporary loading issue or browser problem | Try clicking again. If the problem continues, refresh the page. |
| The page appears completely blank | A temporary error loading the page | Refresh the page. If the problem persists, try clearing your browser cache or using a different browser. |
| Footer links are not working | A temporary browser or network issue | Try clicking the link again. If the problem continues, try navigating directly to the page's web address. |
The Item Detail screen displays the full content of a single informational page — such as About Us, Privacy Policy, Terms of Service, or FAQ. These pages contain text and information authored by the store's team and are intended to inform visitors about the store, its policies, and other relevant topics.
This screen is read-only. There is nothing to fill in or submit — you simply read the content presented.
You typically arrive at an informational page by:
Each informational page has its own unique web address (for example, /about, /privacy-policy, /terms-of-service).
If you navigate to an address that does not correspond to a valid page, the store will display a "page not found" message.
The Item Detail screen has a clean, minimal layout with three elements displayed from top to bottom.
[Screenshot: An informational page showing the large page title at the top, the body text content in the middle, and the small italic "Last updated" date at the bottom]
At the very top of the content area, the page's title is displayed in large, bold text. This heading clearly identifies which informational page you are reading (for example, "Privacy Policy" or "About Us").
Below the title, the full text of the page is displayed. This content is formatted for easy reading and may include:
The content is authored and maintained by the store's team in the store's administration system. The formatting and structure of the content will vary from page to page.
At the bottom of the page content, a small line of italic text shows the date the page was last updated, in the format: Month Day, Year (for example, January 15, 2024 or March 3, 2026).
This date reflects when the store's team last made changes to the page's content.
This screen contains no input fields. The Item Detail screen is a read-only content display page. No information is entered or submitted here.
Q: How do I find the Privacy Policy or Terms of Service? These pages are typically linked from the Footer at the bottom of every page in the store. Scroll to the bottom of any page and look for the relevant link.
Q: The page I'm looking for shows a "page not found" message. What happened? The page either does not exist at that web address, or it has been removed or renamed by the store's team. Try navigating to the home page and using the footer links to find the page you need.
Q: Can I print or save an informational page? Yes. Use your browser's built-in print function (usually accessible via File > Print or by pressing Ctrl+P / Cmd+P) to print or save the page as a PDF.
Q: The "Last Updated" date shows an unexpected value. Is the content current? The date shown reflects when the store's team last saved a change to that page. If you have concerns about whether the content is current, contact the store directly.
Q: There are links within the page content — where do they go? Links embedded in the page body are placed there by the store's team and may lead to other pages within the store or to external websites. The destination of each link is determined by the store's team, not by this application.
| Problem | Likely Cause | What to Do |
|---|---|---|
| The page shows "page not found" | The web address does not match any informational page in the store | Check the address for typos. Navigate to the home page and use footer links to find the page. |
| The page title appears but the content area is blank | The page exists but has no body content, or the content failed to load | Refresh the page. If the content remains blank, the page may genuinely have no content — contact the store for assistance. |
| The "Last Updated" date shows "Invalid Date" | The date information for this page is missing or incorrectly formatted in the store's system | This is a data issue in the store's administration system. Contact the store's team to report it. |
| The page takes a long time to load | A slow network connection or temporary server issue | Wait a moment and try refreshing. If the problem persists, try again later. |
| An embedded link within the content does not work | The linked page may have moved or been removed | Try navigating to the linked destination directly, or contact the store for assistance. |
The Product Detail screen is the full information page for a single product. This is where you come to learn everything about a product before deciding to buy it. You can view product images, read the product description, see pricing, choose from available options (such as size or color), and add the product to your cart.
The screen also shows related products at the bottom, giving you easy access to similar items you might be interested in.
You arrive at a Product Detail screen by:
/product/classic-white-tee).Each product has its own unique web address. If you navigate to an address that does not match any product in the store, the store will display a "page not found" message.
The Product Detail screen is divided into a main product area at the top and a related products section below, followed by the footer.
[Screenshot: Full product detail page showing the image gallery on the left, product description panel on the right, related products row below, and footer at the bottom]
The main product area is a card-style container that holds two side-by-side panels on larger screens, or stacks them vertically on smaller screens.
The left side of the main product area displays the product's images.
If a product has no images, the gallery area will be empty.
[Screenshot: Product image gallery showing the main large image and thumbnail navigation]
The right side of the main product area contains all the key details about the product and the controls for purchasing it.
Product Title The product's name is displayed prominently at the top of this panel.
Pricing The product's price is shown below the title. If the product has multiple variants (for example, different sizes or colors) that are priced differently, a price range may be displayed showing the lowest and highest prices available across all variants.
Variant Selectors If the product comes in multiple options — such as different sizes, colors, or materials — selector controls appear here. You must choose your preferred option before adding the product to your cart.
Add to Cart An Add to Cart button (or equivalent control) lets you add the selected product variant to your shopping cart.
Note: The specific appearance and behavior of the variant selectors and the Add to Cart button are managed within the product description component. Detailed instructions for selecting variants and adding to cart are outside the scope of this document. Please consult your system administrator for the complete process.
Availability The product's availability status is reflected in the page. If no variant of the product is currently available for purchase, the add-to-cart functionality will reflect this.
[Screenshot: Product description panel showing title, price, variant selectors, and add-to-cart button]
Below the main product card, a section headed "Related Products" displays a horizontally scrollable row of product tiles.
[Screenshot: Related products row showing several product tiles with images, titles, and prices]
The footer appears at the bottom of the page. See The Footer in the Common Features Guide.
Note: Detailed steps for variant selection and cart interactions are outside the scope of this document. Please consult your system administrator for the complete process.
The input controls on this screen are managed within the product description panel. The specific fields available depend on the product.
| Field Name | What It Means | Required? | Accepted Values / Format | Example |
|---|---|---|---|---|
| Variant Selector | Lets you choose a specific version of the product (e.g., size, color, material) | Yes — a selection is required before adding to cart | The available options for this product, as defined by the store | Size: Medium; Color: Navy Blue |
Note: The exact variant options available depend on the individual product. Not all products have variant selectors — some products have only one version and can be added to the cart directly.
Q: The product I want shows a price range. Which price will I pay? The price range reflects the spread across all available variants. The price you pay depends on which variant you select. Once you choose a specific option (such as a size or color), the displayed price will reflect that variant's exact price.
Q: I can't find the Add to Cart button. Where is it? The Add to Cart button is in the right panel of the main product area, below the variant selectors. If the product is out of stock, the button may be disabled or replaced with an out-of-stock indicator.
Q: The image gallery shows a blank square. Is something wrong? A blank square in the gallery area is a normal loading placeholder — it appears briefly while the product images are being loaded. If it persists after a few seconds, try refreshing the page.
Q: There are no Related Products shown. Is that normal? Yes. The Related Products section only appears when the store has identified algorithmically similar products. For some products, no recommendations are available, and the section is simply not displayed.
Q: I navigated to a product link and got a "page not found" message. What happened? The product may have been removed from the store, or the web address may contain a typo. Return to the Home Screen or use the Search Screen to find the product you're looking for.
| Problem | Likely Cause | What to Do |
|---|---|---|
| The page shows "page not found" | The product does not exist at that web address, or has been removed | Check the address for typos. Use the Search screen to find the product. |
| The image gallery is blank (no placeholder, no images) | The product has no images in the store's catalog | This is expected for products without images. Read the product description for details. |
| The product description panel is not visible | The panel is still loading (no placeholder is shown during load) | Wait a moment for the page to finish loading. If the panel does not appear, refresh the page. |
| The Add to Cart button is not working | A variant may not be selected, or the product may be out of stock | Ensure you have selected all required variant options. Check whether the product is shown as available. |
| Related products are not showing | No recommendations exist for this product, or the section failed to load | This is normal for some products. If you suspect a loading error, refresh the page. |
| The page takes a long time to load | Slow network connection or temporary server issue | Wait a moment and try refreshing. If the problem persists, try again later. |
The Search screen is the store's primary product discovery tool. Use it to find products by typing keywords, or to browse the entire product catalog in one place. You can also sort the results to find what you're looking for more easily.
The Search screen works in two modes:
You arrive at the Search screen by:
/search in your browser's address bar./search?q=hoodie.The Search screen has a simple layout: an optional results summary message at the top, followed by a product grid.
[Screenshot: Search screen showing the results summary message at the top and the product grid below, with a sample search query active]
When you have typed a search term, a line of text appears above the product grid summarizing your results. This line shows one of two messages:
When you are browsing without a search term, no summary message is shown.
Below the results summary (or at the top of the content area when browsing without a search term), the matching products are displayed in a responsive grid.
This screen uses the standard product grid layout described in Working with Product Grids in the Common Features Guide. Each item in the grid is a Product Card.
Empty state: If your search returns no results, the product grid is not shown — only the "no products" message appears.
The order in which products appear in the grid is controlled by the active sort option. See Sort Controls in the Common Features Guide for how sorting works. If no sort option has been selected, the store's default sort order is applied automatically.
The Search screen itself does not contain a search input field — the search query is entered in the site's header navigation bar, which is outside the scope of this document. The screen receives and displays the results of that query.
| Field Name | What It Means | Required? | Accepted Values / Format | Example |
|---|---|---|---|---|
| Search Query (in URL) | The keyword(s) used to filter the product list | No — if absent, all products are shown | Any text string | hoodie, blue t-shirt, size medium |
| Sort Order (in URL) | Controls the order in which products are displayed | No — defaults to the store's default sort if absent | A recognized sort option slug | price-asc, trending |
Note: These values are passed to the Search screen via the page's web address (URL parameters). You set them by using the search bar and sort controls in the site's navigation, not by typing directly into fields on this screen.
Q: I searched for a product but got no results. What should I try? Try a shorter or more general search term. For example, if "women's waterproof hiking boot size 8" returns nothing, try "hiking boot" or just "boot." Also check for typos in your search term.
Q: The Search screen shows products even though I didn't type anything. Is that normal? Yes. When no search term is active, the Search screen displays all products in the store. This is the browse mode, and it's intentional — it lets you explore the full catalog.
Q: What does "Showing 1 result for" mean versus "Showing 3 results for"? These messages tell you how many products matched your search term. "1 result" means exactly one product was found. "3 results" means three products matched. The phrasing automatically adjusts to be grammatically correct.
Q: What happens if I change the sort order while a search is active? The page reloads with the same search term applied, but the products are now displayed in the new sort order. Both your search term and your sort choice are preserved in the web address.
Q: The page appears blank with no products and no message. What's happening? If you are browsing without a search term and the store has no products at all, the page will appear blank below the navigation. This is an edge case — if you believe products should be visible, try refreshing the page or contact the store.
| Problem | Likely Cause | What to Do |
|---|---|---|
| No products appear and no message is shown | Browsing without a search term and the store has no products, or a loading error occurred | Refresh the page. If the problem persists, try again later or contact the store. |
| "No products that match" message appears for a common term | The search term may not match any product titles or descriptions | Try a different or broader search term. Check for typos. |
| The page shows a generic error | A temporary problem connecting to the store's product data | Refresh the page. If the error persists, try again in a few minutes. |
| Sort order does not seem to change | The sort control may not have been applied, or the page may not have reloaded | Confirm your sort selection and wait for the page to reload. Try refreshing if the order does not update. |
| Products appear but clicking a card does nothing | A temporary browser or loading issue | Try clicking again. Refresh the page if the problem continues. |
The Search Detail screen displays all products belonging to a specific collection — a named grouping of products defined by the store (for example, "T-Shirts," "New Arrivals," or "Sale Items"). Think of a collection as a product category.
This screen is the collection browsing page. When you navigate to a collection, you see all the products in that group, and you can sort them to find what you need. It works similarly to the Search Screen but is focused on a specific category rather than a keyword search.
You arrive at a Search Detail screen by:
/search/t-shirts or /search/new-arrivals.Each collection has its own unique web address. If you navigate to an address that does not match a valid collection in the store, the store will display a "page not found" message.
The Search Detail screen has a focused, minimal layout: either a product grid or an empty-state message, depending on whether the collection contains products.
[Screenshot: Search Detail screen showing a collection's product grid with multiple product cards visible]
When the collection contains products, a responsive product grid is displayed showing all products in the collection.
This screen uses the standard product grid layout described in Working with Product Grids in the Common Features Guide. Each item in the grid is a Product Card.
The order in which products appear is controlled by the active sort option. See Sort Controls in the Common Features Guide.
When the collection exists in the store but contains no products, the product grid is replaced by the message:
"No products found in this collection"
This message confirms that you have reached a valid collection page, but the collection is currently empty.
If the collection handle in the web address does not match any collection in the store, the store's standard "page not found" (404) screen is displayed instead of this screen.
/search/new-arrivals?sort=price-asc and it will display the same collection in the same sort order when revisited.This screen contains no input fields. Filtering and sorting are controlled through the web address (URL parameters), not through form fields on this screen.
| Field Name | What It Means | Required? | Accepted Values / Format | Example |
|---|---|---|---|---|
| Collection (in URL path) | Identifies which collection of products to display | Yes — part of the web address | A valid collection identifier as defined in the store | t-shirts, new-arrivals, sale |
| Sort Order (in URL) | Controls the order in which products are displayed | No — defaults to the store's default sort if absent | A recognized sort option slug | price-asc, best-selling |
Q: I clicked a category link and got a "page not found" message. What happened? The collection at that web address does not exist in the store, or the link may be outdated. Try navigating to the home page and using the site's navigation to find the category you're looking for.
Q: The collection page shows "No products found in this collection." Does that mean the category doesn't exist? No — it means the collection exists but currently has no products assigned to it. The collection is valid, but empty. Check back later, as the store's team may add products to it.
Q: Can I search within a collection? The Search Detail screen does not have a keyword search field of its own. To search within a category, use the main Search Screen with a keyword, and then apply a sort order. Alternatively, consult the site's navigation for any category-specific filtering options.
Q: I sorted the collection, but the order doesn't look right. What's happening? The sort order is applied based on the option you selected. If the results seem unexpected, try selecting a different sort option or refreshing the page. If the problem persists, the sort control may not have been applied correctly — try selecting the sort option again.
Q: Can I share a link to this collection with a specific sort order applied? Yes. The sort order is part of the web address. Copy the address from your browser's address bar after applying your preferred sort, and share that link. Anyone who opens it will see the same collection in the same sort order.
| Problem | Likely Cause | What to Do |
|---|---|---|
| The page shows "page not found" | The collection handle in the web address does not match any collection in the store | Check the address for typos. Use the site's navigation to find the correct collection link. |
| "No products found in this collection" message | The collection exists but has no products assigned to it | This is expected for empty collections. Check back later or browse other collections. |
| The product grid does not appear | A temporary error loading the collection's products | Refresh the page. If the problem persists, try again later. |
| The page shows a generic error | A temporary problem connecting to the store's product data | Refresh the page. If the error persists, try again in a few minutes. |
| Sort order does not update | The sort control may not have been applied, or the page may not have reloaded | Confirm your sort selection and wait for the page to reload. Refresh if the order does not update. |
| Term | Definition |
|---|---|
| Add to Cart | The action of placing a selected product variant into your shopping cart, making it available for purchase at checkout. |
| Availability | Whether a product (or a specific variant of a product) can currently be purchased. A product may be listed on the store but marked as unavailable if it is out of stock. |
| Browse Mode | The state of the Search screen when no search keyword is active. In browse mode, all products in the store are displayed, subject to the active sort order. |
| Carousel | A horizontally scrollable row of product tiles on the Home screen, allowing you to browse a wide selection of products without navigating away from the page. |
| Collection | A named grouping of products in the store, equivalent to a product category (for example, "T-Shirts," "New Arrivals," "Sale"). Collections are managed by the store's team and browsed via the Search Detail screen. |
| Currency Code | A three-letter code identifying the currency in which a price is expressed (for example, USD for US dollars, GBP for British pounds). |
| Default Sort | The sort order applied automatically when no sort option has been selected. Determined by the store's configuration. |
| Empty State | The appearance of a screen or section when there is no data to display. For example, a search with no matching products shows an empty state message instead of a product grid. |
| Featured Products | The three products displayed prominently in the top grid section of the Home screen. These are specifically chosen or curated by the store's team. |
| Footer | The band of links and information displayed at the bottom of every page in the store, providing access to informational pages and site-wide navigation. |
| Handle | A URL-safe text identifier used by the store to uniquely identify a product or collection. Derived from the item's name (for example, "New Arrivals" becomes new-arrivals). Appears as part of the web address. |
| Hero Product | The largest, most prominently displayed product in the Featured Products Grid on the Home screen. |
| Informational Page | A content page in the store containing text authored by the store's team, such as About Us, Privacy Policy, Terms of Service, or FAQ. Accessed via the Item Detail screen. |
| Last Updated Date | The date shown at the bottom of an informational page indicating when the store's team last made changes to that page's content. |
| Page Not Found (404) | The screen displayed when you navigate to a web address that does not correspond to any valid page, product, or collection in the store. |
| Price Range | The spread of prices across all variants of a product. Displayed on the Product Detail screen when different variants (such as sizes or colors) are priced differently. Shows the lowest and highest prices available. |
| Product Card | A clickable tile representing a single product, showing the product image, title, and price. Appears in product grids and the Related Products section. |
| Product Grid | A structured display of multiple product cards arranged in rows and columns, used on the Search and Search Detail screens. Automatically adjusts the number of columns based on screen size. |
| Related Products | A section at the bottom of the Product Detail screen showing algorithmically recommended products that are similar to the one you are viewing. Only appears when recommendations are available. |
| Results Summary | The line of text on the Search screen that tells you how many products matched your search term, or that no products were found. Only shown when a search keyword is active. |
| Sort Order | The sequence in which products are displayed in a grid or list. Can be changed using the sort control. Options may include sorting by price, title, best-selling status, or newest arrivals. |
| Variant | A specific version of a product defined by one or more options, such as size, color, or material. For example, a T-shirt might have variants for Small/Blue, Small/Red, Medium/Blue, and so on. You must select a variant before adding a product to your cart. |
| Variant Selector | A control on the Product Detail screen that lets you choose a specific variant of a product (for example, selecting a size or color). |
| Task | Where to Go | How to Do It |
|---|---|---|
| Visit the store's home page | Home screen (/) |
Navigate to the store's web address in your browser, or click the store logo |
| Browse featured products | Home screen | View the Featured Products Grid at the top of the page; click any product to open it |
| Browse more products | Home screen | Scroll or swipe through the Product Carousel below the featured grid |
| Search for a product by keyword | Search screen (/search) |
Use the search bar in the site's header navigation to type a keyword and submit |
| Browse all products | Search screen | Navigate to the Search screen without a search term to see all products |
| Browse a product category | Search Detail screen (/search/[collection]) |
Click a collection or category link in the site's navigation |
| Sort products | Search or Search Detail screen | Use the sort control in the site's navigation area to select a sort option |
| View a product's full details | Product Detail screen (/product/[handle]) |
Click any product card from any screen |
| Browse product images | Product Detail screen | Use the gallery controls in the left panel to view up to 5 images |
| Select a product variant | Product Detail screen | Use the variant selector controls in the right panel to choose size, color, etc. |
| Add a product to your cart | Product Detail screen | Select a variant, then click Add to Cart in the right panel |
| View related products | Product Detail screen | Scroll below the main product area to the Related Products row |
| Read the Privacy Policy or Terms of Service | Item Detail screen | Click the relevant link in the Footer at the bottom of any page |
| Return to the home page from anywhere | Home screen | Click the store logo or home link in the site's navigation |
This appendix is for document maintainers. It maps each section of this manual to the source screen documentation it was derived from.
| Document Section | Source Screen(s) | Route(s) |
|---|---|---|
| 1. Introduction | Home, general application context | / |
| 2.1 Working with Product Grids | Search, Search Detail | /search, /search/[collection] |
| 2.2 Product Cards | Search, Search Detail, Product Detail | /search, /search/[collection], /product/[handle] |
| 2.3 Sort Controls | Search, Search Detail | /search, /search/[collection] |
| 2.4 The Footer | Home, Item Detail, Product Detail | /, /[page], /product/[handle] |
| 3. Home Screen | Home | / |
| 3.1 Overview | Home | / |
| 3.2 Getting There | Home | / |
| 3.3 What You'll See | Home | / |
| 3.4 Available Actions | Home | / |
| 3.5 Field Reference | Home | / |
| 3.6 Tips & Best Practices | Home | / |
| 3.7 Common Questions | Home | / |
| 3.8 Troubleshooting | Home | / |
| 4. Item Detail Screen | Item Detail | /[page] |
| 4.1 Overview | Item Detail | /[page] |
| 4.2 Getting There | Item Detail | /[page] |
| 4.3 What You'll See | Item Detail | /[page] |
| 4.4 Available Actions | Item Detail | /[page] |
| 4.5 Field Reference | Item Detail | /[page] |
| 4.6 Tips & Best Practices | Item Detail | /[page] |
| 4.7 Common Questions | Item Detail | /[page] |
| 4.8 Troubleshooting | Item Detail | /[page] |
| 5. Product Detail Screen | Product Detail | /product/[handle] |
| 5.1 Overview | Product Detail | /product/[handle] |
| 5.2 Getting There | Product Detail | /product/[handle] |
| 5.3 What You'll See | Product Detail | /product/[handle] |
| 5.4 Available Actions | Product Detail | /product/[handle] |
| 5.5 Field Reference | Product Detail | /product/[handle] |
| 5.6 Tips & Best Practices | Product Detail | /product/[handle] |
| 5.7 Common Questions | Product Detail | /product/[handle] |
| 5.8 Troubleshooting | Product Detail | /product/[handle] |
| 6. Search Screen | Search | /search |
| 6.1 Overview | Search | /search |
| 6.2 Getting There | Search | /search |
| 6.3 What You'll See | Search | /search |
| 6.4 Available Actions | Search | /search |
| 6.5 Field Reference | Search | /search |
| 6.6 Tips & Best Practices | Search | /search |
| 6.7 Common Questions | Search | /search |
| 6.8 Troubleshooting | Search | /search |
| 7. Search Detail Screen | Search Detail | /search/[collection] |
| 7.1 Overview | Search Detail | /search/[collection] |
| 7.2 Getting There | Search Detail | /search/[collection] |
| 7.3 What You'll See | Search Detail | /search/[collection] |
| 7.4 Available Actions | Search Detail | /search/[collection] |
| 7.5 Field Reference | Search Detail | /search/[collection] |
| 7.6 Tips & Best Practices | Search Detail | /search/[collection] |
| 7.7 Common Questions | Search Detail | /search/[collection] |
| 7.8 Troubleshooting | Search Detail | /search/[collection] |
| 8. Glossary | All screens | All routes |
| 9. Quick Reference Card | All screens | All routes |
| Screen Name | Route | Coverage Status |
|---|---|---|
| Home | / |
Covered |
| Item Detail | /[page] |
Covered |
| Product Detail | /product/[handle] |
Covered |
| Search | /search |
Covered |
| Search Detail | /search/[collection] |
Covered |
The following areas of the application are referenced in the documented screens but were not included in the assessed documentation. They are outside the scope of this document.
| Area | Referenced From | Notes |
|---|---|---|
| Site header / navigation bar | All screens | Contains the search input bar and likely the sort control UI. Referenced throughout but not documented. |
| Search bar component | Search screen, Home screen | The input field where users type search queries is part of the header, not the Search screen itself. |
| Sort control UI | Search screen, Search Detail screen | The dropdown or button used to select a sort option is described as being in a parent layout or navigation area, not in the documented screen components. |
| Cart and checkout | Product Detail screen | Add-to-cart functionality and the checkout flow are encapsulated within the ProductDescription component, which was not assessed. |
ProductDescription component |
Product Detail screen | Variant selectors and add-to-cart behavior are inside this component. Its internal UI and behavior were not documented. |
Gallery component internals |
Product Detail screen | Thumbnail navigation and image browsing controls are inside this component. Its internal UI was not documented. |
Footer component internals |
Home, Item Detail, Product Detail | The specific links and content in the footer were not documented. |
| Account / login screens | Referenced in Introduction | Authentication and account management screens were not assessed. |
| 404 Not Found screen | Item Detail, Product Detail, Search Detail | Referenced as the destination when invalid handles are accessed, but not documented. |
| Error boundary screen | Search, Search Detail, Product Detail | Referenced as the fallback for API failures, but not documented. |
ProductGridItems component internals |
Search, Search Detail | The internal rendering of individual product cards (exact fields shown, click behavior) was described at a high level but the component itself was not assessed in detail. |
| Workflow | Documented Steps | Gap |
|---|---|---|
| Adding a product to the cart | Step 1 (navigate to Product Detail screen) and the existence of variant selectors and an Add to Cart button are documented | Steps covering variant selection interaction, cart confirmation, and checkout are outside the scope of assessed documentation. Steps 2 onwards could not be verified from available documentation. |
| Using the search bar | The effect of a submitted search query on the Search screen is documented | The search bar UI itself (location, appearance, submission behavior) is in the site header, which was not assessed. Steps 1 (locating and using the search bar) could not be verified from available documentation. |
| Selecting a sort option | The effect of the ?sort= URL parameter on product ordering is documented |
The sort control UI (location, appearance, available options list) is in a parent layout component not assessed. Step 1 (locating and using the sort control) could not be verified from available documentation. |
| Checkout and purchase completion | Not documented | Entirely outside the scope of assessed screens. |
The following items were inferred from standard conventions rather than being explicitly stated in the source documentation. These should be verified before distributing this document.
| Inferred Item | Location in This Document | Basis for Inference | Recommendation |
|---|---|---|---|
| The carousel includes previous/next navigation arrow controls | Section 3.3 — Product Carousel | Standard carousel UI convention; source documentation states "may also include previous/next navigation controls" | WHO: The product owner or front-end developer responsible for the Carousel component. WHAT: Ask whether the carousel renders explicit previous/next arrow buttons, and if so, what they look like and where they are positioned. WHERE: Insert the confirmed description into Section 3.3 under "How to use the carousel." |
| Clicking a product card navigates to the Product Detail screen | Section 2.2 — Product Cards, multiple chapters | Stated in source documentation for ProductGridItems and ThreeItemGrid as expected behavior |
Low risk — this is explicitly stated in the source documentation as the intended behavior. Verify during QA testing. |
| The sort control is located in the site header or a parent layout component | Section 2.3 — Sort Controls, Sections 6 and 7 | Source documentation for Search and Search Detail screens states sort UI is "rendered elsewhere, likely in a parent layout or search/layout.tsx" |
WHO: The front-end developer or product owner responsible for the search layout. WHAT: Ask where the sort control is rendered, what it looks like, and what the exact list of available sort option labels is. WHERE: Insert the confirmed description into Section 2.3 and update Sections 6.3 and 7.3 accordingly. |
| The search bar is located in the site header | Section 6.2 — Getting There, Section 6.4 | Source documentation states the search bar is "in the site header or navigation bar" | WHO: The front-end developer or product owner responsible for the site header. WHAT: Ask where the search bar is located, what it looks like, and how to submit a search (e.g., press Enter, click a button). WHERE: Insert the confirmed description into Section 6.2 and Section 6.4. |
| Available sort option labels (e.g., "price low to high," "best-selling") | Section 2.3 — Sort Controls, Sections 6.6, 7.6 | Sort option slugs such as price-asc and best-selling are referenced in source documentation; human-readable labels were not documented |
WHO: The front-end developer with access to lib/constants. WHAT: Ask for the complete list of sort option labels as they appear to users in the sort control UI. WHERE: Insert the confirmed list into Section 2.3 and the Quick Reference Card (Section 9). |
The ProductDescription component contains variant selectors and an Add to Cart button |
Section 5.3, Section 5.4, Section 5.5 | Explicitly stated in source documentation as the component's purpose, but the component's internal UI was not assessed | WHO: The front-end developer responsible for the ProductDescription component, or the QA team lead. WHAT: Ask for a description of all UI elements within the product description panel: exact field labels, button labels, how variant options are presented (dropdowns, swatches, radio buttons, etc.), and any validation messages shown when a required variant is not selected. WHERE: Insert the confirmed details into Sections 5.3, 5.4, and 5.5. |
The Gallery component supports thumbnail navigation |
Section 5.3 — Left Panel | Source documentation describes the Gallery as "likely with thumbnail navigation" | WHO: The front-end developer responsible for the Gallery component, or the QA team lead. WHAT: Ask how users navigate between product images — are there thumbnails, arrow buttons, swipe gestures, or a combination? How many navigation controls are visible? WHERE: Insert the confirmed description into Section 5.3 under "Left Panel — Product Image Gallery." |
Verify the sort control UI (location, appearance, and full list of option labels) before distributing this document. Sections 2.3, 6.3, 6.4, 7.3, and 7.4 all reference the sort control without being able to describe its exact appearance.
Verify the search bar UI (location, appearance, and submission method) before distributing this document. Sections 6.2 and 6.4 describe the effect of searching but cannot describe how to initiate a search.
Assess the ProductDescription component to complete the Product Detail chapter. Sections 5.3, 5.4, and 5.5 contain gaps regarding variant selection and add-to-cart behavior that are important for shoppers making purchase decisions.
Assess the Gallery component to complete the image browsing instructions in Section 5.3.
Assess the Footer component to provide a complete list of footer links in Section 2.4.
Assess the cart and checkout flow to provide end-to-end purchase guidance. The current document covers product discovery and selection but cannot guide users through completing a purchase.
Assess the site header/navigation component to document the search bar, navigation links, and any account-related controls that appear on every screen.