myowjaYOY/commerce
April 19, 2026
End-User Manual
commerce
Generated by DocAgent — automated codebase documentation analysis. Based on analysis of 5 screens. Subject matter expert review is recommended before distribution.
April 20, 2026
Commerce
End-User Manual
Date: April 2026
Generated by DocAgent — automated codebase documentation analysis. Subject matter expert review is recommended before distribution.
About This Document
This End-User Manual covers 5 screen(s) of the Commerce application.
Screens covered in this document:
Screens and features not included in the assessed documentation are outside the scope of this document.
Note: This document reflects a partial view of the application. Additional screens — including the shopping cart, checkout flow, account management, and order history — should be assessed for comprehensive coverage.
1.1 What Is Commerce?
Commerce is an online storefront application that allows shoppers to discover, browse, and purchase products. It is powered by a Shopify product catalog and presents that catalog through a fast, modern web experience. Shoppers can explore featured products on the home page, search for specific items, browse products organized into collections, view detailed information about individual products, and read informational pages such as "About Us" or "Privacy Policy."
1.2 Who Uses This Application?
Commerce is designed for all shoppers — anyone who visits the store to browse or buy. No account or login is required to browse products, search the catalog, or read content pages. The application is accessible to both first-time visitors and returning customers.
Accessing the Store
Open your web browser and navigate to the store's web address. The Home Screen loads automatically and serves as your starting point.
Logging In and Logging Out
Note: This workflow continues on additional screens not included in this document. Please consult your system administrator for the complete process.
Account login and logout functionality, if available, is managed through screens not covered in this assessment. The five screens documented here are fully accessible without signing in.
Session Timeout
Session timeout behavior is managed outside the screens covered in this document. Please consult your system administrator for details.
Basic Navigation
The application is organized around a few key areas:
Home page — Your starting point, featuring highlighted products and a scrollable product carousel.
Search — Find products by typing keywords into the search bar, typically located in the site header.
Collections — Browse products grouped by category (for example, "Hoodies" or "Accessories") by navigating to a collection page.
Product pages — View full details, select options, and add items to your cart.
Content pages — Read informational pages such as "About Us," "Terms of Service," or "Privacy Policy," accessible via footer links.
The site footer, visible at the bottom of every page, provides links to navigate between key areas of the store.
This section describes interface elements and controls that appear on multiple screens throughout the application. Rather than repeating the same instructions in every chapter, each screen chapter will refer you back here when one of these shared features is relevant.
What It Is
A product grid is the standard way the application displays multiple products at once. You will encounter product grids on the Search Screen and the Search Detail Screen.
How It Looks
The grid arranges product cards in rows and columns. The number of columns adjusts automatically based on your screen size:
Mobile (narrow screen): 1 column
Tablet / medium screen: 2 columns
Desktop / large screen: 3 columns
[Screenshot: Product grid showing three columns of product cards on a desktop-sized screen]
What You Can Do
Browse products — Scroll down to see all products in the grid.
Open a product — Click any product card to go to that product's full detail page. See Chapter 6: Product Detail Screen for what you will find there.
Empty State
If no products are available to display, the grid is hidden entirely. A message will appear in its place explaining why no results are shown (for example, "No products found in this collection" or "There are no products that match [your search term]").
What It Is
Sort controls let you change the order in which products appear in a grid. Sorting is available on the Search Screen and the Search Detail Screen.
How It Works
A sort selector — typically a dropdown menu rendered in the page header or navigation area — lets you choose from a set of predefined sort options. Each option has a descriptive label such as "Price: Low to High" or "Best Selling." When you select an option, the page reloads with your chosen sort order applied.
The sort order you select is reflected in the page's web address (URL). This means you can bookmark or share a sorted view and anyone who opens that link will see the same ordering.
Sort Persistence
Your sort selection is not saved between visits. If you navigate away and return, the default sort order will be applied unless you use a bookmarked URL that includes the sort parameter.
Default Sort Order
If you have not selected a sort option, the application uses a built-in default order (typically by relevance or a store-defined default). This default is applied automatically whenever no sort option is specified.
Tips
Use Price: Low to High to find the most affordable options first.
Sharing a URL with a sort option already applied is a convenient way to send a curated view to someone else.
What It Is
A product card is the compact tile that represents a single product within a grid or carousel. You will see product cards on the Home Screen, Search Screen, and Search Detail Screen.
What a Card Shows
Each product card typically displays:
Product image — A thumbnail photo of the product.
Product title — The name of the product.
Price — The product's price, along with the currency.
What You Can Do
What It Is
The footer is a strip of navigation links and store information that appears at the bottom of every page in the application.
What It Contains
The footer typically includes links to informational pages (such as "About Us," "Privacy Policy," and "Terms of Service"), as well as other store navigation. Clicking a footer link takes you to the corresponding Item Detail Screen or another area of the store.
Note: The specific links and content within the footer are defined by the store's configuration and are outside the detailed scope of this document. Please consult your system administrator for a complete list of footer links.
The Home screen is the front door of the Commerce store. It is the first page you see when you visit the store's web address. Its purpose is to give you an immediate, visually engaging view of featured products and to help you start exploring the catalog. From here you can click through to individual products, scroll through a broader selection of items, and access the rest of the store via the footer.
Direct access: Navigate to the store's root web address (for example, https://yourstore.com/).
From anywhere in the store: Click the store's logo or "Home" link, typically found in the site header.
The Home screen is composed of three stacked sections, displayed from top to bottom.
[Screenshot: Full Home screen showing the featured product grid at the top, the product carousel below it, and the footer at the bottom]
Section 1: Featured Product Grid (Top of Page)
At the very top of the page, you will see a grid of three featured products. This section is designed to be visually prominent and is typically the first thing that catches your eye.
The layout of this grid places one large hero product — displayed at a bigger size — alongside two smaller secondary products. The exact arrangement may vary depending on your screen size, but the intent is always to highlight these three products as the store's current featured selection.
Each featured product is displayed as a clickable tile showing the product image, title, and price. Clicking any tile takes you directly to that product's Product Detail Screen.
[Screenshot: Three-item featured product grid showing one large hero tile and two smaller tiles]
Section 2: Product Carousel (Middle of Page)
Directly below the featured grid, you will find a horizontally scrollable product carousel. This carousel surfaces additional products from the catalog beyond the three featured items.
The carousel displays a row of product cards that extends beyond the visible screen width.
Scroll left or right (by swiping on a touchscreen, or using your mouse's scroll wheel / arrow buttons if provided) to browse through the full selection.
Each card in the carousel shows a product image, title, and price.
Clicking any card takes you to that product's Product Detail Screen.
See Product Cards in the Common Features Guide for a description of what each card displays.
[Screenshot: Horizontal product carousel with several product cards visible and more implied off-screen to the right]
Section 3: Footer (Bottom of Page)
At the bottom of the page is the site footer. See The Site Footer in the Common Features Guide for details.
Empty States
If the store's product catalog is empty or unavailable, the featured grid and carousel sections may appear blank or absent. This is handled within each section individually and does not produce an error message at the page level.
Browsing Featured Products
Browsing the Carousel
Scroll the carousel — Swipe horizontally (on touch devices) or use your mouse to scroll the carousel row left and right, revealing more products.
View a carousel product — Click any product card in the carousel to open its Product Detail Screen.
Navigating the Store
This screen is display-only. There are no input fields, forms, or controls for you to fill in on the Home screen. All interactions are navigation-based (clicking products or links).
Start with the featured grid — The three featured products at the top are curated highlights. If you are new to the store, these are a good first look at what is available.
Don't overlook the carousel — The carousel often contains a broader range of products than the featured section. Scroll all the way to the right to make sure you have seen everything it offers.
Use the footer to orient yourself — If you are looking for store policies, contact information, or other non-product content, the footer links are the quickest way to find them.
Click through to product pages for full details — Product cards on the home page show only a summary. Visit the Product Detail Screen to see all images, read the full description, and check availability before deciding.
Q: How are the three featured products chosen? A: The featured products are selected by the store's administrators through the store's back-end configuration. As a shopper, you cannot change which products appear in the featured grid.
Q: How many products are in the carousel? A: The number of products in the carousel is determined by the store's catalog configuration. Scroll to the right to see all available items — there is no fixed limit visible from the home page.
Q: Can I search for a specific product from the home page? A: Yes. Use the search bar in the site header (typically at the top of every page) to search by keyword. This will take you to the Search Screen with your results.
Q: The carousel or featured section looks empty. Is something wrong? A: If a section appears blank, it may mean the store's product catalog is temporarily unavailable or that no products have been configured for that section. Try refreshing the page. If the problem persists, contact your store administrator.
Q: Will the home page look the same every time I visit? A: The home page reflects the store's current catalog and featured selections. The store's administrators may update the featured products or carousel contents at any time, so the page may look different between visits.
| Problem | Likely Cause | What to Do |
|---|---|---|
| Featured product grid appears blank | Products are unavailable or the catalog is loading | Refresh the page. If the problem continues, contact your store administrator. |
| Carousel is empty or not visible | No carousel products are configured, or data failed to load | Refresh the page. If the problem continues, contact your store administrator. |
| Clicking a product tile does nothing | A temporary browser or network issue | Try refreshing the page and clicking again. Check your internet connection. |
| Page takes a long time to load | Slow internet connection or high server load | Wait a moment and try again. Check your internet connection. |
The Search screen is where you go to find specific products by typing keywords. Enter a word or phrase — such as a product name, material, or style — and the store will display all matching products in a responsive grid. You can also sort the results to find what you are looking for more quickly. This is the primary tool for targeted product discovery when you have something specific in mind.
From the site header: Type a search term into the search bar (typically located at the top of every page) and press Enter or click the search button. You will be taken to the Search screen with your results displayed.
Direct URL: Navigate to /search on the store's web address. Without a search term, the page will appear blank until you enter a query.
With a pre-filled search: A URL in the format /search?q=your+search+term will open the Search screen with results already loaded for that term.
The Search screen has a simple, focused layout with up to two visible areas depending on your search.
[Screenshot: Search screen showing a results summary line at the top and a three-column product grid below]
Results Summary (Appears Only When You Have Searched)
When you have entered a search term, a line of text appears at the top of the content area summarizing your results. This line takes one of two forms:
When results are found: Showing N result(s) for "your search term" — where N is the number of matching products. The word "result" or "results" is used correctly based on the count (for example, "Showing 1 result for" vs. "Showing 4 results for"). Your search term appears in bold.
When no results are found: There are no products that match "your search term" — with your search term in bold.
If you navigate to the Search screen without entering any search term, this summary line is not shown at all.
Product Grid (Appears Only When Results Exist)
When your search returns at least one product, a responsive product grid is displayed below the summary line. See Working with Product Grids in the Common Features Guide for a full description of how the grid looks and behaves.
Each product card in the grid shows the product image, title, and price. Clicking a card takes you to the Product Detail Screen for that item.
Sort Controls
A sort selector is available to reorder your search results. See Sorting Products in the Common Features Guide for full instructions. The sort control is rendered in the page's header or navigation area, not within the results grid itself.
Empty / No-Query State
If you navigate to /search without entering a search term and no products are returned, the page content area will be blank — no summary text and no grid. This is expected behavior; enter a search term to see results.
[Screenshot: Search screen in the no-results state, showing the "There are no products that match" message with no grid below]
Searching
Sorting Results
Viewing Products
Sharing and Deep-Linking
The Search screen itself does not contain any input fields — the search box is part of the site header, which is outside the scope of this screen's documentation. The screen responds to the following URL parameters, which are set automatically when you use the search bar or sort selector:
| Parameter | What It Does | Required? | Accepted Values | Example |
|---|---|---|---|---|
| Search Query (q) | The keyword or phrase you are searching for | No | Any text string | q=blue+hoodie |
| Sort Order (sort) | The order in which results are displayed | No | A predefined sort option slug (e.g., price-asc) | sort=price-asc |
Be specific for fewer, better results — Searching for "blue linen shirt" will return more targeted results than searching for "shirt" alone.
Try broader terms if you get no results — If your search returns nothing, try a shorter or more general keyword. For example, try "linen" instead of "linen blend summer shirt."
Combine search and sort — Search for a category of product, then sort by price to quickly find the most affordable option within your results.
Bookmark useful searches — If you regularly search for the same type of product, bookmark the URL (including the ?q= parameter) to return to those results instantly.
Use the sort order to compare prices — Sorting by price from low to high or high to low makes it easy to compare options without scrolling back and forth.
Q: I searched for a product I know exists but got no results. Why? A: Search results depend on how products are named and described in the store's catalog. Try alternative keywords — for example, if "t-shirt" returns nothing, try "tee" or "top." If you still cannot find the product, try browsing collections on the Search Detail Screen.
Q: What does "Showing 1 result" mean — is that the only product available? A: It means only one product in the catalog matched your specific search term. The store may have more products in related categories. Try a broader search term or browse a collection to see more options.
Q: Can I search within a specific collection? A: The Search screen searches across the entire catalog. To browse within a specific category, navigate to a collection page (see Chapter 5: Search Detail Screen).
Q: The page is blank after I navigated to Search. Is something broken? A: If you arrived at the Search screen without entering a search term, the page will appear blank — this is expected. Enter a keyword in the search bar to see results.
Q: What happens if I type the same word in the search bar twice in a row? A: The page will reload with the same results. No harm is done — the search simply runs again with the same term.
| Problem | Likely Cause | What to Do |
|---|---|---|
| Page content area is blank | No search term was entered, or the search returned no products | Enter a keyword in the search bar. If you did search, try a different or broader term. |
| "There are no products that match" message | Your search term did not match any products in the catalog | Try a different keyword, check your spelling, or browse a collection instead. |
| Sort order does not seem to change | The page may not have reloaded after selecting a sort option | Wait for the page to finish loading. If the issue persists, try selecting the sort option again. |
| Results look incorrect or unexpected | An unrecognized sort option may have been applied | The application will use the default sort order if it cannot recognize the sort parameter. Try selecting a sort option from the dropdown to reset to a known order. |
| Page fails to load entirely | Network or server issue | Check your internet connection and try refreshing the page. |
The Search Detail screen displays all products belonging to a specific collection — a curated grouping of products defined by the store (for example, "Hoodies," "Accessories," or "Summer Sale"). Think of it as browsing a category page. You can sort the products within the collection to find what you are looking for, and click through to any product for full details. This screen is the primary way to explore the store's catalog by category rather than by keyword.
From collection links: Click a collection link in the site navigation, footer, or any other area of the store that links to a specific category.
Direct URL: Navigate to /search/[collection-name] — for example, /search/hoodies or /search/accessories.
With a sort option: A URL such as /search/hoodies?sort=price-asc will open the collection already sorted by price from low to high.
The Search Detail screen has a clean, minimal layout focused entirely on the product grid.
[Screenshot: Search Detail screen showing a three-column product grid for a collection, with no sidebar or filter panel]
Product Grid (When Products Exist)
When the collection contains products, a responsive grid of product cards fills the page. See Working with Product Grids in the Common Features Guide for a full description of how the grid looks and behaves.
Each product card shows the product image, title, and price. Clicking a card takes you to the Product Detail Screen for that item.
Sort Controls
A sort selector allows you to reorder the products in the collection. See Sorting Products in the Common Features Guide for full instructions. The sort control is rendered in the page's header or navigation area, not within the grid itself.
Empty State (When No Products Exist)
If the collection exists but currently contains no products, the grid is replaced by the message:
No products found in this collection
No grid is shown. This is not an error — it simply means the collection is empty at this time.
[Screenshot: Search Detail screen in the empty state, showing the "No products found in this collection" message]
What Is Not on This Screen
This screen intentionally does not include a sidebar, filter panel, or pagination controls. The entire collection is displayed in a single scrollable grid. Sorting is the only way to reorder results.
Browsing the Collection
Scroll through products — Scroll down to see all products in the grid. There is no pagination; all products load in a single view.
Open a product — Click any product card to navigate to the Product Detail Screen for that item.
Sorting
Sharing and Deep-Linking
This screen does not contain any input fields. It responds to the following URL parameters, which are set automatically when you navigate to a collection or use the sort selector:
| Parameter | What It Does | Required? | Accepted Values | Example |
|---|---|---|---|---|
| Collection (URL path) | Identifies which collection to display | Yes | A valid collection name (URL slug) | /search/hoodies |
| Sort Order (sort) | The order in which products are displayed | No | A predefined sort option slug | sort=best-selling |
Sort by "Best Selling" to see popular items first — If you are not sure where to start in a large collection, sorting by best-selling surfaces the most popular products at the top.
Sort by price to set a budget — Use "Price: Low to High" to quickly identify which products in a collection fit your budget without scrolling through everything.
Bookmark a sorted collection — If you regularly browse a particular category in a specific order, bookmark the URL with the sort parameter included for a one-click shortcut.
An empty collection is not a broken page — If you see "No products found in this collection," the category exists but has no products assigned to it at this time. Check back later or browse a different collection.
Q: How is this different from the Search screen? A: The Search Screen finds products across the entire catalog based on keywords you type. The Search Detail screen shows all products within a specific pre-defined category (collection), regardless of keywords. Use Search when you know what you want; use collection pages when you want to browse a category.
Q: Can I filter products within a collection (for example, by color or size)? A: The Search Detail screen supports sorting only — there is no filter panel on this screen. To narrow down products by attributes like color or size, visit the individual Product Detail Screen for a product and use the variant selectors there.
Q: I see "No products found in this collection." Did I do something wrong? A: No. This message simply means the collection currently has no products assigned to it. The collection itself is valid. Try browsing a different collection or using the Search Screen to find products by keyword.
Q: What happens if I type an invalid collection name in the URL? A: If the collection name in the URL does not match any collection in the store, you will be taken to the store's "Page Not Found" (404) page. This is expected behavior for invalid collection addresses.
Q: Can I share a link to this collection with a friend? A: Yes. The URL in your browser's address bar — including any sort option you have applied — is a stable, shareable link. Anyone who opens it will see the same collection and sort order.
| Problem | Likely Cause | What to Do |
|---|---|---|
| "Page Not Found" (404) error | The collection name in the URL does not exist in the store | Check the URL for typos. Navigate to the store's home page and find the collection through the navigation menu. |
| "No products found in this collection" | The collection exists but has no products assigned | This is not an error. Browse a different collection or use the Search screen to find products by keyword. |
| Sort order does not change | The page may still be loading after a sort selection | Wait for the page to finish loading. If the issue persists, try selecting the sort option again. |
| Page fails to load | Network or server issue | Check your internet connection and try refreshing the page. |
The Product Detail screen is where you go to learn everything about a specific product and decide whether to buy it. This is the store's primary purchase page. Here you can view up to five product images, read the full product description, see pricing, choose product options such as size or color, and add the item to your cart. The screen also shows related products at the bottom, making it easy to continue browsing similar items.
From a product card: Click any product card on the Home Screen, Search Screen, or Search Detail Screen.
From related products: Click any tile in the "Related Products" section at the bottom of another product's detail page.
Direct URL: Navigate to /product/[product-name] — for example, /product/classic-white-tee or /product/blue-denim-jacket.
The Product Detail screen is organized into two main areas stacked vertically: the main product card at the top and the related products section below it. The site footer appears at the very bottom.
[Screenshot: Full Product Detail screen showing the image gallery on the left, product information on the right, related products below, and the footer at the bottom]
Main Product Card
The main product card is a large, rounded, bordered panel that takes up most of the screen. On a desktop or large screen, it is divided into two side-by-side columns. On a mobile or smaller screen, the two columns stack vertically.
Left Side: Image Gallery
The left side of the product card is dedicated to the product's images. Up to five images are displayed in a gallery viewer.
Main image area — The large primary image is displayed prominently. This is the image currently selected for viewing.
Thumbnail strip — Smaller thumbnail images below or beside the main image allow you to switch between the available photos. Click a thumbnail to make it the main displayed image.
While loading — A blank placeholder area of the same size is shown briefly while the images load, preventing the page from jumping around.
[Screenshot: Product image gallery showing a large main image with thumbnail images below it]
Right Side: Product Information
The right side of the product card contains all the details you need to evaluate and purchase the product.
Product Title The name of the product is displayed at the top of the right column in large text.
Price The product's price is shown clearly. If the product has multiple variants (for example, different sizes) with different prices, the price displayed reflects the range across all variants — showing the lowest and highest prices available.
Variant Selectors If the product comes in multiple options — such as different sizes, colors, or styles — you will see selectors for each option. These may appear as dropdown menus, clickable swatches, or buttons, depending on the option type.
Select your preferred option for each available attribute before adding the item to your cart.
The Add to Cart button may be disabled or unavailable until all required options have been selected.
Add to Cart Button Once you have selected your desired options (if any), click the Add to Cart button to add the product to your shopping cart.
Note: The cart and checkout process continue on additional screens not included in this document. Please consult your system administrator for the complete purchase process.
Product Description Below the purchase controls, the full product description is displayed. This may include details about materials, dimensions, care instructions, or other product-specific information provided by the store.
Related Products Section
Below the main product card, a horizontally scrollable row of related product tiles may appear. These are products that the store has identified as similar to or complementary to the one you are viewing.
Scroll left or right to browse the related products.
Click any tile to navigate to the Product Detail Screen for that related product.
Each tile shows the product image, title, price, and currency.
If there are no related products, this section does not appear at all — the footer follows directly after the main product card.
[Screenshot: Related products section showing a horizontal row of product tiles below the main product card]
Site Footer
The site footer appears at the very bottom of the page. See The Site Footer in the Common Features Guide.
What the Screen Looks Like for an Unavailable Product
If you navigate to a product URL that does not exist in the store's catalog, you will be taken to the store's "Page Not Found" (404) page rather than seeing a blank or broken product page.
Viewing Images
Selecting Options
Adding to Cart
Note: This workflow continues on additional screens not included in this document. Please consult your system administrator for the complete process.
Browsing Related Products
View a related product — Click any tile in the Related Products section to navigate to that product's detail page.
Scroll related products — Scroll the related products row left or right to see all available recommendations.
Navigating Away
| Field Name | What It Means | Required? | Accepted Values / Format | Example |
|---|---|---|---|---|
| Variant Selector(s) (e.g., Size, Color) | Lets you choose a specific version of the product. The available options depend on the product. | Yes, if options are present | The specific options available for this product (e.g., Small, Medium, Large; Red, Blue, Green) | Size: Medium; Color: Navy |
Review all images before deciding — Click through all available thumbnails to see the product from different angles or in different contexts. Up to five images may be available.
Check the price range — If a product shows a price range (for example, "$25 – $45"), the final price depends on which variant you select. Choose your options to see the exact price for your selection.
Select all options before trying to add to cart — If the Add to Cart button appears inactive, make sure you have made a selection for every available option (such as both size and color).
Use related products to discover alternatives — If the product you are viewing is out of stock in your preferred option, scroll down to the Related Products section for similar items that may be available.
Share a product page — The URL in your browser's address bar is a stable, bookmarkable link to this specific product. Copy and share it to send someone directly to this product.
Q: The Add to Cart button is not clickable. What do I do? A: Make sure you have selected a value for every available option (such as size and color). The button may be inactive until all required selections are made. If you have made all selections and the button is still inactive, the product or selected variant may be out of stock.
Q: The product shows a price range. What will I actually pay? A: The price range reflects the lowest and highest prices across all available variants of the product. Once you select your specific options (such as a particular size or color), the exact price for that variant will be shown.
Q: I can only see a few images. Are there more? A: Each product displays up to five images. If you see fewer than five thumbnails, that is the complete set of images available for this product.
Q: What does it mean if the Related Products section is not visible? A: It simply means the store has not identified any related products for this item. This is normal and does not indicate a problem.
Q: I navigated to a product URL and got a "Page Not Found" error. Why? A: The product handle in the URL does not match any product in the store's catalog. This can happen if the product has been removed, the URL was mistyped, or the link is outdated. Return to the Home Screen or use the Search Screen to find the product.
| Problem | Likely Cause | What to Do |
|---|---|---|
| "Page Not Found" (404) error | The product URL does not match any product in the store | Check the URL for typos. Use the Search screen or navigation to find the product. |
| Images are not loading / blank image area | Images are still loading, or there was a network issue | Wait a moment for images to load. Refresh the page if they do not appear. |
| Add to Cart button is inactive | Not all required variant options have been selected, or the item is out of stock | Select all available options (size, color, etc.). If the button remains inactive, the item may be out of stock. |
| Variant options are not visible | The product may have no configurable options, or the page is still loading | Wait for the page to fully load. If no options appear, this product may come in only one version. |
| Related Products section is missing | No related products are configured for this item | This is expected behavior. Browse collections or use Search to find similar products. |
| Page takes a long time to load | Slow internet connection or high server load | Check your internet connection and try refreshing the page. |
The Item Detail screen displays a single informational or editorial page from the store — such as "About Us," "Privacy Policy," "Terms of Service," or a "Frequently Asked Questions" page. These are content pages written by the store's team that provide important information about the business, its policies, and its practices. This screen is read-only: there is nothing to fill in or submit. You simply read the content.
From the footer: Click any informational link in the site footer (such as "About Us," "Privacy Policy," or "Terms of Service"). See The Site Footer.
Direct URL: Navigate to the page's address — for example, /about, /privacy-policy, or /terms-of-service.
From links within content: Some pages may contain links to other informational pages within their body text.
The Item Detail screen has a clean, minimal reading layout with three elements stacked vertically from top to bottom.
[Screenshot: Item Detail screen showing a large page title at the top, body content in the middle, and a small "last updated" date at the bottom]
Page Title
At the very top of the content area, the page title is displayed in large, bold text. This is the primary heading for the page — for example, About Us or Privacy Policy. It clearly identifies what you are reading.
Page Body Content
Below the title, the full content of the page is displayed. This may include:
Paragraphs of text
Headings and subheadings that organize the content into sections
Bulleted or numbered lists
Links to other pages or external websites
The content is formatted for comfortable reading, with appropriate spacing, font sizes, and typographic styling applied automatically.
Any links within the body content behave as standard web links — clicking them will navigate your browser to the linked destination.
Last Updated Date
At the very bottom of the content, a small line of italic text shows the date the page was last updated. The format is the full month name, day, and year — for example, January 15, 2024 or March 3, 2026. This helps you understand how current the information is.
Empty / Error State
If you navigate to a page address that does not correspond to any content page in the store, you will be taken to the store's "Page Not Found" (404) page. You will not see a blank or partially loaded page.
Reading Content
Following Links
Navigating Away
Use the footer — The site footer at the bottom of the page provides links to other areas of the store.
Use the browser's back button — Return to the previous page you were viewing.
This screen is display-only. There are no input fields, forms, or controls on the Item Detail screen. All content is presented for reading only.
Check the "Last Updated" date — For policy pages such as "Privacy Policy" or "Terms of Service," the last updated date at the bottom of the page tells you how recently the content was revised. If you are relying on this information for a decision, make sure you are reading the most current version.
Use your browser's Find function — For long pages such as a detailed FAQ or terms document, press Ctrl+F (Windows) or Command+F (Mac) to search for a specific word or phrase within the page.
Bookmark important pages — Pages like "Privacy Policy" or "Return Policy" have stable URLs. Bookmark them in your browser for quick future reference.
Follow in-content links carefully — Links within the page body may lead to external websites outside the store. Check the destination before clicking if you are unsure.
Q: Can I print this page? A: Yes. Use your browser's built-in print function (Ctrl+P on Windows, Command+P on Mac) to print or save the page as a PDF.
Q: The page says it was last updated a long time ago. Is the information still accurate? A: The "Last Updated" date reflects when the store's team last edited the page. If you have concerns about whether the content is current, contact the store directly.
Q: I clicked a link in the page and it took me to an external website. Is that normal? A: Yes. Store content pages may contain links to external resources. These are standard web links and behave like any other link in your browser.
Q: I navigated to a page URL and got a "Page Not Found" error. Why? A: The address you used does not match any content page in the store. This can happen if the URL was mistyped or if the page has been removed. Use the footer links to find the page you are looking for.
Q: Is there a way to see all available informational pages? A: The site footer typically lists links to the main informational pages. There is no dedicated index of all content pages within the screens covered by this document.
| Problem | Likely Cause | What to Do |
|---|---|---|
| "Page Not Found" (404) error | The URL does not match any content page in the store | Check the URL for typos. Use footer links to navigate to the page you need. |
| Page content appears blank (title and date visible, but no body text) | The page exists but has no body content authored in the store's back end | This is a store configuration issue. Contact your store administrator. |
| "Last Updated" date shows "Invalid Date" | The page's date information is malformed in the store's back end | Contact your store administrator to correct the page's date information. |
| Page takes a long time to load | Slow internet connection or high server load | Check your internet connection and try refreshing the page. |
| Links within the page content do not work | The linked destination may have moved or been removed | Try navigating to the linked destination directly, or contact the store if the link appears to be broken. |
| Term | Definition |
|---|---|
| Add to Cart | The action of placing a selected product (with all chosen options) into your shopping cart in preparation for purchase. |
| Available for Sale | Indicates whether a product can currently be purchased. A product marked as available for sale has at least one variant that can be added to a cart. |
| Body Summary | A short plain-text excerpt of a content page's body, used by the store for search engine descriptions when no custom SEO description has been set. |
| Carousel | A horizontally scrollable row of product cards displayed on the Home screen, used to surface additional products beyond the featured three. |
| Collection | A curated grouping of products defined by the store (for example, "Hoodies," "Accessories," or "Summer Sale"). Collections are browsed on the Search Detail Screen. |
| Collection Handle | The URL-friendly name used to identify a collection in the store's address (for example, hoodies in /search/hoodies). |
| Default Sort | The sort order applied automatically when you have not selected a sort option. Typically sorts by relevance or a store-defined default. |
| Featured Products | The three products highlighted at the top of the Home Screen in the featured product grid, selected by the store's administrators. |
| Handle | A URL-friendly, human-readable identifier for a product or content page in the store (for example, classic-white-tee or privacy-policy). Used as part of the page's web address. |
| Hero Product | The single large-format product tile displayed prominently in the featured product grid on the Home screen, alongside two smaller secondary product tiles. |
| Item Detail | The screen that displays a single informational or editorial content page (such as "About Us" or "Privacy Policy"). Accessed at addresses like /about or /terms-of-service. |
| Last Updated Date | The date shown at the bottom of an Item Detail page indicating when the store last modified that page's content. Displayed in the format "Month Day, Year" (for example, "March 3, 2026"). |
| Page Not Found (404) | The error page shown when you navigate to an address that does not correspond to any product, collection, or content page in the store. |
| Price Range | On a product with multiple variants at different prices, the price range shows the lowest and highest prices available across all variants. |
| Product Card | A compact tile representing a single product, showing its image, title, and price. Clicking a product card opens the full Product Detail Screen. |
| Product Detail | The screen that displays full information about a single product, including images, description, pricing, variant options, and the Add to Cart button. |
| Product Grid | A responsive layout that displays multiple product cards in rows and columns. The number of columns adjusts based on screen size (1 on mobile, 2 on tablet, 3 on desktop). |
| Product Handle | The URL-friendly identifier for a specific product (for example, blue-denim-jacket in /product/blue-denim-jacket). |
| Related Products | A set of products displayed at the bottom of the Product Detail Screen that the store has identified as similar to or complementary to the product being viewed. |
| Results Summary | The line of text at the top of the Search Screen that tells you how many products matched your search term, or that no matches were found. |
| SEO Fields | Optional custom titles and descriptions that the store's administrators can set for products, collections, and content pages to control how they appear in search engine results. |
| Sort Order | The sequence in which products are displayed in a grid or list. Available sort options include criteria such as price, best-selling status, and newest arrivals. |
| Sort Option | A predefined choice for ordering products (for example, "Price: Low to High" or "Best Selling"). Sort options are selected using the sort selector in the page header. |
| Thumbnail | A small preview image in the product image gallery. Clicking a thumbnail displays that image as the main large image in the gallery. |
| Variant | A specific version of a product defined by one or more options, such as a particular size and color combination. For example, a T-shirt in "Medium / Blue" is one variant of that product. |
| Variant Selector | A control on the Product Detail Screen — such as a dropdown menu, swatch, or button — that lets you choose a specific variant option (for example, selecting your size or preferred color). |
Most Common Tasks
| Task | Where to Go | How to Do It |
|---|---|---|
| Browse featured products | Home Screen | Click any tile in the featured product grid at the top of the page |
| Browse the product carousel | Home Screen | Scroll the carousel row left or right; click any card to open the product |
| Search for a product by keyword | Search Screen | Type a keyword in the search bar (site header) and press Enter |
| Sort search results | Search Screen | Use the sort selector in the page header to choose a sort order |
| Browse a product category | Search Detail Screen | Click a collection link in the navigation or footer, or go to /search/[category-name] |
| Sort products in a collection | Search Detail Screen | Use the sort selector in the page header |
| View product images | Product Detail Screen | Click thumbnail images in the gallery to switch the main displayed image |
| Select product options (size, color, etc.) | Product Detail Screen | Use the variant selectors on the right side of the product card |
| Add a product to your cart | Product Detail Screen | Select all options, then click Add to Cart |
| Browse related products | Product Detail Screen | Scroll below the main product card to the Related Products section |
| Read store policies or information | Item Detail Screen | Click a link in the site footer (e.g., "Privacy Policy," "About Us") |
| Share a product or search with someone | Any screen | Copy the URL from your browser's address bar and share it |
| Return to the home page | Anywhere | Click the store logo or "Home" link in the site header |
Key Messages to Know
| Message | What It Means |
|---|---|
| "No products found in this collection" | The collection exists but currently has no products assigned to it |
| "There are no products that match [term]" | Your search returned no results — try a different keyword |
| "Showing N result(s) for [term]" | Your search found N matching products |
| "Page Not Found" (404) | The URL you used does not match any product, collection, or page in the store |
Appendix A: Source Traceability
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 | All screens (general synthesis) | /, /search, /search/[collection], /product/[handle], /[page] |
| 2.1 Working with Product Grids | Search, Search Detail | /search, /search/[collection] |
| 2.2 Sorting Products | Search, Search Detail | /search, /search/[collection] |
| 2.3 Product Cards | Home, Search, Search Detail | /, /search, /search/[collection] |
| 2.4 The Site Footer | Home, Product Detail | /, /product/[handle] |
| 3. Home Screen | Home | / |
| 4. Search Screen | Search | /search |
| 5. Search Detail Screen | Search Detail | /search/[collection] |
| 6. Product Detail Screen | Product Detail | /product/[handle] |
| 7. Item Detail Screen | Item Detail | /[page] |
| 8. Glossary | All screens | All routes |
| 9. Quick Reference Card | All screens | All routes |
Appendix B: Documentation Coverage
Screens Covered
| Screen Name | Route | Coverage Status |
|---|---|---|
| Home | / | Covered |
| Search | /search | Covered |
| Search Detail | /search/[collection] | Covered |
| Product Detail | /product/[handle] | Covered |
| Item Detail | /[page] | Covered |
Screens Not Covered
The following areas of the application are referenced in the covered screens but are not themselves documented in this assessment. They are outside the scope of this manual:
Shopping cart screen
Checkout flow (all steps)
Order confirmation screen
Account creation and login screens
Account management / order history screens
Site header and search bar component (referenced as the source of the search input and sort selector, but not assessed as a standalone screen)
Footer component (referenced across multiple screens but not assessed as a standalone component)
Partially Documented Workflows
| Workflow | Documented Steps | Gap |
|---|---|---|
| Purchasing a product | Browsing → Product Detail → Add to Cart | Steps after "Add to Cart" (cart review, checkout, payment, confirmation) could not be verified from available documentation |
| Account login / logout | Not documented | All steps could not be verified from available documentation |
| Search input interaction | Results display and sorting are documented | The search bar UI itself (location, appearance, behavior) could not be verified — it is part of a header/layout component not assessed |
| Sort selector interaction | Sort behavior and URL parameters are documented | The sort selector UI itself (location, appearance, dropdown options and their labels) could not be verified — it is part of a parent layout component not assessed |
Inferred Information
The following items were inferred from technology conventions or patterns rather than being explicitly stated in the source documentation. They should be verified before this document is distributed.
| Inferred Item | Location in This Document | Recommendation |
|---|---|---|
| The search bar is located in the site header and is present on all pages | Sections 4.2, 4.3, 4.4, 4.6, 4.7, 9 | WHO: The front-end developer or QA team lead. WHAT: Confirm the exact location, appearance, and label of the search input control. WHERE: Update Sections 4.2 (Getting There), 4.3 (What You'll See — Sort Controls), and 4.4 (Available Actions — Searching). |
| The sort selector is a dropdown rendered in the page header or navigation area | Sections 2.2, 4.3, 4.4, 5.3, 5.4 | WHO: The front-end developer or QA team lead. WHAT: Confirm the exact location, appearance, and available option labels for the sort selector on both the Search and Search Detail screens. WHERE: Update Section 2.2 (Sorting Products) and the Sort Controls subsections of Sections 4.3 and 5.3. |
| Product cards display image, title, and price | Sections 2.3, 3.3, 4.3, 5.3, 6.3 | WHO: The front-end developer or QA team lead. WHAT: Confirm the exact fields displayed on product cards across all grid and carousel contexts. WHERE: Update Section 2.3 (Product Cards). |
| The carousel on the Home screen supports left/right scrolling | Section 3.3 | WHO: The front-end developer or QA team lead. WHAT: Confirm the scroll mechanism (swipe, arrow buttons, scroll wheel) and whether navigation arrows are present. WHERE: Update Section 3.3 (Section 2: Product Carousel). |
| The store logo or a "Home" link in the site header navigates back to the home page | Sections 1.3, 9 | WHO: The front-end developer or QA team lead. WHAT: Confirm the presence and label of the home navigation control in the site header. WHERE: Update Section 1.3 (Basic Navigation) and the Quick Reference Card. |
| Variant selectors may appear as dropdowns, swatches, or buttons | Section 6.3, 6.5 | WHO: The front-end developer or QA team lead. WHAT: Confirm the specific UI controls used for variant selection (e.g., size dropdown, color swatches) and whether the Add to Cart button is visually disabled when options are unselected. WHERE: Update Section 6.3 (Variant Selectors) and Section 6.5 (Field Reference). |
| The footer is present on all five documented screens | Section 2.4 | WHO: The front-end developer or QA team lead. WHAT: Confirm that the footer appears on all screens and provide the specific link labels it contains. WHERE: Update Section 2.4 (The Site Footer). |
Recommendations Before Distribution
Verify all inferred UI details with the front-end developer or QA team lead before distributing this document. In particular, the search bar location, sort selector appearance and option labels, and variant selector controls are referenced throughout the document but could not be confirmed from the available screen documentation.
Assess the site header component as an additional screen or component. The header contains the search bar and likely the sort selector — two controls that are central to the Search and Search Detail workflows. Without header documentation, the instructions in Sections 4 and 5 are incomplete.
Assess the cart and checkout screens to complete the purchase workflow. The Product Detail chapter currently ends at "Add to Cart" with a note that the workflow continues on undocumented screens.
Assess the Footer component to provide accurate footer link labels in Section 2.4 and throughout the Item Detail chapter.
Conduct a screenshot pass against the live application to populate all [Screenshot: ...] placeholders in this document before distribution to end users.