> For the complete documentation index, see [llms.txt](https://bigstart.gitbook.io/amber-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bigstart.gitbook.io/amber-documentation/pages/product-page.md).

# Product page

The main section within this page is the one called `Product`. Below or above this section you can add more sections, but we suggest keeping the product section at the top:

<figure><img src="/files/zTWFTmddN2ZOSQAhPXoj" alt=""><figcaption></figcaption></figure>

### Main settings

#### Labels font

You can choose between `Heading font` and `Body font` settings. Changing this will result in changing the font of the following elements:

* Price
* Quantity
* Variant options
* Accordion titles

#### Media

You have separate options to change the aspect ratio of the image for desktop and mobile.

&#x20;\----

Other options in the section are:

* **Enable image zoom gallery** -- if checked, this enables the gallery popup when the product images are clicked.
* **Autoplay first video** -- if you're using a video for first media item, it can be autoplayed.
* **Layout** -- choose between `Grid` and `Thumbs` layout for the images:
  * Grid:\
    ![](/files/AoWbcoGJP9GCp6l0ug8t)
  * Thumbs:\
    ![](/files/ZWFLQi9MsMtpbfTeMLnS)\
    The thumbs can be positioned on the left, right or below the main image. This can be toggled from the `Thumbs position` setting.

#### Pagination

* **Autoplay** -- if checked, the product images will autoplay when they are in the `Thumbs` layout.
* **Slideshow Interval** -- set the slideshow interval when the slides will change.

## Blocks

All of the main product content (marked in orange below) is managed through blocks (marked in green below):

<figure><img src="/files/HOMzXAYmnDuAcQ9N9tsQ" alt=""><figcaption></figcaption></figure>

#### Badges

Except the block adding there are no additional settings here. Adding the block just means that the badges should be shown where the block is positioned.

You can use a prefixed product tag to add custom badges. For example `badge:New` will show a badge `New`.

The Out of Stock badge is automatic and is base on the product quantity.

#### Heading, Price, Vendor, Description

These are all fixed in terms of content and they're always loaded from the product details.

#### Variant selector

This is the block showing the variants.

<figure><img src="/files/txRcyIAfastm9eqDYoLg" alt=""><figcaption></figcaption></figure>

From here you can activate the `Size guide` link by checking the `Show size guide` checkbox.\
You can select the content from which page should be displayed when the size popup opens.

If needed, you can enable the size guide calculator by checking the `Enable size guide calculator` checkbox.\
More details about the size guide calculator can be found [`here`](https://bigstart.gitbook.io/amber-documentation/content-sections/size-guide).

#### Stock notification

This enables the stock progress bar:

<figure><img src="/files/zYW6w5nQYMa5IuUvtPvf" alt=""><figcaption></figcaption></figure>

From the block you can set the threshold when the progress bar should show up.\
In the example above, it's set to 15 and there are 5 product left, so 1/3 of the bar is filled.

#### Quantity

This block shows the quantity selector.

#### Pickup availability

<figure><img src="/files/6TROeQp6xqC12XNtWV8n" alt=""><figcaption></figcaption></figure>

This shows information about where the product can be picked up. The product needs to be set as such in the back-end. Clicking the `View store information` shows a popup with the available locations.

#### Purchase options

Used for products which offer subscription options.

#### Buy buttons

Shows the add to cart buttons. From here you can enable the dynamic checkout buttons.

The block has the option to enable/disable the recipient information form for the gift card products.

#### Collapsible description

Use these type of blocks for the collapsible accordions. They can be either dynamic (using the product metafields), or the same for all products.