This page works well as a presentation tool for showing the line to the buyer. The user can quickly add products to the cart at both the style and colorway level.
Filter for a Product
To enable the filter modal, select the Filter icon in the bottom left corner of the page, and a set of filters will appear on the left side of the screen. Use the filter menu to view products by Gender, Rating, or Availability. The Keyword Search box can be used to find a specific item by entering the product name, product number or UPC.
You can filter for products in several different ways, (which will be unique for every brand.) For example:
- Using the 'Search Products' field (product name, style number, SKU, color code, etc.)
- Date Available
- Active or Dropped
Across the bottom of the page, you'll notice a row of filters that are broken down by product category (or may be broken down another way depending on the brand you're working with.) Each tab acts as a filter: select one to display only items from that particular section. De-select all of these to display the entire catalog.
View Page Types
In the bottom left corner of the page, you'll notice a group of four buttons that give you options to display the catalog in different ways:
The '3up' view is the default option. This view balances having larger images and having more styles on a page.
The 'Rows' view allows you to see more product details and individual colors for each style. Notice the color names and codes appear underneath each product, which allows for easy image selection in this view.
The '1Up' view gives you the most information about a given item. To get to the 1Up view, you can use the bottom navigation button or click on any style name in any other view.
Product Detail Tabs
In this tab, you'll see a detailed overview all the product features. There will often be in-depth material information here as well, though sometimes this lives in the Technology tab.
The Technology tab (may read ‘Details’ for some brands,) contains product attributes, which will often have technology information.
If the detail is highlighted in blue, you may select the link for more information.
Here you will find current and future availability for the item on-screen.
Hover over the large hero product image to get an even more detailed view of the selected style. This is an especially beneficial feature if your brand has supplied product photos.
Add to Cart and Add All Colorways Buttons
You can add styles and colors directly to the cart, by clicking on these buttons:
• Add To Cart will add individual Colors
• Add All Colorways will add all of the colors for selected Style
Catalog Product Slider
This feature moves the thumbnails of products to the left and right. When you hover over the thumbnails of the images, the images will scroll left, right, or stop, depending on where you are on the page. Selecting a thumbnail will display the product in the large view within View; the color shown as the large image will be determined by the color-way sort. You can also click the ‘hide product slider’ icon to remove the slider from view.
Notes & Catalog Revisions
Here is where you'll see any dealer or rep notes that have been made to a product (e.g. "great for running".) This also houses any catalog revisions that have been made to the catalog post-printing, as to give the users the most up-to-date product information possible. Notes also has a filter option as well.
In this pop-up, you can see alternate views of the product–front, side, and/or back: