Commerce Application

Training Manual

Date: May 2026

Generated by Inkwell Forge — 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 represent the public-facing storefront browsing experience. Key functional areas — including the shopping cart, checkout process, account management, and any administrative interfaces — were not part of this assessment and are therefore not covered. Additional screens should be assessed for comprehensive coverage.

How to Use This Manual

Structure of This Manual

This manual is organized as a guided learning journey. You will work through it from beginning to end, building skills progressively. Here is how the pieces fit together:

Manual
 └── Foundation Skills   ← Shared controls you'll use everywhere
 └── Modules             ← End-to-end workflows
      └── Lessons        ← One discrete skill per lesson
           ├── What You'll Learn
           ├── Before You Begin
           ├── Walkthrough       ← Step-by-step instructions
           ├── Try It Yourself   ← Your practice exercise
           ├── Knowledge Check   ← Self-assessment questions
           └── Tips & Gotchas    ← Practical advice
 └── Capstone Exercise   ← A realistic scenario combining multiple modules

Start with Foundation Skills. These teach the shared controls — product grids, carousels, sort options, and product tiles — that appear throughout the application. Learning them once here means you won't need to re-learn them in every lesson.

Work through Modules in order. Each module builds on the previous one. Module 1 orients you to the store; Module 2 teaches you how to find products; Module 3 teaches you how to evaluate them; Module 4 covers informational pages.

Complete the Capstone Exercise last. This is a realistic scenario that combines skills from multiple modules. You should complete it without step-by-step guidance — just a goal and success criteria.

Estimated Total Time

You do not need to complete the manual in a single session. Each lesson is self-contained — you can stop after any lesson and pick up where you left off.

Tracking Your Progress

At the end of this manual, you will find a Skills Checklist. After completing each lesson, return to the checklist and tick off the skills you have practiced. This gives you a clear picture of what you have covered and what remains.

Prerequisites

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

• A web browser. The application works in any modern web browser (such as Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari). Make sure your browser is up to date.
• Access to the store URL. You need the web address of the Commerce storefront. Your system administrator or manager can provide this if you do not already have it.
• An internet connection. The storefront loads product data live from the store's catalog. A stable internet connection is required.
• No account required for browsing. The screens covered in this manual — browsing, searching, and reading product and informational pages — are all publicly accessible. You do not need to log in to complete this training.

Note: Adding items to a cart and completing a purchase may require additional steps not covered in this document. Consult your system administrator for guidance on those workflows.

Foundation Skills

Before diving into the training modules, this section teaches you the shared controls and patterns that appear throughout the application. Completing these foundation skills first will make every subsequent lesson faster and easier.

FS-1: Working with Product Grids

What It Is

A product grid is a layout that displays multiple products side by side in rows and columns. You will encounter product grids on the Search screen, the Search Detail (collection) screen, and anywhere the store displays a list of products. The grid automatically adjusts the number of columns based on your screen size — on a phone you see one column, on a tablet two columns, and on a desktop three columns.

[Screenshot: A product grid showing 6 product tiles arranged in 3 columns on a desktop screen]

How to Interact with a Product Grid

Scanning the grid:

• Each cell in the grid is a product tile (see FS-4: Reading Product Tiles for details on what each tile shows).
• Scroll down to see more products if the grid extends below the visible area of your screen.

Clicking a product:

1. Locate the product tile you are interested in.
2. Click anywhere on the tile — the image, the title, or the price area.
3. You will be taken to that product's detail page.

Returning to the grid:

• Use your browser's Back button to return to the grid you came from.

Practice Exercise

1. Navigate to the store's Search screen (your trainer or system administrator can provide the URL).
2. Without entering a search term, observe the product grid that appears.
3. Count how many columns are visible on your screen.
4. Click on any product tile.
5. Confirm that you are taken to a product detail page.
6. Press your browser's Back button.
7. Confirm that you are back on the product grid.

Knowledge Check

• If you are viewing the store on a large desktop monitor, how many columns would you expect to see in a product grid?
• What happens when you click a product tile in a grid?

Tips

• Tip: If a grid appears to show no products at all, check whether you have an active search term or collection filter applied. The grid only hides when there are genuinely zero matching products.
• Tip: On a small screen, the grid collapses to a single column. If you want to see more products at once, try zooming out in your browser or switching to a larger device.

FS-2: Working with Product Carousels

What It Is

A product carousel is a horizontally scrollable row of product tiles. Unlike a grid, a carousel does not wrap into multiple rows — it extends sideways, and you scroll left or right to see more products. You will encounter the carousel on the Home screen, where it displays a broader selection of products below the featured grid.

[Screenshot: A product carousel showing several product tiles in a single horizontal row, with partial tiles visible at the right edge indicating more content]

How to Interact with a Product Carousel

Scrolling through the carousel:

• Mouse: Click and drag the carousel left or right, or use your mouse's horizontal scroll wheel if it has one.
• Trackpad: Swipe left or right with two fingers.
• Touch screen: Swipe left or right with one finger.
• Navigation controls: The carousel may include Previous and Next arrow buttons at its edges. Click these to advance through the products one step at a time.

Clicking a product:

1. Scroll the carousel until you can see the product you want.
2. Click on the product tile.
3. You will be taken to that product's detail page.

Practice Exercise

1. Navigate to the store's Home screen.
2. Scroll down past the featured product grid until you see the carousel.
3. Scroll the carousel to the right to reveal at least two products that were not initially visible.
4. Click on one of the newly revealed product tiles.
5. Confirm that you are taken to a product detail page.
6. Press your browser's Back button to return to the Home screen.

Knowledge Check

• What is the main visual difference between a product grid and a product carousel?
• Name two ways you can scroll through a carousel on a desktop computer.

Tips

• Tip: If you can see a product tile that is partially cut off at the right edge of the carousel, that is a visual cue that more products are available — keep scrolling.
• Tip: On touch screens, a quick swipe moves the carousel faster than a slow drag. Use a slow drag when you want precise control over which products are visible.

FS-3: Understanding Sort Options

What It Is

Sort options let you control the order in which products appear in a grid. You will encounter sort controls on the Search screen and the Search Detail (collection) screen. Changing the sort order does not remove any products — it simply rearranges them.

The available sort options are defined by the store and typically include choices such as relevance, price (low to high), price (high to low), newest arrivals, and best-selling items.

How Sort Options Work

