Training Manual

Training 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 Application

Training Manual

Document Date: April 2026

Generated by DocAgent — automated codebase documentation analysis. Subject matter expert review is recommended before distribution.

About This Document

This Training 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. The screens assessed here cover the primary shopper-facing browsing and discovery experience. Additional screens — including cart management, checkout, account management, and any administrative interfaces — should be assessed for comprehensive coverage.

How to Use This Manual

Structure of This Manual

This manual is organized into a clear learning path:

Foundation Skills → Module 1 → Module 2 → Module 3 → Capstone Exercise

Foundation Skills come first. These teach you the shared controls and patterns that appear throughout the application — things like reading a product grid or using sort controls. Learning these once means you won't need to re-learn them in every module.

Modules are organized around real workflows — the tasks you'll actually perform when using the application. Each module contains multiple Lessons.

Each Lesson follows the same structure:

Estimated Total Time

You do not need to complete the manual in one sitting. Each lesson is self-contained enough that you can pause and resume.

Tracking Your Progress

At the end of this manual, you'll find a Skills Checklist. After completing each lesson, check off the corresponding skill. When all boxes are checked, you have completed the training.

Prerequisites

Before beginning this training, make sure you have the following:

• A web browser — A modern browser (such as Chrome, Firefox, Safari, or Edge) with an up-to-date version installed.

• Internet access — The application is web-based and requires a live connection.

• Access to the storefront URL — You should have the web address of the Commerce application you are being trained on. If you do not have this, contact your system administrator.

• No account required for browsing — The screens covered in this training (browsing, searching, and viewing products) are accessible to all visitors without logging in. If your store requires a login to browse, contact your system administrator for credentials before starting.

• Sample data in the system — The training exercises assume that the store has products, collections, and content pages already set up. If the store appears empty, contact your system administrator to confirm that product data has been loaded.

Note: Cart management, checkout, and account features are not covered in this training manual. Those workflows occur on screens outside the scope of this document.

Foundation Skills

Before diving into the training modules, this section teaches you the shared controls and patterns that appear across multiple screens. Completing these foundation skills first will make every module faster and easier to follow.

FS-1: Working with Product Grids

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, the Search Detail screen, and within the featured sections of the Home screen.

The grid automatically adjusts the number of columns based on your screen size:

This means the same page will look different on a phone versus a desktop computer — that is expected behavior, not an error.

How to Interact with a Product Grid

Reading the grid: Each cell in the grid is a product card. Each card displays:

• A product image

• The product title

• The product price

Clicking a product card: Clicking anywhere on a product card navigates you to that product's Product Detail screen, where you can see full details, select variants, and add the item to your cart.

Empty grid state: If a search or collection returns no products, the grid is not shown. Instead, you will see a text message explaining that no products were found. This is covered in detail in Lesson 2.4: Interpreting Search Results and Empty States.

[Screenshot: A product grid showing 3 columns on a desktop screen, with product images, titles, and prices visible on each card]

Practice Exercise

1. Navigate to the Search screen by going to /search?q=shirt in your browser's address bar.

2. Observe how many columns the grid displays on your current device.

3. If you have access to a second device (or can resize your browser window), compare how the grid looks at a narrower width.

4. Click on any product card in the grid.

5. Confirm: You are taken to a new page showing the full details of that product.

Knowledge Check

• If you are browsing on a mobile phone, how many product columns would you expect to see in the grid?

• What happens when you click on a product card?

Tips

• Tip: If you are not sure whether a product card is clickable, look for your cursor changing to a pointer (hand icon) when you hover over it.

• Tip: The grid does not paginate within the same page — all matching products are displayed at once. If you see many products, scroll down to see them all.

FS-2: Using Sort Controls

What It Is

Sort controls let you reorder the products displayed in a grid. You will encounter sort controls on the Search screen and the Search Detail (collection) screen.

Sort controls are rendered by a shared layout component that appears above or alongside the product grid — they are not part of the grid itself.

How Sorting Works

Sorting is controlled by a sort option that you select from a dropdown or list. When you select a sort option, the page reloads with your chosen sort applied — the URL will update to include a ?sort= parameter (for example, ?sort=price-asc).

Common sort options you may see include:

Note: The exact sort options available in your store may vary. The options above represent common configurations. Verify the available options with your system administrator.

Deep-Linking with Sort

Because sort is stored in the URL, you can bookmark or share a sorted view. For example, sharing the URL /search?q=hoodie&sort=price-asc will show the same sorted results to anyone who opens that link.

[Screenshot: The sort dropdown open, showing available sort options with one option highlighted]

Practice Exercise

1. Navigate to /search?q=jacket in your browser.

2. Note the current order of the products displayed.

3. Use the sort control to change the sort to Price: Low to High (or the equivalent option in your store).

4. Confirm: The page reloads and the URL now includes ?sort= followed by a sort slug. The products are now ordered from least to most expensive.

5. Now change the sort to Price: High to Low.

6. Confirm: The most expensive product now appears first in the grid.

Knowledge Check

• If you share a URL that includes ?sort=price-asc with a colleague, what will they see when they open it?

• What happens if you navigate to a sort URL with a sort value that the system does not recognize?

Tips

• Tip: Sorting does not filter out any products — it only changes the order. All the same products are still shown.

• Gotcha: If you change the sort and the page appears to reload but the order does not change, check that the URL has updated. If the URL did not change, the sort selection may not have registered — try again.

FS-3: Understanding Product Cards and Tile Labels

What It Is

A product card (also called a grid tile) is the individual unit within a product grid. You will see product cards on the Home screen (in the featured grid and carousel), the Search screen, the Search Detail screen, and the Product Detail screen (in the Related Products section).

What a Product Card Shows

Each product card displays:

• Product image — A thumbnail photo of the product

• Product title — The name of the product, overlaid on or displayed below the image

• Price — The product's price, including currency

• Currency code — The currency in which the price is displayed (e.g., USD)

Availability

If a product is not available for purchase, this may be reflected in the card's display. The specific visual treatment depends on the store's configuration.

