Skip to main content

How to Add a Product to a Page

After you create or manage catalog entries, attach them to landing pages with the Product block inside the Page Builder.

Before You Start​

Make sure you have:

  • At least one product saved in the catalog. See How to create a product.
  • A page open in the Page Builder (draft or published).
  • Checkout URLs configured on the product before you send traffic.

See Products overview and Add products to a page (reference).

Step 1: Open the Page Builder​

  1. Open Pages and select the page you want to edit.
  2. Click Edit to enter the Page Builder.
  3. Confirm you are in the correct project if your workspace filters assets.

Step 2: Insert the Product Block​

  1. Drag or insert the Product element from the palette.
  2. Select the block so the sidebar shows its settings.

See Product and price elements for how Product pairs with Price blocks.

Step 3: Pick a Catalog Item​

  1. Under Product, open the dropdown.
  2. Choose the catalog row you want — bundles show a “(Bundle)” suffix.
  3. The page stores a product reference; names and prices flow from the catalog until you edit the product again.

If the product was deleted, the drawer shows “Product not found” — pick a new product or restore the catalog entry.

Use Edit in Product Editor from the sidebar to tweak pricing or CTAs without leaving the builder.

Step 4: Override Display (Optional)​

When a product is selected, Display options exposes Show full product as a per-block override:

  • Off — Uses the catalog default unless you flip it here.
  • On — Forces the full merchandising column for this placement even if the catalog prefers selector-only mode.

This lets different pages present the same SKU differently.

Step 5: Save and Publish​

  1. Click Save in the builder.
  2. Click Publish when you are ready for traffic.
  3. Test the live URL in an incognito window — click through checkout CTAs for each tier if applicable.

Republish after major catalog edits (price changes, tier removals) so cached payloads stay accurate.

See Publish a page.

Troubleshooting​

ProblemWhat to try
Product not found warningRe-select a valid catalog product or recreate the missing entry.
Wrong price on live pageEdit the catalog product, save, then republish the page.
Two products needed side by sideAdd two Product blocks with different catalog selections.

Outcome​

The page displays your selected catalog product with working checkout behavior on the published URL.

FAQ​

Can I show two products side by side?

Add two Product blocks and choose different IDs. Watch mobile stacking—side-by-side layouts may collapse to a single column.

Does the Price block replace the Product block?

They serve different layout goals. Use Product for the full merchandising + checkout experience; use Price when you only need a pricing-focused slice.

Does the page store a copy of the product?

No. The block stores a reference to the catalog entry. Update pricing in Products, then republish if needed.