Sort options are applied by selecting a value from a sort control — typically a dropdown or a set of links — that is part of the page's navigation or filter area. When you select a sort option:

1. The URL updates to include a ?sort= parameter (for example, ?sort=price-asc).
2. The page reloads with the products reordered according to your selection.
3. The product grid displays the same products in the new order.

Important: If you navigate away and return, the sort order you selected will still be active as long as the URL still contains the ?sort= parameter. If you share or bookmark the URL, the sort order is preserved.

Default sort: When no sort option has been selected, the store uses its default sort order (typically relevance or best-selling). You do not need to select a sort option — the page always displays results in some order.

Unrecognized sort values: If a URL contains an unrecognized sort value, the store silently falls back to the default sort order. You will not see an error message.

Practice Exercise

1. Navigate to the store's Search screen.
2. Observe the current order of products in the grid.
3. Locate the sort control (ask your trainer if you cannot find it).
4. Select a sort option that orders products by price from lowest to highest.
5. Confirm that the product grid reloads and the products are now ordered with the lowest-priced item first.
6. Now select a sort option that orders products by price from highest to lowest.
7. Confirm that the most expensive product now appears first.

Knowledge Check

• If you select a sort option and then share the URL with a colleague, will they see the same sort order you selected?
• What happens if the URL contains a sort value that the store does not recognize?

Tips

• Tip: Sorting by price low-to-high is useful when you are working within a budget. Sorting by newest arrivals is useful when you are looking for recently added products.
• Gotcha: Changing the sort order reloads the page. If you have scrolled far down a long product list, you will be returned to the top of the page after sorting. Make a note of where you were before changing the sort.

FS-4: Reading Product Tiles

What It Is

A product tile is the individual card that represents a single product within a grid or carousel. Every product tile shows the same core information, making it easy to compare products at a glance. You will encounter product tiles on the Home screen (in the featured grid and carousel), the Search screen, and the Search Detail screen.

[Screenshot: A single product tile showing a product image, product title, price, and currency label]

What a Product Tile Shows

Practice Exercise

1. Navigate to the store's Home screen.
2. Look at the featured product grid at the top of the page.
3. For each of the three featured products, write down: (a) the product title, (b) the price, and (c) whether you can tell from the tile alone if the product has multiple variants.
4. Now scroll down to the carousel and find the product with the lowest visible price.
5. Click that product tile and confirm that the product detail page matches the title and price you saw on the tile.

Knowledge Check

• What four pieces of information does a typical product tile display?
• If a product has variants at different price points, what price might the tile show?

Tips

• Tip: Product tiles are designed for quick scanning. If you are comparing prices across many products, sort the grid by price first (see FS-3: Understanding Sort Options) so the tiles are already in order.
• Tip: The product image on a tile is the same image you will see as the primary image on the product detail page. If the image is too small to judge quality, click through to the product detail page to see larger images.

Module 1: Orienting Yourself in the Store

Learning Objectives

After completing this module, you will be able to:

• Identify the three main sections of the Home screen and explain the purpose of each
• Navigate from the Home screen to a product detail page using both the featured grid and the carousel
• Use the footer to navigate to informational pages
• Describe the overall structure of the storefront and how the screens connect to each other

Estimated Time: 20–30 minutes

Lesson 1.1: Understanding the Home Screen Layout

What You'll Learn

The Home screen is the first thing visitors see when they arrive at the store. Understanding its layout helps you orient yourself quickly and know where to look for different types of content. In your daily work, this knowledge helps you guide customers or colleagues who are new to the store.

Before You Begin

No prerequisites — you can start this lesson at any time.

Walkthrough

1. Open your web browser and navigate to the store's home page (the root URL provided by your system administrator).
2. When the page loads, look at the top section of the page. You should see a prominent grid of three featured products — this is called the Featured Product Grid. It typically shows one large product on one side and two smaller products stacked on the other side.
3. Scroll down past the featured grid. You will see a horizontally scrollable row of products — this is the Product Carousel. It displays a broader selection of products from the catalog.
4. Continue scrolling to the very bottom of the page. You will reach the Footer, which contains navigation links to informational pages, legal information, and other site-wide resources.

[Screenshot: The full Home screen showing the three-item featured grid at the top, the product carousel in the middle, and the footer at the bottom]

You should now be able to identify all three sections of the Home screen.

Try It Yourself

1. Navigate to the store's Home screen.
2. Without clicking anything, identify and name all three sections of the page.
3. In the Featured Product Grid, identify which product appears largest (this is the hero product).
4. In the Product Carousel, count how many product tiles are visible without scrolling.
5. Scroll to the Footer and identify at least two types of links it contains (for example: policy pages, about pages, or external links).
6. Confirm that you can name all three sections and describe the purpose of each.

Knowledge Check

• What is the purpose of the Featured Product Grid on the Home screen?
• Why does the Home screen show both a featured grid and a carousel? What is the difference in their purpose?
• If you wanted to browse a wider selection of products without leaving the Home screen, which section would you use?

Tips & Gotchas

• Tip: The three products in the Featured Product Grid are specifically chosen by the store's merchandising team. They represent the store's current highlights — new arrivals, promotions, or bestsellers.
• Tip: The carousel is a good way to get a quick overview of the catalog without committing to a search. Think of it as a "window shopping" experience.
• Gotcha: The Home screen does not have a search bar of its own. If you want to search for a specific product, you will need to use the search functionality in the site's navigation bar (typically at the top of every page).

Lesson 1.2: Navigating from the Home Screen

What You'll Learn

The Home screen is a starting point, not a destination. Every product tile on the page is a doorway to a product detail page. In this lesson, you will practice navigating from the Home screen to product detail pages using both the featured grid and the carousel. This is the most common action a shopper takes on the Home screen.

Before You Begin

Complete Lesson 1.1: Understanding the Home Screen Layout first.

Also review FS-1: Working with Product Grids and FS-2: Working with Product Carousels if you have not already done so.

Walkthrough

Navigating from the Featured Product Grid:

1. Navigate to the store's Home screen.
2. Look at the Featured Product Grid at the top of the page.
3. Identify the large hero product (the biggest tile in the grid).
4. Click on the hero product tile.
5. You will be taken to that product's Product Detail page. The URL in your browser's address bar will change to something like /product/product-name.
6. Press your browser's Back button to return to the Home screen.

Navigating from the Carousel:

