> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/blocks/product.md).

# Product

The Product block is the whole product page: photo, name, price, options, and Add to Cart.

This is the block version of the older product-page shortcode. You no longer need that shortcode.

{% hint style="info" %}
If you want a **grid of many products** (a shop or collection), use [Product Query](/north-commerce/blocks/product-query.md). If you want one product with pay-on-this-page and no cart, use [Creator Checkout](/north-commerce/blocks/creator-checkout.md).
{% endhint %}

## Before you start

1. North Commerce and North Commerce Blocks are installed and turned on
2. The product already exists. See Create a product if you still need one

## Add the Product block

You can put this on any page. A page named after the product is fine.

1. In WordPress go to **Pages → Add New Page**
2. Give the page a name people will understand, like “Blue mug”
3. Click the **+** button
4. Search for **Product**
5. Click it once

![Search for Product in the block inserter](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FPAcv0Jp8ikhC6hVz4FMf%2Feditor-add-product.jpg?alt=media)

The photos, title, price, options, quantity, and Add to Cart button all come with it.

6. Click the Product block so it is selected
7. In the right-hand sidebar, under **General settings**, set **Product source** to **Manual**
8. In **Products**, pick the product this page should show
9. Click **Publish**

{% hint style="success" %}
If you skip picking a product, the page is empty. That is the one step people miss.
{% endhint %}

![Pick the product in the sidebar](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FveXxmui3EDoA72La5MOV%2Feditor-pick-product.jpg?alt=media)

### Automatic vs Manual

* **Manual** — you pick one product. Use this on a regular page.
* **Automatic** — the page shows whichever product the customer opened. Use this when you are editing the product page template, not a one-off page.

## Starter layout

You can leave the layout as-is. That is the easy path.

If you want a different starting arrangement, click the Product block and pick a **Starter layout**:

* **Drift** — gallery on the left, buy box on the right
* **Bloom** — large gallery, smaller buy box
* **Stack** — one column, image on top
* **Anchor** — scrolling gallery, buy box stays put

{% hint style="warning" %}
Switching the starter layout replaces the pieces you already arranged. The editor will ask you first.
{% endhint %}

## What comes in the block

You can leave everything as-is. If you want a simpler page, click a piece and delete it.

### Product Image Gallery

The photos. Customers can click a thumbnail to change the big picture.

### Product Title

The product name.

### Product Description

The write-up you entered on the product.

### Product Base Price

The selling price. It updates if the customer picks an option that costs more.

### Product Compare Price

The “was” price, if you set one. It usually shows with a line through it.

### Product Quantity Control

The + and − so the customer can buy more than one.

### Product Variations

The option pickers (color, size, and so on). This one block adds the right pickers for the product you chose.

Inside it you may see:

* **Product Color Variations** — color dots or a dropdown
* **Product Size Variations** — size buttons or a dropdown. You can turn on a size-guide link if you have one.
* **Product Text Variations** — text options, like “Small / Medium / Large” as words
* **Product Image Variations** — picture options the customer can click

You do not have to add these by hand. Product Variations puts them in for you.

### Product SKU

The stock code, if you entered one.

### Product Taxonomy

The category or tag. In the sidebar, pick **Category** or **Tag**.

### Product Buttons, Product Button, and Commerce Action Button

These are the buy buttons.

* **Commerce Action Button** is the Add to Cart button that comes with the Product block. You can change the **Button text** (it starts as “Add to Cart”).
* **Product Buttons** is just a row that holds buttons.
* **Product Button** is an older single button. You usually do not need it if Commerce Action Button is already there.

Do not delete the Add to Cart button.

### Product Badge

A small label on the photo, like NEW or SALE. You can type your own words (**Static Text**), or let it show on its own (**Dynamic**) when the product is on sale or new.

## Build a page from pieces

You do not have to start with the Product block.

1. Add a Product block first (so the pieces know which product to show), **or**
2. Click **+** and add pieces one by one: **Product Image Gallery**, **Product Title**, **Product Base Price**, and so on

Those pieces only work inside a Product block (or a product card in [Product Query](/north-commerce/blocks/product-query.md) / [Collection Slider](/north-commerce/blocks/collection-slider.md)).

## What your customer will do

1. Look at the photos
2. Pick options if the product has them (color, size, and so on)
3. Set a quantity
4. Click **Add to Cart**

Then they open the [Cart Drawer](/north-commerce/blocks/cart-drawer.md) and go to [Cart Checkout](/north-commerce/blocks/cart-checkout.md).

![A live Product page for Haze](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FKvy3EgLV2YQ9ZeVNDpXy%2Flive-product.jpg?alt=media)

## Make sure it works

Open the page in a new browser tab, as if you were the customer.

1. You should see the product name, photo, and price
2. If the product has options, pick one
3. Click **Add to Cart**
4. The bag icon should show a count, and the [Cart Drawer](/north-commerce/blocks/cart-drawer.md) should open with that product

## If something looks wrong

* **The page is empty / no name or price.** You did not pick a product, or **Product source** is still **Automatic** on a regular page. Set it to **Manual** and pick the product.
* **No photos.** The product has no images yet. Add them under Create a product.
* **No options to pick.** The product has no variations, or you deleted **Product Variations**.
* **Add to Cart does nothing.** The button is missing, or you do not have a [Cart Drawer](/north-commerce/blocks/cart-drawer.md) on the site.
* **You wanted a different product.** Click the Product block and pick again. One Product block shows one product.

SEE ALSO: [Product Query](/north-commerce/blocks/product-query.md) · [Cart Drawer](/north-commerce/blocks/cart-drawer.md) · [Cart Checkout](/north-commerce/blocks/cart-checkout.md) · [Creator Checkout](/north-commerce/blocks/creator-checkout.md) · Create a product