[Screenshot: A single product card showing the image, title, price, and currency label]

Practice Exercise

1. Navigate to the Home screen (/).

2. Find the featured product grid at the top of the page.

3. Identify the title and price on at least two different product cards.

4. Find the horizontally scrollable carousel below the featured grid.

5. Scroll the carousel left and right to reveal additional product cards.

6. Confirm: Each card in the carousel also shows a title and price.

Knowledge Check

• What three pieces of information does a product card always display?

• Where on the Home screen would you find a horizontally scrollable row of product cards?

Tips

• Tip: On the Home screen, the carousel may extend beyond the visible screen width. Scroll horizontally (or swipe on a touch device) to see all available products.

• Tip: Product cards are always clickable links. Clicking any card takes you directly to that product's detail page.

FS-4: Navigating Between Pages

What It Is

The Commerce application uses standard web navigation. Understanding how to move between screens will help you complete every module in this training. You will use these navigation patterns throughout the entire application.

Navigation Methods

Clicking product cards and links: The most common way to navigate. Clicking a product card takes you to the Product Detail screen. Clicking a link in the footer takes you to an informational page.

Using the browser's Back button: At any point, you can press your browser's Back button to return to the previous screen. This is especially useful after viewing a product detail page when you want to return to your search results.

Typing a URL directly: You can navigate to any screen by typing its URL into your browser's address bar. This is useful for deep-linking to specific searches or collections.

404 Pages: If you navigate to a product, collection, or content page that does not exist, the application will show a 404 page (a "not found" message). This is normal behavior — it means the URL you used does not match any content in the system. Use your browser's Back button to return to a working page.