7. Scroll down to the Product Carousel.
8. Scroll the carousel to the right until you can see a product tile that was not visible when the carousel first loaded.
9. Click on that product tile.
10. You will be taken to that product's Product Detail page.
11. Press your browser's Back button to return to the Home screen.

[Screenshot: The Home screen with an arrow indicating a product tile being clicked in the featured grid, and the resulting product detail page]

Try It Yourself

1. Navigate to the store's Home screen.
2. In the Featured Product Grid, click on one of the two smaller (secondary) product tiles — not the large hero product.
3. Confirm that you arrive on a product detail page and that the product title matches what you saw on the tile.
4. Return to the Home screen using your browser's Back button.
5. Now scroll to the Product Carousel and click on the last product tile visible without scrolling (the rightmost one).
6. Confirm that you arrive on a product detail page.
7. Return to the Home screen.
8. What-if variation: Scroll the carousel all the way to the right until no more new products appear. How many products are in the carousel in total?

Knowledge Check

• After clicking a product tile on the Home screen, how can you tell you have successfully navigated to the product detail page?
• What is the quickest way to return to the Home screen after viewing a product?
• Can you navigate to a product detail page from both the featured grid and the carousel? What is the same about both interactions?

Tips & Gotchas

• Tip: Every product tile on the Home screen — whether in the featured grid or the carousel — behaves the same way when clicked. The visual style may differ, but the action is identical.
• Gotcha: On some devices, a slow swipe on the carousel can accidentally register as a click, taking you to a product page when you intended to scroll. If this happens, simply press Back to return to the Home screen and try scrolling with a faster, more deliberate swipe.
• Tip: The URL of a product detail page (e.g., /product/classic-white-tee) is stable and shareable. If you find a product you want to return to later, you can bookmark the product detail page directly.

Lesson 1.3: Using the Footer for Site Navigation

What You'll Learn

The footer appears at the bottom of every page in the store. It contains links to important informational pages — such as the store's policies, about page, and legal information — that are not part of the product catalog. Knowing how to use the footer helps you quickly find information that is not a product.

Before You Begin

Complete Lesson 1.1: Understanding the Home Screen Layout first.

Walkthrough

1. Navigate to the store's Home screen.
2. Scroll to the very bottom of the page until the Footer is fully visible.
3. Look at the links in the footer. These typically include pages such as About Us, Privacy Policy, Terms of Service, and similar informational content.
4. Click on one of the footer links — for example, Privacy Policy.
5. You will be taken to an informational page. The URL will change to something like /privacy-policy.
6. The page will display a title, the full text of the policy, and a note showing when the page was last updated.
7. To return to the Home screen, either press your browser's Back button or click the store's logo or home link in the site navigation.

[Screenshot: The footer section showing navigation links to informational pages]

Try It Yourself

1. Navigate to the store's Home screen.
2. Scroll to the Footer.
3. Identify and click on the Terms of Service link (or a similar policy link if Terms of Service is not present).
4. Confirm that you arrive on an informational page with a title, body content, and a "last updated" date.
5. Return to the Home screen.
6. What-if variation: Now try clicking a footer link that leads to an external resource (if any are present). Notice that external links may open in a new browser tab rather than navigating within the store.

Knowledge Check

• The footer appears on which pages of the store?
• What types of content would you typically find by clicking footer links?
• How is the content on a footer-linked page different from the content on a product detail page?

Tips & Gotchas

