# Product page and lesson page

> How the product and the lesson appear to students: the listing model, the product banner, the sidebar, marking, the offer and the taxonomies.

Each product has two display screens. The **Product page** defines the list the student sees when opening the product. The **Lesson page** defines the screen where they watch. They only change the look: they do not change who has access.

## How it works

Both screens sit in the **Settings** group, in the product header:

- **Settings > Product page**: the listing model and the product banner.
- **Settings > Lesson page**: the sidebar, marking and navigation.

Both save with the bar at the bottom.

## The product page

### The listing model

| Model | What the student sees |
|---|---|
| **None** | No listing page. Opening the product takes the student straight to the first content. |
| **Grid** | The content as cards, in columns. |
| **Listing** | One content per row, with the thumbnail next to the title. |
| **Timeline** | The content in sequence, on a vertical timeline. |
| **Cademí** | A highlight on top and the content in carousels, streaming style. Not available in a blog. |

### The options of each model

The options change with the chosen model.

- **Thumbnail format** (Grid and Listing): **Automatic**, **Original Automatic**, 16:9, 4:4, 4:5 or 4:7.
- **Columns per row** (Grid): **3 columns** or **4 columns**.
- **Separate by modules** (Grid, outside a blog): groups the cards by module, with one heading per module. When on, it removes **Items per page**.
- **Items per page** (Grid, Listing and Timeline).
- In the **Cademí** model:
  - **Show modules as a carousel**. When off, the modules sit in a grid, with **Columns per row**.
  - **Show module titles**.
  - **Thumbnail format**.
- In a blog:
  - **Sort by**: **Creation Date**, **Publication Date** or **Sequential**, the manual order of the tree.
  - **Direction**: **Ascending** or **Descending**.

In Grid, Listing and Timeline there are also three panels: **Title**, **Date** and **Summary**. They have **Display title**, **Show date** and **Show summary**, each with its **Alignment**. The date also has its **Format**, with today's date as the example.

### The product banner

The product banner is a highlight strip at the top of the product page. It only exists when the model is not **None**. To turn it on, open the **Banner** panel and turn on **Show banner**.

With the banner on, you configure:

- **Banner content**:
  - **Logo**, in PNG up to 300 KB;
  - **Text** set to **Automatic**: the product name and the count of modules and lessons;
  - or **Text** set to **Custom**: **Title** and **Text**, each with its own color;
  - **Show text shadow**;
  - **Show continue button**, which takes the student back to where they stopped, with **Button text** and **Button colors**.
- **Background images**: **Desktop image** (JPG or PNG up to 300 KB, 1920 × 1080 px) and **Mobile image** (600 × 1050 px).
- **Background video (optional)**:
  - **Video URL** (YouTube or Vimeo) and **Mobile video URL**;
  - **Show video overlay**: a color with transparency over the image or the video;
  - **Video sound**: browsers only play the video on their own when it is muted;
  - **When the video ends**: **Repeat** or **Stop**.
- **Appearance**: **Banner height**, as a percentage of the screen, and **Show bottom gradient**.

It resembles the **Full banner** in **Content > Banners**, but it is tied to this product and has options of its own. The automatic text and the continue button exist only here. The click action, the menu color and the reduction during video exist only there. See [Banners](https://help.cademi.cloud/en/conteudo/banners.md).

## The lesson page

- **Featured video on mobile**: on phones, the lesson content comes before the modules bar. On a computer, the order does not change.
- **Theater mode player**: a larger video, from the start.
- **Fixed content tab**: the list of modules and lessons follows the scroll.
- **Sidebar**:
  - **Show modules bar**;
  - **Show reduced module list**, for products with submodules;
  - **Show lesson numbering**, as in "1. Welcome";
  - **Naming**: what lessons are called in this product (Plural and Singular).
- **Progress**: **Show the student's overall progress**, the bar with the percentage at the top of the sidebar.
- **Marking**:
  - **Show the mark-as-seen button**;
  - **Show the button after marking**. When off, the button disappears after the student marks the lesson;
  - **Automatic marking**: the time on the lesson until it marks itself. Choose **Default** or from **1 minute** to **1 hour and a half**.
- **Navigation**: the previous and next buttons below each lesson. Under **Type**, choose **Simple** (text) or **Thumbnail**. The thumbnail has **Thumbnail format** and **Display title**.
- **Next Product**: the **Product** suggested at the end of the content and the **Button text**. When empty, the button uses the product name.

## The student without access and the offer page

Whoever does not have the product sees a locked card in the showcase. On click, they go to the product's **Offer URL**. You set the offer in **Settings > General**, together with the **Expected delivery**. See [Products and formats](https://help.cademi.cloud/en/conteudo/produtos.md).

**Heads up: this is where most mistakes happen.** The product has no offer. Result: the student clicks the lock and reaches a closed door. The dashboard shows those products in two ways:

- the **No offer** issue, in **Content > Products**;
- the **Offer not configured.** notice, when you pick the product in a banner.

In both places, the **Increase your sales** form fills in the offer on the spot.

The offer page does not apply to a student who has the product and is blocked for another reason. For example: the lesson has not opened yet, it waits for an exam or a progress percentage, or it is in draft. That student stays in the area, with the explanation. The administrator preview does not follow the offer page either.

## Taxonomies (blog only)

In a product in the **Blog** format, the **Settings > Taxonomy** screen creates the groups that classify lessons: category, level, topic.

1. Click **New taxonomy**.
2. Fill in **Name**, as it appears when classifying. For example: "Category".
3. Fill in **Plural name**, the title of the filter list. For example: "Categories".
4. Save.
5. On the taxonomy card, click **Add Category**. The button uses the name you gave.
6. Fill in the term's **Name** and, if you want, a **Thumbnail**.
7. On each lesson's screen, classify the lesson under the terms.

To show the taxonomies as filters in the student's list, turn on **Taxonomy as filter**.

Deleting a taxonomy deletes its terms, and the content loses that classification. The term thumbnail is shown when the showcase lists thumbnails by that taxonomy. See [Showcases and groups](https://help.cademi.cloud/en/conteudo/vitrines-e-grupos.md).

## Good to know

- **Saved options.** Switching the listing model hides the other models' options. They are not erased.
- **Mark as seen.** It is the button the student sees. With **Show the mark-as-seen button** off, the lesson only completes through the player, automatic marking or an exam. See [Modules and lessons](https://help.cademi.cloud/en/conteudo/modulos-e-aulas.md).
- **Where the cover and color live.** The product cover and **Accent color** live in **Settings > General**, not here.

## Frequently asked questions

**I want the student to go straight to the first lesson.** Choose the **None** model in **Settings > Product page**.

**The product banner does not appear.** Check that the model is not **None** and that **Show banner** is on.

**The student clicks the lock and nothing happens.** The product has no **Offer URL**. Fill it in under **Settings > General**.