Help4 Commerce Products, Variations and Customer Fields
Before the first click
Confirm what you are editing and where each kind of change belongs.
Read the page or template title first, select the exact element in the canvas or Navigator, then use the inspector tab that matches the job. This prevents a content change from becoming an accidental layout change.
Content
Change words, links, images, icons, data sources, shortcodes, and element-specific information.
Design
Change colors, typography, spacing, borders, radius, alignment, states, and desktop, tablet, or mobile values.
Advanced
Change labels, anchors, classes, attributes, visibility rules, motion, and other expert controls.
Page Settings
Use page-wide history, globals, publishing, template assignment, and recovery controls instead of editing one element.
Visual orientation
Match the screen before following the steps.
Open each image at full size. The numbered notes explain what the screen controls and what to confirm before changing customer content.
Screen 1
Commerce operations
Review catalog, orders, customers, subscriptions, payment routing, and store health from the native commerce hub.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 2
Commerce dashboard
Review products, orders, customers, subscriptions, gateway routing, imports, and migration tools from one commerce hub.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 3
Product quantity rules
Choose selectable quantity, fixed one-per-line packages, whole-order limits, minimum, maximum, and quantity steps.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 4
Commerce products
Create products, variations, subscriptions, product images, quantity rules, catalog fields, and checkout context.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Screen 5
Fields Lab
Plan field groups, repeaters, images, relationships, and dynamic output for content that should not be edited as fragile page text.
Confirm: the page title, selected item, plugin version, and intended responsive view match the task.
Watch the real workflow
Watch the clicks before making the change.
Use the narrated walkthrough first, then follow the written steps and verification checks on this page.
Lesson 19
Commerce Variations, Subscriptions, and Customer Fields
Configure product options, recurring terms, quantity behavior, and reusable customer data across checkout and account workflows.
Read the complete transcript
- Choose the Product Model
Open the product editor and choose the type that matches the offer: simple, service, digital, booking, variable, or subscription. Add variants only when an option needs its own price, stock, SKU, image, fulfillment, tax, or availability instead of hiding those differences in description text.
- Set Quantity and Recurring Rules
Decide whether the customer may change quantity, whether one configured package must stay one unit per cart line, and whether the entire order is limited to one. For subscriptions, state the interval, trial, setup amount, renewal behavior, and cancellation path before testing payment.
- Define Customer Fields Once
Use Customer Fields for information needed across checkout, accounts, orders, support, exports, and privacy tools. Choose the correct field type, placement, requirement, validation, conditional logic, and visibility. Never collect sensitive information merely because a text field makes it possible.
- Test Different Product Paths
Run simple, variable, subscription, and fixed-quantity examples through catalog, cart, checkout, payment, confirmation, customer account, inventory, email, refund, and renewal states. Confirm customer fields persist only where intended and a fixed one-per-line item never exposes a quantity control.
Lesson 12
Commerce Products, Quantity, and Checkout
Create a native product, configure purchase and quantity rules, and verify the checkout and order path.
Read the complete transcript
- Open Native Products
Open Commerce, then Products. Native Catalog mode lets you create simple, service, digital, booking, variable, and subscription products without adding a separate store plugin.
- Describe the Product
Set the name, SKU, status, price, stock, description, image, tax behavior, fulfillment, and customer requirements. Use variants when options need their own price, stock, image, or SKU.
- Set Quantity Rules
Turn off customer quantity when a configured package must stay one unit per cart line. Customers can still add another separately. Use the order-limit option only when the whole order may contain one.
- Test the Full Order
Run a test from product display through cart, payment routing, confirmation, inventory, customer record, and order status. Verify both normal quantity products and fixed one-per-line products.
Commerce build order
Product and customer data come before checkout styling.
Every option shown to a buyer must resolve to a valid product, variation, price, subscription term, inventory state, and payment route on the server.
Empty and long data
Test missing values, long labels, many variations, and large customer histories.
Security
Never place processor keys, private customer data, or webhook secrets in page content.
Scale
Test import, search, filtering, pagination, cache behavior, and admin editing with realistic catalog volume.
Guided walkthrough
Make one verified change at a time.
Each step includes the action, why it belongs in this order, and the checkpoint to verify before moving forward.
-
Define product types
Separate simple, variable, digital, service, subscription, and imported products.
Why nowStarting from a confirmed target prevents a correct edit from being applied to the wrong page, template, product, or responsive view.
Done whenThe define product types result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Build variation attributes
Use consistent attribute names, values, SKUs, prices, images, stock, and availability.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe build variation attributes result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Create customer field groups
Add account, delivery, qualification, consent, and business fields with conditions and authoritative server validation.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe create customer field groups result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Bind dynamic output
Use product and customer fields in templates without exposing private values or secrets.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe bind dynamic output result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Configure payment routes
Map products, subscriptions, regions, and fallback processors, then use test credentials.
Why nowCompleting and checking this step creates a known-good checkpoint before the next control changes the page state again.
Done whenThe configure payment routes result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
-
Test the lifecycle
Verify cart, checkout, failure recovery, order, receipt, subscription, webhook, refund, customer account, and support paths.
Why nowThe final verification separates an editor preview from a result that is actually saved, responsive, interactive, and ready for visitors.
Done whenThe test the lifecycle result is visible, remains after reselecting the item, and has not changed unrelated content or styling.
How to know it worked
Verify the edit in Studio and on the real page.
A successful edit stays visible when the element is reselected, matches the intended responsive view, survives publish, and appears on the public URL without clipping or lost styling.
Studio preview
Reselect the element and confirm the saved value and visual result are still present.
Responsive preview
Check desktop, tablet, 390px, and 360px widths for overflow, squeezed controls, and inherited values.
Public page
Open the public route in a new tab after publishing and confirm content, interactions, assets, and spacing.
Recovery
If the result is wrong, stop editing and use History or a known-good revision instead of rebuilding the page.
Avoid the expensive mistakes
Stop when the page stops behaving predictably.
More edits do not repair a bad state. Preserve the evidence, return to a known revision, and reproduce the smallest failing action.
Changing several controls at once
Change one content, design, or responsive value, then confirm it in the preview. A small edit is easier to understand and recover.
Editing the wrong layer
Use Navigator and read the inspector heading. Deleting a parent section can remove every child even when the selected text or image looked harmless.
Checking only desktop
Review tablet, 390px, and 360px before publish. Width, gap, padding, type, alignment, controls, and menus can inherit differently.
Publishing before values persist
Reselect the element and reopen the responsive view. If the value disappears or another tab has a newer revision, reconcile it before publishing.
Continue learning
Use the next guide that matches the work in front of you.
The full tutorial hub remains available without repeating dozens of unrelated cards on this page.
Start here
Install and setup
Download the ZIP, activate Builder Suite, understand the blank-theme path, and run the first clean check.
First page
Build a page safely
Open Builder Pages, launch Studio, build structure first, check mobile, then publish or hand it to Help4.
Editor controls
Know which tab changes what
Use Content for information, Design for appearance and responsive values, and Advanced for identity, attributes, visibility, and motion.
Recovery
Edit without losing work
Replace media safely, recognize stale drafts, and restore a known-good page snapshot from Page Settings History.
Responsive
Control every viewport
Set spacing, widths, columns, alignment, and typography independently for desktop, tablet, and mobile.
Templates
Choose a starter
Pick a starter spec by page job: service, product, support, recent work, local SEO, launch, or checkout recovery.
Need help with this step?
Send Help4 the page, screenshot, or site goal.
Include the URL, what you are trying to build, what looks wrong, and whether this is a draft, staging site, or live customer page.