# 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="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FjsKAzeWQIwVhN5b5Kjcn%2Fimage.png?alt=media&#x26;token=63b7ffe8-fa92-469a-bb3d-eee8ff8bea59" 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:\
    ![](https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FkR1SfBScf6z7RNGu4nwW%2Fimage.png?alt=media\&token=19459e12-fb8d-496b-9db1-a0fbd625123e)
  * Thumbs:\
    ![](https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2Fge3F2R6lt9bnBYiVf7cd%2Fimage.png?alt=media\&token=c8468f7d-5036-4c94-bf9a-bcb427374140)\
    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="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FHgsSyw6tV5pJOp40soHL%2Fimage.png?alt=media&#x26;token=0d9cca7b-85ad-477d-9835-d0eb52b03437" 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="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FIxPS5ll7ddljQAqcqSBk%2Fimage.png?alt=media&#x26;token=66518789-12be-45e0-98fd-7a333feb99cb" 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="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FiIwSyemM8kBebvwtZ1Ao%2Fimage.png?alt=media&#x26;token=002d3297-9204-4908-b0a8-a9f4bdde3aa5" 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="https://53546601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbDY41rxQywECDbaBijnt%2Fuploads%2FOtHiu4zo3GdKbjn2RWC1%2Fimage.png?alt=media&#x26;token=25c67f3c-8695-4d6b-b7d6-29b0c2c45b5d" 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.