> 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.md).

# Blocks

North Commerce Blocks is how you build the store in the WordPress editor. Each block is one job. Add the block to the right page, then pick a product or a setting in the sidebar.

You do not need the older shortcodes for these pages.

{% hint style="info" %}
Start with a product. If you have not made one yet, see Create a product.
{% endhint %}

## Which block do I need?

| Block                                                                        | When to use                                              |
| ---------------------------------------------------------------------------- | -------------------------------------------------------- |
| [Product](/north-commerce/blocks/product.md)                                 | A single product page (photos, options, Add to Cart).    |
| [Product Query](/north-commerce/blocks/product-query.md)                     | A shop or collection grid, with filters and Load More.   |
| [Collection Slider](/north-commerce/blocks/collection-slider.md)             | A horizontal row of products (a shelf, not a full shop). |
| [Product Recommendations](/north-commerce/blocks/product-recommendations.md) | A “You may also like” strip on a product page.           |
| [Cart Drawer](/north-commerce/blocks/cart-drawer.md)                         | The bag icon in the header, and the slide-out bag.       |
| [Cart Checkout](/north-commerce/blocks/cart-checkout.md)                     | The register. Customers pay for everything in the cart.  |
| [Creator Checkout](/north-commerce/blocks/creator-checkout.md)               | One product, pay on the same page, no cart.              |
| [Order Confirmation](/north-commerce/blocks/order-confirmation.md)           | The page after they pay with Cart Checkout.              |
| [Account](/north-commerce/blocks/account.md)                                 | Sign in / register, and the signed-in orders dashboard.  |

## A simple path

1. Make a product
2. Put **Product Query** on the shop page
3. Put **Product** on each product page (or on the product template)
4. Put **Cart Drawer Trigger** in the header and **Cart Drawer Blocks** once on the site
5. Put **Cart Checkout** on the Checkout page
6. Put **Order Confirmation** on the Order Confirmation page
7. Put **Account Auth** on Sign in, and **Account Area** on Account

Use **Creator Checkout** instead of steps 3–6 when the whole page is one product and they pay right there.

## When not to mix them

* **Cart Checkout** and **Creator Checkout** are two different stores. Pick one path per page.
* **Order Confirmation** is only for Cart Checkout. Creator Checkout keeps its receipt on the same page.
* **Account Auth** and **Account Area** go on two different pages.
* **Product Query** is a grid. **Collection Slider** is a row. **Product Recommendations** is “you may also like.”

SEE ALSO: Create a product