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.
Before you start
North Commerce and North Commerce Blocks are installed and turned on
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.
In WordPress go to Pages → Add New Page
Give the page a name people will understand, like “Blue mug”
Click the + button
Search for Product
Click it once
The photos, title, price, options, quantity, and Add to Cart button all come with it.
Click the Product block so it is selected
In the right-hand sidebar, under General settings, set Product source to Manual
In Products, pick the product this page should show
Click Publish
If you skip picking a product, the page is empty. That is the one step people miss.
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
Switching the starter layout replaces the pieces you already arranged. The editor will ask you first.
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.
Add a Product block first (so the pieces know which product to show), or
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 / Collection Slider).
What your customer will do
Look at the photos
Pick options if the product has them (color, size, and so on)
Set a quantity
Click Add to Cart
Then they open the Cart Drawer and go to Cart Checkout.
Make sure it works
Open the page in a new browser tab, as if you were the customer.
You should see the product name, photo, and price
If the product has options, pick one
Click Add to Cart
The bag icon should show a count, and the Cart Drawer 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 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 · Cart Drawer · Cart Checkout · Creator Checkout · Create a product