[Screenshot: The application's 404 page, showing a "not found" message]

Practice Exercise

1. Navigate to the Home screen (/).

2. Click on any product card in the featured grid.

3. Confirm: You are now on a Product Detail screen.

4. Press your browser's Back button.

5. Confirm: You are back on the Home screen.

6. Now type a URL for a page that does not exist — for example, /product/this-product-does-not-exist-xyz.

7. Confirm: You see a 404 "not found" page.

8. Press your browser's Back button to return.

Knowledge Check

• What does a 404 page mean, and what should you do when you see one?

• How can you return to your search results after viewing a product detail page?

Tips

• Tip: The application pre-loads linked pages in the background as you browse, so navigation between pages is often very fast.

• Gotcha: If you use the browser's Refresh button on a search results page, the page will reload with the same search query — your results will not be lost.

Module 1: Getting Oriented — Your First Visit to the Store

Learning Objectives

After completing this module, you will be able to:

• Identify the three main sections of the Home screen and describe the purpose of each

• Navigate from the Home screen to a product detail page using featured product cards

• Locate and read informational content pages (such as About Us or Privacy Policy)

• Recognize the footer as a consistent navigation element across all screens

Estimated Time: 20–30 minutes

Lesson 1.1: Exploring the Home Screen

What You'll Learn

The Home screen is the first thing shoppers see when they visit the store. In this lesson, you'll learn how the Home screen is organized, what each section does, and how to use it as a starting point for browsing. Understanding this layout will help you orient yourself every time you return to the store.

Before You Begin

Complete FS-3: Understanding Product Cards and Tile Labels and FS-4: Navigating Between Pages before starting this lesson.

Walkthrough

1. Open your web browser and navigate to the store's home URL (/).

2. Allow the page to fully load. You should see a visually rich page with product images prominently displayed.

3. Look at the top section of the page. You will see a featured product grid called the Three Item Grid. This section highlights three products — typically one large hero product and two smaller supporting products.

• [Screenshot: The Three Item Grid at the top of the Home screen, showing one large product image and two smaller ones]

4. Identify the large hero product on the left or top of the Three Item Grid. This is the most prominently featured product on the page.

5. Identify the two supporting product cards alongside the hero. Each shows a product image, title, and price.

6. Scroll down past the Three Item Grid. You will see a horizontally scrollable carousel of additional product cards.

7. Scroll the carousel to the right (or swipe right on a touch device) to reveal more product cards beyond the initial view.

• [Screenshot: The product carousel on the Home screen, showing multiple product cards in a horizontal row with a scroll indicator]

8. Continue scrolling down the page. At the bottom, you will see the Footer, which contains navigation links to informational pages and other store sections.

• [Screenshot: The Footer at the bottom of the Home screen, showing navigation links]

9. Take a moment to note the overall structure: Three Item Grid → Carousel → Footer.

Try It Yourself

Now practice navigating from the Home screen:

1. Navigate to the Home screen (/).

2. In the Three Item Grid, find the second supporting product card (not the hero, not the first supporting card — the second one).

3. Note the product's title and price before clicking.

4. Click on that product card.

5. Confirm: You are taken to the Product Detail screen for that product, and the title matches what you noted in step 3.

6. Press your browser's Back button to return to the Home screen.

7. Now scroll to the carousel and click on the third product card visible in the carousel.

8. Confirm: You are taken to a different Product Detail screen.

9. Press Back again to return to the Home screen.

Knowledge Check

• What are the three main sections of the Home screen, listed from top to bottom?

• What is the difference between the Three Item Grid and the Carousel in terms of how they display products?

• If you wanted to see more products than are visible in the carousel, what would you do?

Tips & Gotchas

• Tip: The Three Item Grid and Carousel are automatically populated from the store's product catalog. The specific products shown are determined by the store's configuration — you do not need to manage which products appear here.

• Gotcha: The carousel may not show a scroll indicator on all browsers. If you can't see more products, try clicking and dragging horizontally within the carousel area, or use a horizontal scroll gesture on a trackpad.

• Tip: The Home screen always shows the same content regardless of any URL parameters — there are no filters or search terms that affect what appears here.

Lesson 1.2: Reading Informational Pages

What You'll Learn

Beyond products, the store contains informational content pages — such as "About Us," "Privacy Policy," or "Terms of Service." These pages are authored by the store's team and contain editorial or legal content. In this lesson, you'll learn how to navigate to these pages and what to expect when you arrive. You'll use this skill whenever you need to reference store policies or background information.

Before You Begin

Complete Lesson 1.1: Exploring the Home Screen. No other prerequisites.

Walkthrough

1. From any screen in the application, scroll to the bottom of the page to find the Footer.

2. Look for navigation links in the Footer. These typically include links to pages such as About Us, Privacy Policy, Terms of Service, or similar.

3. Click on one of the Footer links — for this walkthrough, click the link that corresponds to an "About" or "About Us" page.

4. The page will load and display the following elements, from top to bottom:

   • A large page title at the top (for example, "About Us")

   • The body content — the full text of the page, which may include headings, paragraphs, and lists

   • A small last updated date at the bottom of the content (for example, "January 15, 2024")

• [Screenshot: An informational page showing the large title, body content with formatted text, and the last updated date at the bottom]

5. Read through the page content. Notice that the text is formatted with proper headings, paragraphs, and spacing for easy reading.

6. Look at the last updated date at the very bottom of the content. This tells you when the page was last modified by the store's team.

7. If the page content contains any links (underlined or colored text), you can click them to follow those links. These are standard web links authored by the store team.

Try It Yourself

1. Navigate to the Home screen (/).

2. Scroll to the Footer and find a link to a different informational page than the one used in the walkthrough above — for example, a Privacy Policy or Terms of Service page.

3. Click that link.

4. Confirm: The page loads with a large title at the top, body content in the middle, and a last updated date at the bottom.

5. Note the last updated date shown on this page.

6. Now try navigating directly to an informational page by typing a URL — for example, /about or /privacy-policy — in your browser's address bar.

7. Confirm: The page loads correctly.

8. Try navigating to a page that does not exist: type /this-page-does-not-exist in your address bar.

9. Confirm: You see a 404 "not found" page, not an error or blank screen.

Knowledge Check

• What three elements appear on every informational page, from top to bottom?

• What does the "last updated" date at the bottom of an informational page tell you?

• If you click a link within the body of an informational page, what happens?

Tips & Gotchas

• Tip: Informational pages are read-only — there is nothing to fill in or submit. Your only interaction is reading and following links.

• Gotcha: If you navigate to an informational page URL and see a 404 error, it means that page has not been created in the store yet, or the URL handle is different from what you expected. Check with your system administrator for the correct URL.

• Tip: The last updated date reflects when the store team last edited the page in Shopify. It does not update automatically — it only changes when the content is manually revised.

Module 2: Finding Products — Search and Browse

Learning Objectives

After completing this module, you will be able to:

• Search for products using a keyword and interpret the results shown

• Browse products within a specific collection by navigating to a collection page

• Apply sort options to reorder search and collection results

• Identify and respond appropriately to empty states (no results found)

Estimated Time: 40–55 minutes

Lesson 2.1: Searching for Products by Keyword

What You'll Learn

The Search screen lets you find products by typing a keyword. When you need to find a specific item — or browse everything related to a topic — keyword search is your fastest tool. In this lesson, you'll learn how to perform a search and read the results.

Before You Begin

Complete FS-1: Working with Product Grids and FS-2: Using Sort Controls before starting this lesson. No other prerequisites.

Walkthrough

This screen uses a product grid to display results. If you haven't already, complete FS-1: Working with Product Grids before continuing.

1. Locate the search input in the store's navigation bar or header area. This is typically a text field or a magnifying glass icon at the top of every page.

• Note: The search input is part of the site's global navigation, which is outside the scope of this document. If you cannot locate the search input, contact your system administrator for guidance on where it appears in your store's layout.

2. Click on the search input to activate it.

3. Type the word hoodie into the search field.

4. Press Enter or click the search button to submit your search.

5. You will be taken to the Search screen at a URL like /search?q=hoodie. The page will display your results.

6. Look at the results summary near the top of the content area. It will read something like: "Showing 4 result(s) for hoodie" — with your search term in bold and the number of results shown.

• [Screenshot: The Search screen showing a results summary line and a product grid below it]

7. Below the summary, you will see a product grid containing all matching products. Each card shows the product image, title, and price.

8. Review the results. Notice that the search term you entered appears in bold in the summary line.

Try It Yourself

1. Use the search input to search for the term jacket (not "hoodie" as in the walkthrough).

2. Confirm: The URL changes to /search?q=jacket and a results summary appears.

3. Count the number of results shown in the summary line.

4. Identify the product in the grid that has the highest visible price.

5. Now search for a very specific term that is unlikely to match any products — for example, xyzproductnotfound.

6. Confirm: The results summary reads "There are no products that match xyzproductnotfound" and no product grid is shown.

7. Use your browser's Back button to return to your previous search results.

Knowledge Check

• What does the results summary line tell you, and when does it appear?

• What does the page look like when a search returns zero results?

• If you search for a term and then want to search for something else, what do you do?

Tips & Gotchas

• Tip: Search is not case-sensitive — searching for "Hoodie" and "hoodie" will return the same results.

• Gotcha: If you navigate to /search without any search term, the page will appear blank — no summary and no grid. This is expected behavior. You need to enter a search term to see results.

• Tip: You can bookmark a search results page. The URL /search?q=hoodie will always show the same search results when opened, making it easy to return to a specific search.

Lesson 2.2: Browsing Products by Collection

What You'll Learn

Collections are curated groups of products organized by the store team — for example, "Shirts," "Accessories," or "Summer Sale." Browsing by collection is useful when you want to explore everything in a category rather than searching for a specific item. In this lesson, you'll learn how to navigate to a collection page and read its contents.

Before You Begin

Complete Lesson 2.1: Searching for Products by Keyword. Make sure you have also completed FS-1: Working with Product Grids.

Walkthrough

This screen uses a product grid to display collection products. If you haven't already, complete FS-1: Working with Product Grids before continuing.

1. Navigate to a collection page by typing a collection URL into your browser's address bar. Collection URLs follow the pattern /search/[collection-name]. For this walkthrough, navigate to /search/shirts (or substitute a collection handle that exists in your store — ask your system administrator if you are unsure).

2. The page will load and display all products in that collection in a product grid.

• [Screenshot: A collection page showing a grid of products with the collection's products displayed in 3 columns on desktop]

3. Scroll through the grid to see all available products in this collection.

4. Notice that there is no search summary line on a collection page — unlike the Search screen, collection pages do not show a count of results at the top.

5. Click on any product card to navigate to its Product Detail screen.

6. Press your browser's Back button to return to the collection page.

7. Now navigate to a collection that does not exist — for example, /search/this-collection-does-not-exist.

8. Confirm: You see a 404 "not found" page. This means the collection handle in the URL does not match any collection in the store.

Try It Yourself

1. Navigate to a different collection than the one used in the walkthrough — for example, /search/accessories or another collection handle provided by your system administrator.

2. Confirm: The page loads and displays a product grid.

3. Count how many products are visible in the grid.

4. Find the product card with the longest product title in the grid.

5. Click on that product card.

6. Confirm: You are taken to the Product Detail screen for that product.

7. Press Back to return to the collection page.

8. Now navigate to /search/hoodies (or a collection you know exists in your store).

9. Confirm: The grid shows only products from that specific collection.

Knowledge Check

• What is a collection, and how is it different from a search result?

• What does the URL /search/accessories tell you about what will be displayed on that page?

• What happens if you navigate to a collection URL for a collection that does not exist?

Tips & Gotchas

• Tip: Collection handles in URLs are always lowercase and use hyphens instead of spaces (e.g., summer-sale, not Summer Sale). If a collection URL isn't working, check for spaces or capital letters.

• Gotcha: If a collection exists but has no products assigned to it, you will see the message "No products found in this collection" instead of a grid. This is not an error — it means the collection is empty.

• Tip: Collection pages are fully shareable. Sending someone the URL /search/shirts will show them the same collection you are viewing.

Lesson 2.3: Sorting Search and Collection Results

What You'll Learn

Both the Search screen and collection pages support sorting, which lets you reorder products to find what you're looking for more easily. For example, you might sort by price to find the most affordable options first. In this lesson, you'll learn how to apply and change sort options on both types of pages.

Before You Begin

Complete Lesson 2.1: Searching for Products by Keyword and Lesson 2.2: Browsing Products by Collection. Also complete FS-2: Using Sort Controls if you haven't already.

Walkthrough

This screen uses sort controls that are part of the shared layout. If you haven't already, complete FS-2: Using Sort Controls before continuing.

1. Navigate to the Search screen with a query: go to /search?q=shirt in your browser.

2. The page loads with the default sort order applied (typically by relevance).

3. Locate the sort control — this is a dropdown or list of sort options, typically displayed above or near the product grid. It is part of the page's shared layout.

4. Click the sort control to open it and view the available options.

5. Select Price: Low to High (or the equivalent option in your store).

6. Confirm: The page reloads. The URL now includes ?sort=price-asc (or a similar sort slug) in addition to ?q=shirt. The products are now ordered from least expensive to most expensive.

• [Screenshot: The Search screen after applying a sort, showing the URL with a sort parameter and products reordered by price]

7. Now select Price: High to Low from the sort control.

8. Confirm: The page reloads again. The most expensive product now appears first in the grid.

9. Navigate to a collection page — for example, /search/shirts.

10. Apply the same Price: Low to High sort to the collection page.

11. Confirm: The URL updates to include ?sort=price-asc and the products reorder accordingly.

Try It Yourself

1. Navigate to /search?q=pants (or a search term that returns multiple results in your store).

2. Apply the Newest sort option (or the equivalent in your store).

3. Confirm: The URL updates and the products reorder.

4. Note the title of the product that now appears first in the grid.

5. Now apply the Best Selling sort option.

6. Confirm: The product order changes again.

7. Note whether the same product that was first under "Newest" is still first under "Best Selling."

8. Navigate to a collection page (e.g., /search/accessories) and apply the Price: High to Low sort.

9. Confirm: The URL for the collection page now includes ?sort=price-desc (or equivalent) and the most expensive product appears first.

Knowledge Check

• How does the application remember which sort option you have selected?

• If you share a collection URL that includes ?sort=price-asc with a colleague, what will they see when they open it?

• What happens if you manually type an unrecognized sort value into the URL (for example, ?sort=invalid-option)?

Tips & Gotchas

• Tip: Sorting is preserved in the URL, so you can bookmark a sorted view and return to it later without re-applying the sort.

• Gotcha: Changing the sort option causes a full page reload. If you have scrolled far down a long product list, you will return to the top of the page after sorting. This is expected behavior.

• Tip: If no sort is selected (or the URL has no ?sort= parameter), the page uses the store's default sort order automatically. You don't need to explicitly set a sort to get results.

Lesson 2.4: Interpreting Search Results and Empty States

What You'll Learn

Not every search or collection browse will return products. Knowing how to read the different result states — and what to do when you see them — will help you navigate the store confidently. In this lesson, you'll learn to recognize and respond to all the possible result states on the Search and collection screens.

Before You Begin

Complete Lesson 2.1: Searching for Products by Keyword and Lesson 2.2: Browsing Products by Collection.

Walkthrough

State 1: Successful search with results

1. Navigate to /search?q=hoodie.

2. Confirm: You see a results summary line reading "Showing N result(s) for hoodie" and a product grid below it.

3. This is the normal, successful state.

State 2: Search with no results

4. Navigate to /search?q=zzznoresults.

5. Confirm: You see the message "There are no products that match zzznoresults" and no product grid is shown.

6. This tells you the search term did not match any products. Try a different search term.

State 3: Search screen with no query

7. Navigate to /search (no ?q= parameter).

8. Confirm: The page appears blank — no summary text and no product grid. This is expected. The search screen requires a query to show results.

State 4: Collection with no products

9. Ask your system administrator if there is an empty collection in your store, or navigate to a collection you know exists.

10. If the collection has no products, you will see the message: "No products found in this collection."

11. This is not an error — it means the collection exists but currently has no products assigned to it.

State 5: Collection not found (404)

12. Navigate to /search/this-collection-xyz-does-not-exist.

13. Confirm: You see a 404 "not found" page. This means the collection handle does not exist in the store at all.

[Screenshot: Side-by-side comparison of the "no results" message on the Search screen and the "no products found" message on a collection page]

Try It Yourself

For this exercise, you will work through each state and record what you observe:

1. Navigate to /search?q=blue+denim+jacket+extra+long+search+term.

2. Record: Does the page show results or a "no products" message?

3. Navigate to /search (no query).

4. Record: What does the page look like? Is there any text or grid visible?

5. Navigate to a collection you know exists in your store (ask your system administrator if needed).

6. Record: How many products are shown?

7. Navigate to /search/fakecollection99999.

8. Record: What page do you see?

9. Confirm: You have now seen at least three different result states.

Knowledge Check

• What is the difference between the "no results" message on the Search screen and the "no products found" message on a collection page?

• If you navigate to /search with no query and see a blank page, is something broken? How do you know?

• What does a 404 page on a collection URL tell you, and how is it different from an empty collection?

Tips & Gotchas

• Tip: If a search returns no results, try a shorter or more general search term. For example, instead of "blue cotton hoodie size large," try just "hoodie."

• Gotcha: The blank state at /search (no query) can look like a broken page, but it is intentional. Always make sure your URL includes ?q= followed by a search term.

• Tip: If you see a 404 on a collection page, the collection handle in the URL may be misspelled. Double-check the URL and try again.

Module 3: Evaluating a Product — The Product Detail Screen

Learning Objectives

After completing this module, you will be able to:

• Navigate to a Product Detail screen from any product card in the application

• Browse through a product's image gallery to view all available photos

• Read and interpret product information including title, description, and pricing

• Select product variants (such as size and color) before adding to cart

• Add a product to your cart using the add-to-cart button

• Use the Related Products section to discover and navigate to similar items

Estimated Time: 55–75 minutes

Lesson 3.1: Navigating to a Product Detail Page

What You'll Learn

The Product Detail screen is where you go to learn everything about a specific product before deciding to purchase it. In this lesson, you'll learn the different ways to reach a Product Detail screen and what the URL structure looks like. You'll use this navigation skill constantly as you browse the store.

Before You Begin

Complete Module 2: Finding Products — Search and Browse and FS-4: Navigating Between Pages.

Walkthrough

1. Navigate to the Search screen by searching for tee (or a term that returns results in your store).

2. In the product grid, click on any product card.

3. Confirm: You are taken to the Product Detail screen. The URL in your browser's address bar will follow the pattern /product/[product-name] — for example, /product/classic-white-tee.

4. Note the URL. The part after /product/ is called the product's handle — a unique, URL-safe identifier for that product.

5. Press your browser's Back button to return to the search results.

6. Now navigate to a product directly by typing its URL. If you know a product's handle, type /product/[handle] into your address bar.

7. Confirm: The Product Detail screen loads for that product.

8. Try navigating to a product that does not exist: type /product/this-product-does-not-exist-xyz into your address bar.

9. Confirm: You see a 404 "not found" page.

[Screenshot: A Product Detail screen showing the full layout — image gallery on the left, product information on the right]

Try It Yourself

1. Navigate to the Home screen (/).

2. Click on the hero product (the largest product card) in the Three Item Grid.

3. Confirm: You are on a Product Detail screen. Note the product handle in the URL.

4. Press Back to return to the Home screen.

5. Now click on one of the carousel product cards.

6. Confirm: You are on a different Product Detail screen with a different handle in the URL.

7. Press Back to return to the Home screen.

8. Navigate to a collection page (e.g., /search/shirts) and click on a product card there.

9. Confirm: You arrive at the Product Detail screen for that product.

Knowledge Check

• What does the URL /product/classic-white-tee tell you about the product you are viewing?

• Name three different places in the application from which you can navigate to a Product Detail screen.

• What happens if you navigate to a product URL for a product that no longer exists in the store?

Tips & Gotchas

• Tip: Product handles are stable URLs — you can bookmark a Product Detail page and return to it later. The URL will continue to work as long as the product exists in the store.

• Gotcha: Product handles are case-sensitive in URLs. /product/Classic-White-Tee and /product/classic-white-tee may behave differently. Always use the URL exactly as it appears in your browser.

• Tip: If you want to share a specific product with someone, simply copy the URL from your browser's address bar and send it to them.

Lesson 3.2: Browsing Product Images

What You'll Learn

Most products have multiple photos showing different angles, colors, or details. The image gallery on the Product Detail screen lets you browse through all available photos. In this lesson, you'll learn how to navigate the gallery so you can fully evaluate a product before purchasing.

Before You Begin

Complete Lesson 3.1: Navigating to a Product Detail Page.

Walkthrough

1. Navigate to any Product Detail screen (for example, by clicking a product card from a search result).

2. Look at the left side of the screen (or the top section on mobile). This is the image gallery — the primary visual area of the Product Detail screen.

3. The gallery displays the main product image prominently in the center.

4. Look for thumbnail images — smaller versions of the product's other photos, typically displayed below or alongside the main image. These allow you to switch between different photos.

5. Click on a thumbnail image.

6. Confirm: The main image area updates to show the photo you selected.

• [Screenshot: The product image gallery showing a large main image with thumbnail images below or alongside it]

7. Continue clicking through the available thumbnails to view all product photos.

8. Note that a product can have up to 5 images in the gallery. If a product has more than 5 photos in the store's catalog, only the first 5 are shown.

9. While the gallery is loading (especially on a slower connection), you may see a blank square placeholder where the image will appear. This is normal — the image will load shortly.

Try It Yourself

1. Navigate to a Product Detail screen for a product that you expect has multiple images (clothing items often have several photos).

2. Count how many thumbnail images are available.

3. Click on the last thumbnail in the sequence (not the first one).

4. Confirm: The main image area updates to show that photo.

5. Click on the first thumbnail to return to the primary product photo.

6. Confirm: The main image returns to the first photo.

7. Now navigate to a different product and check whether it has fewer images. Note the difference.

Knowledge Check

• What is the maximum number of images that can appear in the product gallery?

• What does the blank square placeholder mean when you first load a Product Detail page?

• How do you switch between different product photos in the gallery?

Tips & Gotchas

• Tip: If a product only has one image, no thumbnails will be shown — just the single main image. This is normal.

• Gotcha: The gallery is limited to 5 images regardless of how many photos the product has in the store's catalog. If you need to see additional photos, contact the store team.

• Tip: On mobile devices, you may be able to swipe left and right on the main image to navigate between photos, in addition to tapping thumbnails.

Lesson 3.3: Reading Product Information and Pricing

What You'll Learn

The right side of the Product Detail screen contains all the key information you need to evaluate a product: its name, price, and description. Understanding how to read this information — especially pricing for products with multiple variants — will help you make informed purchasing decisions. You'll use this skill every time you evaluate a product.

Before You Begin

Complete Lesson 3.2: Browsing Product Images.

Walkthrough

1. Navigate to any Product Detail screen.

2. Look at the right column of the screen (or the section below the image gallery on mobile). This area is called the Product Description section.

3. At the top of this section, find the product title — the name of the product in large text.

4. Below the title, find the price. For products with a single variant, you will see one price. For products with multiple variants (e.g., different sizes or colors), you may see a price range showing the lowest and highest prices across all variants.

5. Below the price, read the product description — this is the full text description of the product, which may include details about materials, fit, care instructions, and other relevant information.

6. Note whether the product shows an availability status. If a product is out of stock, this will be indicated in the product information area.

• [Screenshot: The Product Description section showing the title, price, and description text]

Try It Yourself

1. Navigate to a Product Detail screen for a product that has multiple variants (such as a clothing item available in multiple sizes).

2. Locate the price displayed in the Product Description section.

3. Determine whether the price shown is a single price or a price range.

4. Read the full product description and identify one specific detail mentioned (for example, the material, the fit type, or a care instruction).

5. Navigate to a different product — one that appears to be a simpler item with fewer variants.

6. Compare the price display between the two products. Does the second product show a range or a single price?

7. Confirm: You can identify the title, price, and at least one detail from the description for both products.

Knowledge Check

• What does a price range on a Product Detail screen indicate?

• Where on the Product Detail screen would you find the product's description text?

• If a product shows a price range of "$15.00 – $45.00," what does the $15.00 represent?

Tips & Gotchas

• Tip: The price range reflects the full spread across all variants. Once you select a specific variant (such as a size), the displayed price may update to show the exact price for that variant.

• Gotcha: A product that shows as available may still have individual variants that are out of stock. Always check availability after selecting your specific variant before adding to cart.

• Tip: Product descriptions are written by the store team and may vary in length and detail. Some products have very brief descriptions; others have extensive information.

Lesson 3.4: Selecting Product Variants

What You'll Learn

Many products come in multiple options — different sizes, colors, materials, or other attributes. These options are called variants. Before you can add a product to your cart, you typically need to select the specific variant you want. In this lesson, you'll learn how to use the variant selectors on the Product Detail screen.

Before You Begin

Complete Lesson 3.3: Reading Product Information and Pricing.

Walkthrough

1. Navigate to a Product Detail screen for a product that has multiple variants — for example, a clothing item available in different sizes and colors.

2. In the Product Description section (right column), look for the variant selectors. These may appear as:

   • Dropdown menus — click to open and select an option

   • Swatches — clickable color or pattern squares

   • Button groups — a row of clickable size or option buttons

3. Identify the variant options available. Common variant types include:

4. Click on a size option (for example, select "M" or "Medium").

5. Confirm: The selected option is visually highlighted or marked as selected. The price may update if different sizes have different prices.

6. Click on a color option if available (for example, select "Black").

7. Confirm: The selected color is highlighted. The product image in the gallery may update to show the product in the selected color.

8. If a variant option is unavailable (out of stock), it will typically appear grayed out or crossed out. You cannot select an unavailable variant.

• [Screenshot: The variant selector area showing size buttons and color swatches, with one size and one color selected/highlighted]

9. Try clicking on a different size to change your selection.

10. Confirm: The new size is now highlighted and the previous selection is deselected.

Try It Yourself

1. Navigate to a Product Detail screen for a product with at least two types of variants (for example, both size and color).

2. Select the largest available size option.

3. Confirm: That size is visually highlighted.

4. Select a different color than the default (if color variants are available).

5. Confirm: The color selection is highlighted and the gallery image may have updated.

6. Now change your size selection to the smallest available size.

7. Confirm: The size selection updates and the previous size is no longer highlighted.

8. Note whether the price changed when you switched between sizes.

9. Try clicking on a variant that appears grayed out (if one exists).

10. Confirm: You cannot select a grayed-out variant.

Knowledge Check

• What is a product variant, and why do you need to select one before adding to cart?

• How can you tell which variant option is currently selected?

• What does it mean when a variant option appears grayed out?

Tips & Gotchas

• Tip: Always select all required variant options before attempting to add a product to your cart. If a required option is not selected, the Add to Cart button may remain disabled.

• Gotcha: Changing a variant selection (especially color) may update the product images in the gallery to show the product in the new variant. This is expected — the gallery is showing you the correct product for your selection.

• Tip: If you are unsure which variant to select, read the product description carefully — it often contains sizing guides or color descriptions to help you choose.

Lesson 3.5: Adding a Product to Your Cart

What You'll Learn

Once you've reviewed a product and selected your preferred variant, the final step is adding it to your cart. In this lesson, you'll learn how to use the Add to Cart button and what to expect after clicking it. This is the primary action on the Product Detail screen.

Before You Begin

Complete Lesson 3.4: Selecting Product Variants. You should have a product open with all required variants selected.

Walkthrough

1. Navigate to a Product Detail screen and select all required variant options (as practiced in Lesson 3.4).

2. In the Product Description section, locate the Add to Cart button. It is typically a prominent button below the variant selectors.

3. Confirm that the Add to Cart button is active (not grayed out). If it appears grayed out or disabled, check that you have selected all required variant options.

4. Click the Add to Cart button.

5. Confirm: The application responds to your click. The specific visual feedback (such as a confirmation message, a cart icon updating, or a mini-cart appearing) depends on your store's configuration.

• Note: The cart management experience — including viewing cart contents, updating quantities, and proceeding to checkout — occurs on screens outside the scope of this document. Please consult your system administrator for guidance on the complete cart and checkout process.

  [Screenshot: The Add to Cart button in its active state, ready to be clicked]

6. If the product is out of stock, the Add to Cart button will be disabled or replaced with an "Out of Stock" indicator. In this case, you cannot add the product to your cart.

Try It Yourself

1. Navigate to a Product Detail screen for a product that is in stock.

2. Select a different variant combination than the one you used in the Lesson 3.4 walkthrough — for example, choose a different size or color.

3. Verify that the Add to Cart button is active and not grayed out.

4. Click Add to Cart.

5. Confirm: The application provides some form of visual feedback confirming the item was added.

6. Now navigate to a product that has variants but do not select any variant options.

7. Observe the state of the Add to Cart button.

8. Confirm: The button is disabled or unavailable when no variant is selected (if the product requires a variant selection).

Knowledge Check

• What must you do before the Add to Cart button becomes active?

• What does it mean if the Add to Cart button appears grayed out or disabled?

• If a product is out of stock, what do you expect to see instead of the Add to Cart button?

Tips & Gotchas

• Tip: If you accidentally add the wrong variant to your cart, you will need to manage your cart to remove or change it. Cart management is covered on screens outside this document — consult your system administrator.

• Gotcha: Clicking Add to Cart multiple times may add multiple units of the same product to your cart. Click it once and wait for the confirmation before clicking again.

• Tip: The Add to Cart button is only available for products that are available for sale. If a product is marked as unavailable, you will not be able to add it to your cart regardless of variant selection.

Lesson 3.6: Exploring Related Products

What You'll Learn

At the bottom of many Product Detail screens, you'll find a Related Products section that suggests other items you might be interested in. This section is a powerful browsing tool — it helps you discover products similar to the one you're viewing without having to go back to search. In this lesson, you'll learn how to use the Related Products section to continue exploring the catalog.

Before You Begin

Complete Lesson 3.1: Navigating to a Product Detail Page. Also complete FS-3: Understanding Product Cards and Tile Labels.

Walkthrough

1. Navigate to any Product Detail screen.

2. Scroll down past the main product card (the image gallery and product description area).

3. Look for the Related Products section below the main product card. This section displays a horizontally scrollable row of product tiles.

• [Screenshot: The Related Products section at the bottom of a Product Detail screen, showing a horizontal row of product tiles]

4. If the Related Products section is present, you will see multiple product tiles, each showing a product image, title, price, and currency.

5. Scroll the Related Products row horizontally to see all available suggestions.

6. Click on any related product tile.

7. Confirm: You are taken to the Product Detail screen for that related product. The URL changes to reflect the new product's handle.

8. Scroll down on the new product's page to check whether it also has a Related Products section.

9. Note that the Related Products section is not always present. If the system has no recommendations for a particular product, the section will not appear at all — this is normal.

Try It Yourself

1. Navigate to a Product Detail screen for a product in a specific category (for example, a shirt).

2. Scroll down to find the Related Products section.

3. Identify the related product tile that has the highest price in the row.

4. Note that product's title.

5. Click on a different related product tile — one that is not the most expensive.

6. Confirm: You are now on a new Product Detail screen.

7. Scroll down on this new page and check whether it also has a Related Products section.

8. If it does, click on one of those related products.

9. Confirm: You can navigate through a chain of related products, each leading to another Product Detail screen.

10. Use your browser's Back button to return to your original product.

Knowledge Check

• Where on the Product Detail screen is the Related Products section located?

• What happens if the system has no product recommendations for the product you are viewing?

• How is the Related Products section similar to the carousel on the Home screen?

Tips & Gotchas

• Tip: Related product suggestions are generated automatically by the store's catalog system based on the product you are viewing. You cannot manually control which products appear here.

• Gotcha: If you don't see a Related Products section, it doesn't mean the feature is broken — it simply means no recommendations are available for that specific product. Try viewing a different product to see if recommendations appear.

• Tip: The Related Products section is a great way to discover items you might not have found through search. If you find a product you like, always check the related products before leaving the page.

Capstone Exercise

Your Mission: Find, Evaluate, and Select a Product

Congratulations on completing all three modules! This capstone exercise combines skills from Module 1, Module 2, and Module 3 into a single realistic shopping scenario.

You will complete this exercise without step-by-step instructions. Use the skills you have learned to accomplish each goal. Refer back to earlier lessons if you need a reminder.

Scenario

You are a new customer visiting the store for the first time. You want to find a specific type of product, evaluate your options, and select the best one to add to your cart.

Your Goals

Complete all of the following tasks in order:

Goal 1: Orient yourself

• Start at the Home screen.

• Identify the three main sections of the page.

• Find and read one informational page linked from the Footer (for example, an "About Us" or "Privacy Policy" page).

• Note the last updated date on that page.

Goal 2: Search and filter

• Return to the Home screen.

• Use the search function to search for a product type of your choice (for example, "jacket," "bag," or "hat").

• If your search returns results, apply a sort to order the results by Price: Low to High.

• If your search returns no results, try a different, more general search term.

• Navigate to a collection page for a category related to your search (ask your system administrator for a valid collection handle if needed).

• Apply a different sort to the collection page — for example, Best Selling or Newest.

Goal 3: Evaluate a product

• From either your search results or the collection page, click on a product that interests you.

• Browse through all available images in the gallery.

• Read the full product description and identify at least two specific details (material, fit, care instructions, etc.).

• Note the price — is it a single price or a price range?

• Select a specific variant combination (size, color, or other options as available).

• Confirm that the Add to Cart button is active.

Goal 4: Explore related products

• Scroll down to the Related Products section.

• If it is present, identify the related product with the lowest price.

• Click on that related product.

• Evaluate whether this new product is a better match for your needs than the original.

Goal 5: Add to cart

• Return to the product you evaluated in Goal 3 (use your browser's Back button or navigate back through search/collection).

• Confirm your variant selection is still applied (re-select if needed).

• Add the product to your cart.

Success Criteria

You have successfully completed the capstone exercise when you can confirm all of the following:

• You visited the Home screen and identified its three main sections

• You read an informational page and noted its last updated date

• You performed a keyword search and received results (or correctly identified a no-results state)

• You applied at least one sort option to a search or collection page

• You browsed a collection page and viewed its products

• You opened a Product Detail screen and browsed multiple product images

• You selected at least one variant option on a product

• You confirmed the Add to Cart button was active and clicked it

• You found and used the Related Products section to navigate to a second product

Reflection Questions

After completing the exercise, consider these questions:

1. Which method of finding products did you find more useful — keyword search or browsing by collection? Why?

2. If you were looking for the most affordable option in a category, what is the fastest way to find it?

3. What would you do if you arrived at a Product Detail page and the Add to Cart button was disabled?

Glossary

Skills Checklist

Use this checklist to track your progress through the training. Check off each skill after you have completed the corresponding lesson and feel confident in your ability to perform it.

Foundation Skills

• FS-1 — I can identify a product grid and understand how the number of columns changes based on screen size

• FS-1 — I can click a product card to navigate to its Product Detail screen

• FS-2 — I can locate and use the sort control to reorder products in a grid

• FS-2 — I understand that sort options are stored in the URL and can be bookmarked or shared

• FS-3 — I can identify the title, price, and currency on a product card

• FS-3 — I can scroll the carousel on the Home screen to reveal additional product cards

• FS-4 — I can use the browser's Back button to return to a previous screen

• FS-4 — I understand what a 404 page means and how to recover from it

Module 1: Getting Oriented

• Lesson 1.1 — I can identify the three main sections of the Home screen (Three Item Grid, Carousel, Footer)

• Lesson 1.1 — I can navigate from the Home screen to a Product Detail screen using the Three Item Grid

• Lesson 1.1 — I can navigate from the Home screen to a Product Detail screen using the Carousel

• Lesson 1.2 — I can locate and navigate to informational pages using Footer links

• Lesson 1.2 — I can identify the title, body content, and last updated date on an informational page

• Lesson 1.2 — I understand what happens when I navigate to an informational page URL that does not exist

Module 2: Finding Products

• Lesson 2.1 — I can perform a keyword search and read the results summary

• Lesson 2.1 — I understand what the results summary line tells me about my search

• Lesson 2.2 — I can navigate to a collection page using its URL

• Lesson 2.2 — I can browse all products in a collection using the product grid

• Lesson 2.3 — I can apply a sort option to a search results page

• Lesson 2.3 — I can apply a sort option to a collection page

• Lesson 2.3 — I understand that sort options are preserved in the URL

• Lesson 2.4 — I can recognize and interpret a "no results" state on the Search screen

• Lesson 2.4 — I can recognize and interpret an "empty collection" state on a collection page

• Lesson 2.4 — I understand the difference between a blank Search screen (no query) and a no-results state

• Lesson 2.4 — I understand the difference between an empty collection and a 404 on a collection URL

Module 3: Evaluating a Product

• Lesson 3.1 — I can navigate to a Product Detail screen from a search result, collection page, Home screen, and direct URL

• Lesson 3.1 — I understand what a product handle is and where it appears in the URL

• Lesson 3.2 — I can browse through product images using the gallery thumbnails

• Lesson 3.2 — I know the maximum number of images that can appear in the gallery

• Lesson 3.3 — I can read the product title, price, and description on the Product Detail screen

• Lesson 3.3 — I can interpret a price range and understand what it represents

• Lesson 3.4 — I can select product variants using the variant selectors

• Lesson 3.4 — I can identify when a variant option is unavailable

• Lesson 3.5 — I can add a product to my cart using the Add to Cart button

• Lesson 3.5 — I understand when the Add to Cart button is active versus disabled

• Lesson 3.6 — I can locate and use the Related Products section to navigate to similar products

• Lesson 3.6 — I understand that the Related Products section may not appear on every product page

Capstone

• I have completed the Capstone Exercise and met all success criteria

Appendix A: Source Traceability

This appendix is for document maintainers. It maps each module and lesson to the application screen(s) from which the content was derived.

Appendix B: Documentation Coverage

This appendix is for document maintainers. It identifies gaps, inferences, and verification recommendations for each section of this manual.

Screens Covered

Screens Not Covered

The following application areas are outside the scope of this assessment and are not documented in this manual:

• Cart management screen (viewing cart contents, updating quantities, removing items)

• Checkout flow (all steps from cart to order confirmation)

• Account management (login, registration, order history, profile settings)

• Site header and global navigation bar (including the search input component)

• Sort control component (the shared layout component that renders sort dropdowns)

• Footer component internals (specific links and their destinations)

• ThreeItemGrid component internals (product selection logic, layout details)

• Carousel component internals (scroll behavior, product selection logic)

• ProductDescription component internals (exact variant selector UI, add-to-cart confirmation behavior)

• Gallery component internals (exact thumbnail interaction mechanics, swipe support)

• Error boundary pages (error.tsx, not-found.tsx)

Partially Documented Workflows

Information Inferred from Conventions

The following information was inferred from standard web application and e-commerce conventions rather than explicitly stated in the source documentation. Each item should be verified before this document is distributed.

Overall Recommendation

Before distributing this manual to end users, the document maintainer should:

1. Verify all inferred information listed above by consulting the specified team members.

2. Assess the undocumented screens — particularly the cart, checkout, and account management flows — and either extend this manual or create a separate training document to cover those workflows.

3. Capture screenshots at all [Screenshot: ...] placeholders throughout the document using the live application.

4. Validate sort option labels against the live application, as these are central to Module 2 and the Foundation Skills section.

5. Confirm add-to-cart feedback behavior (Lesson 3.5) as this is the primary conversion action in the application and learners will need accurate expectations.