TEST - Website Use Training

Basic Navigation

Home Page

Knowledge Check: Main Navigation


Match the following products with the section of the site they would be found in.  For now, we're just looking at the main navigation, not the subcategories within each (stay tuned for that!).

  • Packer
    Point Repair
  • Calibration Tube
  • Epoxy Resin MSDS
  • PortaVision 2
  • Credit Card Application
  • Hub

Dropdown Menus

Dropdown Menus

When you hover your mouse over any item in the main navigation, a menu of sub-pages/categories will appear below it.

Note that the page you are currently on will appear Red.


Sometimes, the main category will be broken into sub-categories and those may break down even further (sub-sub-categories?) to help the user find things quickly.  

Hover your mouse over a category, then over a sub-category, and further categories will appear in a separate menu to the right. Don't actually click until you've found the category you want to view.

Auxiliary Navigation

Note that the white bar is the primary way you navigate the site.  However, you do have a few more options in the header (above the white bar).

This header always appears, no matter what page you are on, and contains links to log in, view your account (after you log in), and view your shopping cart.

Product Categories

Main Categories 

When you click on any of the 4 main categories (CIPP, Picote, Inspection, Point Repair), you will see the sub-categories.


Sometimes sub-categories are even further broken down (sub-sub-categories?) to help the user narrow down the product catalog to quickly find what they're looking for.

Product Catalog

Once you have navigated to the lowest level of sub-category, you will see all the products within that group.  In this case, there are 7 products classified as "Resins" in the product catalog.  We will soon go over how to start adding products to your cart!

Note that at the top of the page above the title (Resins) but under the main navigation bar, you can see the path you took to get to the page you are on.  These are links!  For example, if you click "Lining Supplies" it will take you back to the page where you selected between liners, resins and cal tube.


Products with Options

How to Select Options

When you hover your mouse over a product, it will turn grey and a button (or buttons) will appear telling you what to do next!

For products with variations available - different sizes or configurations of the product - you will see a button that says "Select Options"

Price & Part Number on Options

When you select a size from the dropdown, in this case I changed from 5-gallon to 55-gallon, the information below it automatically changes: price & part number.

Default Values

On some products that have different variations, there is not a default value.  That means that when you click on a product, no option is selected so it does not show a price or a part number.  You also cannot add it to your cart until you make a selection - that is why the 'Add to Cart' button looks faded.

Make a Selection!

In this example, you have selected an option, 4"-6", so a price has automatically appear and so has the part number.  I can now add this product to my shopping cart - notice that the 'Add to Cart' button has gone back to its normal shade of red.

Click 'Add to Cart'

Once you click the 'Add to Cart' button after making your selection, you will see a notice that the item was successfully added to your cart.  From here, you can keep shopping as normal - typically by browsing categories from the top navigation bar.

Adding Products to your Cart

Products without Options

Most products do not have options you need to choose from.  You'll notice that only one price is listed below it.  

When you hover your mouse over a product without options, you'll see 2 buttons: "Add to Cart" and "Details".

Add to Cart from Category Page

If you click on the "Add to Cart" button, it will add 1 of that item to your cart and you will see a little check mark notifying you it was successfully added. If you need more than 1 of that item or want to see more information first, click "Details"

Viewing & Editing your Cart

Viewing Your Cart

If you recall, your cart is always available in the header no matter what page you are on. As you add products you'll see your tally increase.  Hover your mouse over the "Cart" to see a summary of your cart along with buttons that allow you to view the full version of your cart or go directly to checkout.

Untitled scenario question