• Tip: The footer is the same on every page of the store. Once you know where to find a particular link in the footer, you can access it from anywhere in the application.
• Gotcha: Footer links lead to informational pages, not product pages. If you are looking for a product, use the search functionality or browse collections — not the footer.
• Tip: If a footer link leads to a page that does not exist (for example, if the store's administrator has removed a page), you will see a "Page Not Found" (404) message. This is normal — contact your system administrator if you believe a page should exist but is missing.

Module 2: Discovering Products

Learning Objectives

After completing this module, you will be able to:

• Search for products using a keyword and interpret the results
• Sort search results and collection pages using available sort options
• Navigate to and browse a specific product collection
• Identify when a search returns no results and understand what that means
• Use deep-linkable URLs to share or bookmark specific search views

Estimated Time: 40–55 minutes

Lesson 2.1: Searching for Products by Keyword

What You'll Learn

The Search screen is the fastest way to find a specific product when you know what you are looking for. When you type a keyword and submit a search, the store filters its entire catalog and shows you only the matching products. This lesson teaches you how to perform a keyword search and read the results.

Before You Begin

Complete Module 1: Orienting Yourself in the Store first.

Review FS-1: Working with Product Grids and FS-4: Reading Product Tiles before continuing.

Walkthrough

1. Locate the search bar in the site's navigation area (typically at the top of the page). Your trainer can point this out if you cannot find it.
2. Click on the search bar to activate it.
3. Type the word jacket into the search bar.
4. Press Enter on your keyboard (or click the Search button if one is present).
5. You will be taken to the Search screen at a URL like /search?q=jacket.
6. At the top of the results area, look for a summary message. If results were found, you will see a message such as: "Showing 4 results for 'jacket'". If no results were found, you will see: "There are no products that match 'jacket'".
7. Below the summary message (if results exist), you will see a product grid displaying the matching products.
8. Each product tile in the grid shows the product image, title, price, and currency.

[Screenshot: The Search screen showing a results summary message and a grid of matching product tiles]

Try It Yourself

1. Use the search bar to search for the word hoodie.
2. Read the results summary message at the top of the page. Write down: (a) how many results were returned, and (b) the exact wording of the summary message.
3. Identify the first product tile in the grid. Write down its title and price.
4. Now clear the search bar and search for a word that is very unlikely to match any product — for example, xylophone.
5. Confirm that the results summary message changes to indicate no matching products were found.
6. Confirm that the product grid is no longer visible.

Knowledge Check

• What message does the Search screen display when your keyword matches exactly one product?
• What does the Search screen look like when no products match your search term?
• If you search for a keyword and then share the URL with a colleague, will they see the same search results?

Tips & Gotchas

• Tip: The search is case-insensitive — searching for Jacket, jacket, or JACKET will return the same results.
• Gotcha: If you navigate to the Search screen without entering a keyword (i.e., /search with no ?q= parameter), the page will display all products in the store without a results summary message. This is normal behavior, not an error.
• Tip: If your search returns zero results, try a broader or simpler keyword. For example, instead of blue denim jacket, try just jacket.

Lesson 2.2: Sorting Search Results

What You'll Learn

Once you have a set of search results, you can change the order in which products appear. Sorting is useful when you want to find the cheapest option, the newest arrivals, or the most popular products within your search results. This lesson teaches you how to apply and change sort options on the Search screen.

Before You Begin

Complete Lesson 2.1: Searching for Products by Keyword first.

Review FS-3: Understanding Sort Options before continuing.

Walkthrough

1. Perform a search for the keyword shirt using the search bar. You should see a results grid with multiple products.
2. Locate the sort control on the Search screen. This is typically a dropdown or a set of links near the top of the results area. Your trainer can point this out if you cannot find it.
3. Note the current order of the products in the grid.
4. Click the sort control and select the option for Price: Low to High (or the equivalent label in your store).
5. The page will reload. The URL will update to include ?sort=price-asc (or a similar value). The product grid will now show the same products reordered from lowest to highest price.
6. Verify that the first product in the grid has a lower price than the last product.
7. Click the sort control again and select Price: High to Low.
8. The page reloads. The product that was last is now first.

[Screenshot: The Search screen with the sort control highlighted and a grid showing products ordered by price]

Try It Yourself

1. Search for the keyword pants.
2. Apply the sort option for Newest Arrivals (or the equivalent label in your store).
3. Note the title of the first product in the sorted grid.
4. Now apply the sort option for Best Selling (or the equivalent label).
5. Note whether the first product changed.
6. What-if variation: Copy the URL from your browser's address bar while a sort is active. Open a new browser tab and paste the URL. Confirm that the same sort order is applied in the new tab.

Knowledge Check

• After you apply a sort option, what changes on the page?
• If you apply a sort option and then press your browser's Back button, what sort order would you expect to see?
• Can you apply a sort option without first entering a search keyword?

Tips & Gotchas

• Tip: Sorting and searching work together. You can search for a keyword and then sort the results — the sort applies only to the products that matched your search.
• Gotcha: Changing the sort order reloads the page and returns you to the top of the results. If you had scrolled down to find a specific product, you will need to scroll again after sorting.
• Tip: The sort option is preserved in the URL. If you bookmark a sorted search URL, the sort will be applied automatically when you return to that bookmark.

Lesson 2.3: Browsing Products by Collection

What You'll Learn

A collection is a curated group of products organized by the store — for example, "T-Shirts", "New Arrivals", or "Sale Items". Browsing by collection is useful when you want to explore a category of products rather than search for something specific. The Search Detail screen displays all products in a given collection.

Before You Begin

Complete Lesson 2.1: Searching for Products by Keyword first.

Review FS-1: Working with Product Grids before continuing.

Walkthrough

1. Locate the store's navigation menu (typically in the header or sidebar). Look for links to product categories or collections — for example, T-Shirts, Accessories, or New Arrivals.
2. Click on a collection link — for example, New Arrivals.
3. You will be taken to the Search Detail screen at a URL like /search/new-arrivals.
4. The page displays a grid of all products in that collection.
5. If the collection contains products, you will see the product grid. If the collection exists but contains no products, you will see the message: "No products found in this collection."
6. Browse the grid by scrolling down. Click any product tile to view that product's detail page.
7. Press your browser's Back button to return to the collection.

[Screenshot: The Search Detail screen showing a collection name and a grid of products belonging to that collection]

Try It Yourself

1. Navigate to a collection called Accessories (or a different collection available in your store — ask your trainer for a valid collection name).
2. Count the number of products visible in the grid without scrolling.
3. Scroll down to see if there are more products below the fold.
4. Identify the product with the highest price in the collection.
5. Click on that product to confirm it takes you to the correct product detail page.
6. Return to the collection page.
7. What-if variation: Try navigating directly to a collection URL that does not exist — for example, type /search/this-collection-does-not-exist into your browser's address bar. What happens?

Knowledge Check

• What is the difference between using the Search screen and the Search Detail screen to find products?
• What message does the Search Detail screen show when a collection exists but has no products?
• What happens if you navigate to a collection URL that does not exist in the store?

Tips & Gotchas

• Tip: Collection URLs are stable and shareable. If you frequently browse a specific collection, bookmark its URL for quick access.
• Gotcha: Collections are managed by the store's administrator in Shopify. If a collection you expect to see is missing or empty, contact your system administrator — the collection may have been renamed, removed, or not yet populated with products.
• Tip: The Search Detail screen and the Search screen use the same product grid layout. The skills you learned in FS-1: Working with Product Grids apply equally to both.

Lesson 2.4: Sorting a Collection

What You'll Learn

Just as you can sort search results, you can also sort the products within a collection. This lesson teaches you how to apply sort options on the Search Detail (collection) screen. The sort behavior is identical to what you learned for search results, but it applies to a collection rather than a keyword search.

Before You Begin

Complete Lesson 2.3: Browsing Products by Collection first.

Review FS-3: Understanding Sort Options before continuing.

Walkthrough

1. Navigate to a collection page — for example, /search/t-shirts.
2. Observe the default order of products in the grid.
3. Locate the sort control on the page.
4. Select the sort option for Price: Low to High.
5. The page reloads. The URL updates to include ?sort=price-asc. The products are now ordered from lowest to highest price.
6. Select the sort option for Newest Arrivals (or equivalent).
7. The page reloads again with the new sort applied.
8. Notice that the collection handle in the URL (/search/t-shirts) remains unchanged — only the ?sort= parameter changes.

Try It Yourself

1. Navigate to a collection of your choice.
2. Apply the Best Selling sort option.
3. Write down the title of the first three products in the sorted grid.
4. Now apply the Price: High to Low sort option.
5. Write down the title of the first three products in the new order.
6. Compare the two lists. Did the order change?
7. What-if variation: Remove the ?sort= parameter from the URL manually (by editing the address bar and pressing Enter). What sort order is applied?

Knowledge Check

• When you sort a collection, does the set of products change or just their order?
• If you sort a collection by price and then navigate to a product and back, will the sort still be applied?
• What is the default sort order when no sort option has been selected?

Tips & Gotchas

• Tip: Sorting a collection by Newest Arrivals is a great way to see what has been added recently without having to search for it.
• Gotcha: The sort control on the collection page is part of the page's layout component, not the collection content itself. If you cannot find the sort control, it may be in a sidebar or above the product grid — look carefully at the full page layout.
• Tip: Sorting is non-destructive. You can switch between sort options as many times as you like without affecting the products themselves.

Lesson 2.5: Interpreting Search and Collection Results

What You'll Learn

Knowing how to read the results page — not just how to interact with it — is an important skill. This lesson focuses on interpreting what the Search and Search Detail screens are telling you, including result counts, empty states, and what the absence of a summary message means.

Before You Begin

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

Walkthrough

Reading the results summary (Search screen only):

1. Navigate to the Search screen and search for the keyword bag.
2. Read the results summary at the top of the results area. It will say one of:
   • "Showing 1 result for 'bag'" — exactly one product matched.
   • "Showing N results for 'bag'" — N products matched (where N is greater than 1).
   • "There are no products that match 'bag'" — zero products matched.
3. Note that the summary uses the correct singular or plural form ("result" vs. "results") automatically.

Understanding the absence of a summary (browsing without a keyword):

4. Navigate to the Search screen without entering a keyword (go directly to /search).
5. Notice that there is no results summary message at the top of the page. This is intentional — when you are browsing all products without a search term, the store does not display a count.
6. The product grid still appears and shows all available products.

Reading the collection empty state:

7. If your trainer can provide a collection that is currently empty, navigate to it.
8. You will see the message: "No products found in this collection." This means the collection exists but has no products assigned to it.

[Screenshot: Side-by-side comparison of the Search screen with results (showing summary message) and without results (showing no-results message)]

Try It Yourself

1. Navigate to the Search screen and search for the keyword glove.
2. Read and record the exact results summary message.
3. Now navigate to the Search screen without a keyword.
4. Confirm that no summary message appears, even though products are visible in the grid.
5. Navigate to a collection page.
6. Confirm that the collection page also shows no results summary message (collections never show a count summary).
7. Analysis task: Based on what you have observed, write a one-sentence explanation of when the results summary message appears and when it does not.

Knowledge Check

• On the Search screen, under what condition does the results summary message appear?
• What is the difference between seeing "There are no products that match [term]" and seeing a blank page with no grid?
• Does the Search Detail (collection) screen ever show a results count summary?

Tips & Gotchas

• Tip: The results summary is your confirmation that the search worked. If you see a count, you know the search was processed. If you see the "no products" message, you know the search was processed but nothing matched.
• Gotcha: The absence of a results summary on the Search screen (when browsing without a keyword) can be confusing — it looks the same as a search that returned results, except there is no message. The key difference is the URL: if there is no ?q= parameter, you are browsing all products, not searching.
• Tip: If a collection page shows "No products found in this collection," this is not an error — it simply means the collection is empty. Contact your system administrator if you believe products should be there.

Module 3: Evaluating a Product

Learning Objectives

After completing this module, you will be able to:

• Navigate to a product detail page and identify all the information it contains
• Browse through multiple product images using the image gallery
• Select product variants (such as size or color) before adding to cart
• Add a product to your cart
• Use the Related Products section to discover similar items

Estimated Time: 35–50 minutes

Lesson 3.1: Reading a Product Detail Page

What You'll Learn

The Product Detail page is where shoppers make their purchase decisions. It contains everything you need to know about a product: images, title, description, price, and availability. Understanding the layout of this page helps you find information quickly and helps you guide others who are evaluating a product.

Before You Begin

Complete Module 2: Discovering Products first, so you know how to navigate to a product detail page.

Walkthrough

1. Navigate to any product detail page (by clicking a product tile from the Home screen, Search screen, or a collection page).
2. Observe the overall layout. The page is divided into two main areas side by side (on a large screen) or stacked vertically (on a small screen):
   • Left side (or top on mobile): The Product Image Gallery — displays the product's photos.
   • Right side (or below on mobile): The Product Description Panel — displays the title, price, variant options, and add-to-cart controls.
3. In the Product Description Panel, locate and read:
   • The product title (displayed prominently at the top of the panel).
   • The price (displayed below the title).
   • The variant selectors (if present) — these allow you to choose options such as size or color.
   • The Add to Cart button.
4. Scroll down below the main product card. If the store has recommendations for this product, you will see a Related Products section with a heading and a row of product tiles.
5. Scroll to the very bottom of the page to find the Footer.

[Screenshot: A product detail page showing the image gallery on the left, the product description panel on the right, and the related products section below]

Try It Yourself

1. Navigate to a product detail page for a product that has at least two images (you can find one by browsing the catalog).
2. Identify and write down: (a) the product title, (b) the price, (c) whether variant options are available, and (d) whether a Related Products section is visible.
3. Now navigate to a different product — one that you found via a search for the keyword accessory (or a similar term available in your store).
4. Compare the two product pages. Do both have a Related Products section? Do both have variant selectors?
5. Confirm that both pages follow the same two-column layout (gallery on the left, description on the right).

Knowledge Check

• What two main areas make up the layout of a Product Detail page?
• Where on the page would you look to find the product's price?
• Is the Related Products section always visible on every product detail page?

Tips & Gotchas

• Tip: On a mobile device or narrow browser window, the image gallery and description panel stack vertically. The gallery appears first (at the top), followed by the description panel below it.
• Gotcha: If a product has no related products, the Related Products section simply does not appear — there is no empty placeholder or message. The page ends with the footer.
• Tip: The product detail page URL (e.g., /product/classic-white-tee) is stable. You can bookmark it or share it with others, and they will see the same product.

Lesson 3.2: Browsing Product Images

What You'll Learn

Most products have multiple photos showing different angles, details, or color options. The Product Image Gallery lets you browse through these images without leaving the product page. This lesson teaches you how to navigate the gallery so you can fully evaluate a product before making a decision.

Before You Begin

Complete Lesson 3.1: Reading a Product Detail Page first.

Walkthrough

1. Navigate to a product detail page for a product that has multiple images. (If you are unsure which products have multiple images, browse the catalog and look for products with thumbnail strips or navigation arrows in the gallery area.)
2. Look at the Product Image Gallery on the left side of the page (or top on mobile).
3. The gallery displays the main (primary) image prominently.
4. If the product has additional images, you will see thumbnail images below or beside the main image. Click on a thumbnail to display that image as the main image.
5. Alternatively, use the Previous and Next navigation arrows (if present) to cycle through images one at a time.
6. Notice that the gallery displays a maximum of 5 images per product, even if the product has more photos in the store's catalog.

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

Try It Yourself

1. Navigate to a product detail page for a product with at least three images.
2. Click on the second thumbnail image. Confirm that the main image updates to show the second photo.
3. Click on the third thumbnail image. Confirm that the main image updates again.
4. Use the navigation arrows (if available) to cycle back to the first image.
5. What-if variation: Navigate to a product that has only one image. Confirm that no thumbnail strip or navigation arrows are visible (since there is nothing to navigate to).

Knowledge Check

• What is the maximum number of images that the gallery will display for a single product?
• What are two ways to navigate between images in the gallery?
• If a product has 8 images in the store's catalog, how many will you be able to see in the gallery?

Tips & Gotchas

• Tip: If you want to see a larger version of a product image, try clicking directly on the main image — some galleries support zooming or opening a full-screen view (behavior depends on the gallery component's implementation).
• Gotcha: The gallery shows a maximum of 5 images. If you are evaluating a product and feel you need to see more photos, contact the store's customer service team — they may be able to provide additional images.
• Tip: While the gallery loads, you may briefly see a blank square placeholder in the image area. This is normal — the image will appear within a moment.

Lesson 3.3: Selecting Product Variants

What You'll Learn

Many products come in multiple options — for example, a shirt might be available in sizes Small, Medium, and Large, or in colors Red, Blue, and Green. These options are called variants. Before you can add a product to your cart, you typically need to select the specific variant you want. This lesson teaches you how to identify and select variants on the Product Detail page.

Before You Begin

Complete Lesson 3.1: Reading a Product Detail Page first.

Walkthrough

1. Navigate to a product detail page for a product that has variants (for example, a clothing item with size options).
2. In the Product Description Panel on the right side of the page, look for the variant selector controls. These may appear as:
   • A set of clickable buttons (one per option, e.g., "S", "M", "L", "XL")
   • A dropdown menu
   • A color swatch grid
3. Read the label above the selector to understand what type of option you are choosing (e.g., Size, Color, Material).
4. Click on the variant option you want — for example, click Medium.
5. The selected option will be visually highlighted (e.g., with a border, background color, or checkmark).
6. If the product has more than one type of variant (e.g., both size and color), repeat the selection for each variant type.
7. Notice that the price displayed in the panel may update if different variants have different prices.

[Screenshot: The Product Description Panel showing variant selector buttons with one option selected and highlighted]

Try It Yourself

1. Navigate to a product detail page for a clothing item with size variants.
2. Select the size Large (or the largest available size if Large is not present).
3. Confirm that the Large option is visually highlighted.
4. Now select a different size — for example, Small.
5. Confirm that Small is now highlighted and Large is no longer highlighted.
6. If the product also has a color variant, select a color of your choice.
7. What-if variation: Navigate to a product that has no variants. Confirm that no variant selector controls are visible in the Product Description Panel.

Knowledge Check

• What visual indicator tells you that a variant option is currently selected?
• If a product has both a size option and a color option, do you need to select both before adding to cart?
• Can the price of a product change depending on which variant you select?

Tips & Gotchas

• Tip: If a variant option appears greyed out or is not clickable, it may be out of stock. Check whether the product is available in your preferred variant before proceeding.
• Gotcha: If you do not select a required variant before clicking Add to Cart, the system may prompt you to make a selection first. Always check that all variant selectors show a selected value before adding to cart.
• Tip: Variant selection is specific to your current browser session. If you close the tab and return to the product page, you will need to re-select your variants.

Lesson 3.4: Adding a Product to Your Cart

What You'll Learn

Once you have evaluated a product and selected your preferred variants, the next step is to add it to your cart. The Add to Cart button is located in the Product Description Panel on the Product Detail page. This lesson teaches you how to complete this action.

Before You Begin

Complete Lesson 3.3: Selecting Product Variants first.

Walkthrough

1. Navigate to a product detail page.
2. In the Product Description Panel, select any required variants (size, color, etc.) as described in Lesson 3.3: Selecting Product Variants.
3. Locate the Add to Cart button in the Product Description Panel.
4. Click the Add to Cart button.
5. The application will process your request. You should see a visual confirmation that the item has been added — this may be a change in the button's appearance, a notification message, or an update to a cart icon in the navigation bar.

Note: The cart, checkout, and order management workflows continue on additional screens not included in this document. Please consult your system administrator for the complete purchasing process.

[Screenshot: The Product Description Panel with the Add to Cart button highlighted]

Try It Yourself

1. Navigate to a product detail page for a product with at least one variant.
2. Select the variant option for Medium (or the middle-sized option available).
3. Click the Add to Cart button.
4. Observe and record what visual feedback you receive confirming the item was added.
5. What-if variation: Navigate to a product that is listed as out of stock (if one is available in your store). Observe whether the Add to Cart button is available or disabled. What does the page show instead?

Knowledge Check

• Where on the Product Detail page is the Add to Cart button located?
• What should you do before clicking Add to Cart if the product has variant options?
• What visual feedback confirms that an item has been successfully added to your cart?

Tips & Gotchas

• Tip: If the Add to Cart button appears disabled or greyed out, the product or selected variant may be out of stock. Check the availability information on the page.
• Gotcha: Adding an item to your cart does not reserve it or complete a purchase. You must proceed through the checkout process to place an order. Consult your system administrator for guidance on completing a purchase.
• Tip: You can add the same product to your cart multiple times by clicking Add to Cart more than once, or by adjusting the quantity in your cart. Cart management is covered in screens not included in this document.

Lesson 3.5: Exploring Related Products

What You'll Learn

At the bottom of many product detail pages, you will find a Related Products section. This section shows products that the store's system has identified as similar or complementary to the one you are viewing. Using this section is a great way to discover products you might not have found through search or browsing.

Before You Begin

Complete Lesson 3.1: Reading a Product Detail Page first.

Review FS-4: Reading Product Tiles before continuing.

Walkthrough

1. Navigate to a product detail page.
2. Scroll down below the main product card (the area containing the gallery and description panel).
3. Look for a section with the heading "Related Products".
4. If the section is present, you will see a horizontally scrollable row of product tiles. Each tile shows the product image, title, price, and currency.
5. Scroll the related products row left or right to see all available recommendations.
6. Click on any related product tile to navigate to that product's detail page.
7. You will be taken to the new product's detail page. Notice that the URL changes to reflect the new product's handle.
8. The new product page may also have its own Related Products section, allowing you to continue exploring.

[Screenshot: The Related Products section at the bottom of a product detail page, showing a horizontal row of product tiles]

Try It Yourself

1. Navigate to a product detail page for a clothing item.
2. Scroll to the Related Products section.
3. Identify the related product with the highest price.
4. Click on that product tile to navigate to its detail page.
5. On the new product page, scroll to its Related Products section (if present).
6. Check whether the original product you started from appears as a related product on this new page.
7. What-if variation: Navigate to a product that has no Related Products section. Confirm that the section is simply absent — there is no empty placeholder or "no recommendations" message.

Knowledge Check

• Where on the Product Detail page is the Related Products section located?
• What happens if a product has no related product recommendations?
• Can you navigate from one product to another using only the Related Products section?

Tips & Gotchas

• Tip: The Related Products section is generated automatically by the store's recommendation system. The suggestions are based on factors like product category, purchase history, and browsing patterns — you do not need to configure anything.
• Gotcha: Not every product has a Related Products section. If you scroll to the bottom of a product page and see only the footer, the product simply has no recommendations. This is normal.
• Tip: Related product tiles behave exactly like the product tiles you learned about in FS-4: Reading Product Tiles. Click anywhere on the tile to navigate to that product.

Module 4: Reading Informational Pages

Learning Objectives

After completing this module, you will be able to:

• Navigate to informational pages such as About Us, Privacy Policy, and Terms of Service
• Identify the three elements that every informational page displays
• Locate the "last updated" date on an informational page
• Recognize when an informational page does not exist and understand what the 404 response means

Estimated Time: 20–25 minutes

Lesson 4.1: Navigating to an Informational Page

What You'll Learn

Informational pages — such as the store's Privacy Policy, Terms of Service, About Us, and FAQ — are managed by the store's administrator and are accessible through the site's navigation (typically the footer or header menu). This lesson teaches you how to find and navigate to these pages.

Before You Begin

Complete Lesson 1.3: Using the Footer for Site Navigation first.

Walkthrough

1. From any page in the store, scroll to the Footer at the bottom of the page.
2. Look for links to informational pages. Common examples include:
   • About Us — information about the store and its mission
   • Privacy Policy — how the store handles your personal data
   • Terms of Service — the legal terms governing use of the store
   • FAQ — answers to frequently asked questions
3. Click on the Privacy Policy link.
4. You will be taken to the informational page at a URL like /privacy-policy.
5. The page loads and displays its content.
6. To navigate to a different informational page, scroll back to the footer and click a different link — or use your browser's Back button to return to where you came from.

Navigating directly by URL:

7. If you know the URL of an informational page, you can navigate to it directly by typing the URL into your browser's address bar. For example, typing /about will take you to the About Us page (if it exists).

[Screenshot: The footer with informational page links highlighted, and the resulting informational page]

Try It Yourself

1. From the Home screen, navigate to the Terms of Service page using the footer.
2. Confirm that the page loads and displays content.
3. Note the URL in your browser's address bar.
4. Now try navigating directly to the About Us page by typing /about into your browser's address bar (replace the domain with your store's domain).
5. Confirm that the page loads.
6. What-if variation: Try navigating to a page that does not exist — for example, type /this-page-does-not-exist into the address bar. What happens?

Knowledge Check

• Name two ways to navigate to an informational page.
• What happens when you try to navigate to an informational page that does not exist?
• Are informational pages the same as product pages? How are they different?

Tips & Gotchas

• Tip: Informational pages are managed by the store's administrator in Shopify. If you need to update the content of a policy page or add a new informational page, contact your system administrator — you cannot edit these pages from the storefront.
• Gotcha: If you navigate to an informational page URL and see a "Page Not Found" (404) error, the page either does not exist or has been removed. Check the footer for the correct link, or contact your system administrator.
• Tip: Informational page URLs are stable and shareable. You can send a direct link to the Privacy Policy or Terms of Service to a customer without worrying that the URL will change.

Lesson 4.2: Reading and Interpreting Page Content

What You'll Learn

Every informational page in the store follows the same consistent structure: a title, the main content, and a "last updated" date. Knowing this structure helps you quickly find the information you need and verify that you are reading the most current version of a policy or document.

Before You Begin

Complete Lesson 4.1: Navigating to an Informational Page first.

Walkthrough

1. Navigate to any informational page — for example, the Privacy Policy.
2. At the very top of the page content, you will see the page title displayed as a large heading (for example, "Privacy Policy"). This confirms which page you are on.
3. Below the title, you will see the main content of the page. This is the full text of the document, which may include headings, paragraphs, bullet lists, and links — all formatted for easy reading.
4. Scroll through the content to read it. The content may be long — use your browser's scroll bar or keyboard arrow keys to move through it.
5. At the bottom of the page content (before the footer), look for a small line of italic text that reads something like: "This document was last updated on January 15, 2024." This is the last updated date, and it tells you when the content was most recently changed.
6. Note the format of the date: it is written out in full (month name, day, and year) for clarity.

[Screenshot: An informational page showing the title heading at the top, formatted body content in the middle, and the last updated date in small italic text at the bottom]

Try It Yourself

1. Navigate to the About Us page (or a similar informational page available in your store).
2. Identify and write down: (a) the page title, (b) the approximate length of the content (short, medium, or long), and (c) the last updated date.
3. Now navigate to the FAQ page (or another informational page).
4. Identify the same three elements: title, content, and last updated date.
5. Compare the last updated dates of the two pages. Which one was updated more recently?
6. What-if variation: Look for any hyperlinks within the body content of an informational page. Click one. Where does it take you? Does it open in the same tab or a new tab?

Knowledge Check

• What three elements does every informational page display?
• Where on the page is the "last updated" date located?
• Why is the "last updated" date useful when reading a policy page?

Tips & Gotchas

• Tip: The "last updated" date is particularly important for legal and policy pages. If you are referencing a policy in a customer interaction, note the date to confirm you are working from the current version.
• Gotcha: The content of informational pages is authored and managed in Shopify's admin. If the content appears incorrect, outdated, or missing, contact your system administrator — you cannot edit it from the storefront.
• Tip: Links within the body of an informational page are authored by the store's administrator. They may lead to other pages within the store, external websites, or email addresses. The behavior of these links (same tab vs. new tab) depends on how the administrator configured them.

Capstone Exercise

Your Mission

You are helping a new customer who has contacted the store with the following request:

"I'm looking for a medium-sized blue hoodie under $80. I also want to check the store's return policy before I buy anything. And if the hoodie I find has any similar products, I'd like to see those too."

Your task is to complete this entire workflow from start to finish — without step-by-step instructions. Use the skills you have learned throughout this manual.

What You Need to Do

1. Find the product. Use the store's search functionality to find hoodies. Sort the results to help you identify options under $80. Navigate to a product detail page for a hoodie that meets the customer's criteria.

2. Evaluate the product. On the product detail page, browse the product images to get a full view of the item. Select the Medium size variant and the blue color variant (if available). Confirm the price is within the customer's budget.

3. Check the return policy. Without losing your place on the product page, navigate to the store's return or refund policy page (check the footer for a link). Read the page and note the last updated date. Return to the product page.

4. Explore related products. Scroll to the Related Products section on the hoodie's product detail page. Identify at least one related product that might also interest the customer. Navigate to that related product's page and note its title and price.

5. Report back. At the end of the exercise, you should be able to answer:

   • What is the title and price of the hoodie you found?
   • What size and color did you select?
   • When was the return policy last updated?
   • What is the title and price of one related product you found?

Success Criteria

You have successfully completed the Capstone Exercise when:

• You have navigated to a hoodie product detail page using the search functionality
• You have applied a sort option to help identify products within budget
• You have selected at least one variant (size) on the product detail page
• You have browsed at least two product images in the gallery
• You have navigated to an informational policy page and identified its last updated date
• You have returned to the product detail page after reading the policy
• You have scrolled to the Related Products section and clicked through to at least one related product
• You can answer all five questions in the "Report back" section above

Modules Covered

This exercise combines skills from:

• Module 1: Orienting Yourself in the Store (navigation, footer)
• Module 2: Discovering Products (search, sort)
• Module 3: Evaluating a Product (gallery, variants, related products)
• Module 4: Reading Informational Pages (policy pages, last updated date)

Glossary

Skills Checklist

Use this checklist to track your progress through the training. After completing each lesson, return here and check off the skills you have practiced.

Foundation Skills

• FS-1: I can identify a product grid and understand how it adjusts for different screen sizes
• FS-1: I can click a product tile in a grid to navigate to the product detail page
• FS-2: I can scroll a product carousel using a mouse, trackpad, and/or touch screen
• FS-2: I can click a product tile in a carousel to navigate to the product detail page
• FS-3: I can locate and use the sort control on a product listing page
• FS-3: I understand that sort options are preserved in the URL
• FS-3: I understand what happens when an unrecognized sort value is in the URL
• FS-4: I can identify the four elements displayed on a product tile (image, title, price, currency)
• FS-4: I can use product tiles to compare products at a glance

Module 1: Orienting Yourself in the Store

• 1.1: I can identify the three sections of the Home screen (Featured Product Grid, Carousel, Footer)
• 1.1: I can describe the purpose of each Home screen section
• 1.2: I can navigate from the Featured Product Grid to a product detail page
• 1.2: I can navigate from the Product Carousel to a product detail page
• 1.2: I can return to the Home screen using the browser's Back button
• 1.3: I can locate the Footer on any page
• 1.3: I can use footer links to navigate to informational pages

Module 2: Discovering Products

• 2.1: I can use the search bar to search for products by keyword
• 2.1: I can read and interpret the results summary message on the Search screen
• 2.1: I understand what the Search screen looks like when no results are found
• 2.2: I can apply a sort option to search results
• 2.2: I can change the sort option and observe the results reorder
• 2.3: I can navigate to a collection page using the site navigation
• 2.3: I understand what the Search Detail screen shows when a collection is empty
• 2.3: I understand what happens when I navigate to a collection that does not exist
• 2.4: I can apply a sort option to a collection page
• 2.4: I understand that sorting changes order but not the set of products
• 2.5: I can explain when the results summary message appears and when it does not
• 2.5: I can distinguish between a search with no results and browsing without a keyword

Module 3: Evaluating a Product

• 3.1: I can identify the two main areas of the Product Detail page layout
• 3.1: I can locate the product title, price, and variant selectors on the Product Detail page
• 3.2: I can browse product images using thumbnail navigation
• 3.2: I know the maximum number of images displayed in the gallery (5)
• 3.3: I can identify variant selector controls on the Product Detail page
• 3.3: I can select a variant option and confirm it is visually highlighted
• 3.3: I understand that some products have no variants
• 3.4: I can locate and click the Add to Cart button
• 3.4: I understand that adding to cart does not complete a purchase
• 3.5: I can locate the Related Products section on a product detail page
• 3.5: I can navigate to a related product by clicking its tile
• 3.5: I understand that not every product has a Related Products section

Module 4: Reading Informational Pages

• 4.1: I can navigate to an informational page using the footer
• 4.1: I can navigate to an informational page by typing its URL directly
• 4.1: I understand what happens when an informational page does not exist
• 4.2: I can identify the three elements of every informational page (title, content, last updated date)
• 4.2: I can locate the last updated date on an informational page
• 4.2: I understand that informational page content is managed by the store administrator

Capstone Exercise

• I have completed the Capstone Exercise end-to-end
• I can answer all five questions in the Capstone "Report back" section

Appendix A: Source Traceability

This appendix is for the document maintainer. 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 the document maintainer. It identifies gaps, inferences, and verification requirements before this document is distributed to end users.

Screens Covered

Screens Not Covered

The following functional areas are known to exist based on references within the assessed screens but were not part of this assessment:

Partially Documented Workflows

Information Inferred from Technology Conventions

The following items were described in this manual based on standard e-commerce and web application conventions rather than explicit documentation. These should be verified before distribution.

Overall Recommendation

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

1. Verify all inferred UI details listed above with the development team lead, particularly the sort control appearance, variant selector appearance, and Add to Cart button label — these appear in multiple lessons and exercises.
2. Assess the site header/navigation component to document the search bar and collection navigation links, which are referenced throughout Modules 2 and 3 but were not part of this assessment.
3. Assess the cart and checkout screens to complete the add-to-cart workflow in Lesson 3.4 and enable a more complete Capstone Exercise.
4. Replace all [Screenshot: ...] placeholders with actual screenshots from the live application.
5. Conduct a walkthrough review with a subject matter expert (product owner or experienced store user) to verify that all described workflows match actual application behavior.