Skip to main content

How to Add Checkout or Product Button Behavior

Use this when a CTA should take visitors to checkout or start a product purchase path. Atomicat supports checkout through catalog Product CTAs and through Button click actions that open checkout/product URLs.

Before You Start​

Make sure you have:

  • A product (or bundle) saved with a valid checkout link. See How to create a product.
  • A sales page open in the Page Builder.
  • HTTPS checkout URLs from your payment provider for one-time (and subscription, if used).

Step 1: Confirm Product Checkout URLs​

  1. Open Products and edit the offer visitors will buy.
  2. Under Call to action, confirm:
    • Button text (for example Add to Cart or Buy now)
    • Button URL (checkout link)
  3. If you use quantity tiers, confirm either:
    • Use same link for all tiers, or
    • Per-tier one-time / subscription URLs

See How to use quantity tiers and Subscribe and Save.

Step 2: Choose Product Block or Standalone Button​

ApproachBest when
Product blockYou want catalog pricing, tiers, variants, trust badges, and the product CTA together.
Button with link / checkout behaviorYou need a custom-styled hero CTA that still opens the same checkout URL.

Option A — Product block CTA​

  1. Insert a Product element.
  2. Select the catalog product.
  3. Enable Show full product if visitors need images, details, and tier selectors.
  4. The purchase CTA uses the product’s checkout configuration.

See How to add a product to a page and Product element.

Option B — Button click to checkout​

  1. Add a Button where you want a bold CTA.
  2. Set the label to match the purchase action.
  3. In click event settings, choose supported checkout behavior when available, or set a normal link to the product’s checkout URL.
  4. Match the URL exactly to the catalog CTA (including query parameters your payment tool requires).

See Button element (reference).

Step 3: Align Tracking and Funnel Path​

  1. If ads rely on purchase intent clicks, attach button pixel events. See How to track button clicks with a pixel.
  2. If this page is a funnel step before checkout, keep the next funnel page consistent with the same offer. See How to create a funnel.
  3. Avoid pointing the hero Button at a different SKU than the Product block below it.

Step 4: Preview Pricing Paths​

  1. Use product Preview and page Preview.
  2. Click through every visible option: base price, each tier, and subscription vs one-time when both are enabled.
  3. Confirm each path lands on the correct checkout URL.

See Product preview.

Step 5: Publish and Test Live​

  1. Save and Publish the page.
  2. Test in an incognito window.
  3. Complete (or reach) checkout for the primary CTA.
  4. Re-test after catalog price or tier edits — republish so cached pages stay accurate.

Troubleshooting​

ProblemWhat to try
Button opens wrong offerSync the Button URL with the product CTA; avoid hardcoding outdated links.
Tier shows wrong checkoutCheck per-tier URLs and Use same link for all tiers.
Product not foundRe-select the catalog product or restore the product in the correct project.
Checkout broken on mobileTest absolute HTTPS URLs; avoid javascript: links.

Outcome​

Visitors can start checkout from your page CTA — either through the Product block or a standalone Button — with URLs that match your catalog offer.

FAQ​

Should I use a Product block or a Button for checkout?

Use a Product block when shoppers need to see pricing options and merchandising. Use a Button when you only need a strong CTA that opens the same checkout URL.

Can Button checkout reuse the product URL?

Yes. Copy the product Button URL into the Button link/checkout action so every CTA stays synchronized with the catalog.

Do bundles work the same way?

Yes for placement. Bundles appear in the Product picker with a (Bundle) label. Their CTA still uses the bundle’s saved checkout link.