Appmint Products: catalogue, variants and personalization

Overview

Create reusable product choices and verify the selected values travel from the product page to the order.

01. Create a reusable attribute

Why this matters

Name is the stable identifier; Title is the label shown to shoppers. Choose the input type to match the information being collected.

Follow these steps

1. Open Storefront → Attribute → Add Attribute.
2. In Basic Information, enter Name print-size and Title Print size. Use a unique name if this practice record already exists. Name identifies the reusable definition; Title is what a customer reads.
3. Choose Selection (preset choices). Under Selection Options, set Display widget to Dropdown.
4. Choose Add Option. Enter Label A4 and Value a4; add a second row with Label A3 and Value a3. Leave Param blank for this size example. The pale Small/sm text is a placeholder, not an existing choice.
5. Choose Create Attribute. Search the saved name in the list, reopen it and confirm both options before proceeding.

Historical configuration before Create Attribute: readable labels are paired with stable values. This form defines the choices; it does not set their product prices.

Check the result

Changing an identifier affects references. Prefer a stable name and edit the display title when only wording changes.

02. Preset choices and swatches

Why this matters

Display widget changes presentation; the option value still identifies the saved choice.

Follow these steps

For Selection choose Checkboxes, Dropdown, Radio buttons, Image swatches or Color swatches. Add the option rows with their labels and values. Supply the image or colour parameter appropriate to the chosen swatch. Save and attach the attribute in a product. Set the intended Required/Optional and default choices in the product association, then test each option on the public product.

Attach the saved choice and check the buyer's result

1. Open Storefront → Product, find the intended product and open its editor. Expand Variants and choose Add Attribute.
2. Select print-size. Select both A4 and A3 under Select Options. Choose Required when this product cannot be supplied without a size.
3. In the historical example the product's base price is $25. Leave A4's addition at zero and enter 10 beside A3. That field adds to the base; it is not the complete A3 price.
4. Choose Generate Variants, review the generated SKU for each combination, then Save Changes. Reopen the product to check the association and both variants.
5. Open this product on your configured storefront. Select A3 and add one item to the cart. Check the selected option, variant SKU and item price before proceeding to checkout. Remove the practice cart item when finished if you are not placing a test order.

Historical buyer result: A3 selects cf-print-01-a3 at $35; the cart separately adds $5 shipping for a $40 total. This frame proves a cart selection, not payment or fulfilment.

Check the result

Do not use colour alone to identify the selection. Inspect readable labels and the saved option value. A default choice must also be valid for the generated variant.

03. Numbers, dates, text and file input

Why this matters

Limits and file restrictions should be visible before the buyer submits an order.

Follow these steps

For Number inspect Number input or Slider, Min value, Max value and Min increment. For Date inspect the applicable limits. For Text, the current editor says no extra configuration is needed; test empty and filled values after attaching it to the product. For File upload choose Accepted file types, Allow multiple files, Max files and optional upload note/prompt. Save the attribute and product, then exercise valid and invalid input at the shopper page.

Check the result

Blank maximum files means unlimited in the editor. File acceptance and upload authorization need actual invalid-file and recipient readback checks, not just a saved setting.

04. Shared changes and order evidence

Why this matters

Reusing an attribute saves setup, but edits may change more than one product.

Follow these steps

Open two products using the attribute and note their current choices. Update the shared label or permitted option, save, and revisit both public pages. Add a valid configured item to cart and complete a controlled order. Open Order Management and inspect the selected values, variant identity and uploaded file.

Check the result

Keep an existing order as a historical comparison. Do not claim that editing an attribute retroactively changes or preserves every old order without inspecting the saved order payload.

Detailed instructions

The following retained material documents earlier local work. Its pending checks remain pending; historical successful outcomes are not claims of a fresh execution. Use the source-authored instructions above to prepare the new recording, and preserve these references for comparison.

E06: Give customers a real choice

Worked example

Our print comes in A4 and A3. Open Attribute and Add Attribute. Name the choice print-size and title it Print size. Use Selection, because the customer chooses from sizes we offer, and choose Dropdown as the display widget. Choose Add Option. The new row shows Small and sm as placeholders; enter the label A4 and the value a4. Add a second option and replace its label with A3 and its value with a3. Leave Param empty for this example. Create Attribute and reload: there are two options. This defines the reusable choices. Their prices belong to each product, which is where we’ll make A3 cost more.

The definition screenshot appears beside the numbered creation steps above.

Included controls: Attribute Name, Title, selection type, Dropdown, option label/value, Param, create/reload.

Check the result: print-size/selection/two choices stored.

Retained evidence: capture/SF04-brand-attribute.webm.

Implementation reference: attribute-form.tsx.

E07: Price the larger print

Worked example

Reopen Cedar Botanical Print. Under Organization, open Brand and choose cedar-form-course. Now expand Variants and choose Add Attribute. Select print-size and turn on A4 and A3. Leave A4 without an extra amount; put ten beside A3. Generate Variants creates the two size records. Save Changes stores the brand association and the variants together. Reload and reopen to check the brand, both choices and the ten-dollar addition. The generated absolute-price fields are blank in this example. The ten here is an addition to the twenty-five-dollar base, not the whole price of an A3 print. We’ll check that distinction in the customer’s cart.

Included controls: attach attributes, Select Options, additional option price, Generate Variants, variant SKU, absolute price blank, save readback.

Check the result: cf-print-01-a4/a3 and A3 increment10 persist.

Retained evidence: capture/SF05-product-options.webm.

Implementation reference: product-form.tsx.

T11: Collect customer choices and custom artwork

Learner draft — pending demonstration:

Use the input that matches the choice. A preset size is a selection; a number can capture a measured value; a date or text answers a different question. For custom artwork, a file choice needs clear upload notes and accepted file limits. Compare the supported display widgets and validation with the buyer's actual interaction. Make the information required only when the shop needs it to fulfil the order.

Included controls: number/date/text/file types, selection checkbox/radio/image/color, number input/slider, required/default/multiple, limits/increments, file accept/count/size/notes, option metadata.

Limitations and checks: Each actual type and materially different widget/validation branch: required/default/multiple, numeric limits/increments, date/text, file accept/count/size only if exposed. Actual buyer input→saved cart/order; inspect Param/metadata rather than invent meaning.

Check the result: Correctvalues and file validation persisted into order; controls without buyer support logged.

Implementation reference: attribute-form.tsx.

T12: Preview and fulfil personalized work

Learner draft — pending demonstration:

A personalized print needs the shop to receive the same design the customer approved. Configure the product's preview views and artwork zones, show placement and supported rotation or fit, then inspect the saved design and files in the resulting order. A mockup illustrates the idea; the order is the fulfilment evidence. For a download offer, separately check access and actual delivery rather than assuming a URL field protects the file.

Included controls: Design Preview, views, zones, artwork placement, rotation, fit, file/design persistence, digital download delivery.

Limitations and checks: Exact current DesignPreview controls/views/zones→real shopper upload/fit/rotation→cart→order/artwork for staff; digital-download configuration→payment→actual access/delivery/restriction.

Check the result: Customer-approved design/files and actual digital delivery traceable after reload/order.

Implementation reference: product-form.tsx, CheckoutSuccess.tsx.

Limitations and checks

Current UI entry and editor: . Corresponding SDK storefront schemas and the retained AppEngine references define fields and consumer boundaries. Provider calls, external delivery, payments and financial mutations were not performed for this writing task.

Next steps

You can now follow the module from its configuration to the record that proves the result. Use the relevant chapter to revisit an alternative or troubleshoot the exact failed handoff.

**Course written guide draft · Current UI/source reviewed 2 October 2026 **

Cover and feature overview

Why this matters “A brand record keeps a catalogue identity in one place: its internal name, customer-facing title, logo, product list and contact details. We'll create a brand, connect it to a product, check the saved relationship, and then cover updates and removal.”

Visual: Appmint title over a designed product-and-brand composition. Let one saved brand identity sit beside two distinct products; connect their actual Brand fields to that identity. This illustration explains reuse, not an automatic website redesign or automatic synchronization of every product list.

Preparation: Use a training brand name studio_goods, title Studio Goods, a logo you own and one non-sensitive existing product. No purchase or live order is needed for this module.

Reading the examples

The screenshots show the earlier Cedar & Form training catalogue. Your own brand can use a different name; match records by their saved machine name when following the steps. These are inspected historical captures, not a fresh execution of every branch on the current application.

1. Create the brand

Why this matters “Brand Name is the machine name used by product selection. Title is the readable display name. Keep the machine name stable after products reference it. The logo and description are stored with the brand; the website still determines how they are presented.”

Follow these steps Open Storefront → Brand, then Add Brand. In Basic Information, enter Brand Name studio_goods, Title Studio Goods, a short Description and Status Active. Open Logo, choose Choose logo from File Manager, select one real image and inspect the thumbnail. Use Create Brand, wait for completion and show the saved row. Reopen it using its Name.

Follow it in your catalogue

1. Expand Storefront and open Brand. Choose Add Brand above the list.
2. Keep Basic Information open. Enter a unique Brand Name, then the customer-readable Title. Use the description for information about this brand, not a product variant.
3. Choose Active for this example. Expand Logo. Choose an existing image with Choose logo from File Manager, or upload your own with Select from computer. Wait for the selected thumbnail before saving.
4. Choose Create Brand once. When the list returns, search for the same machine name. Open its edit action and confirm the values you entered.

Historical example before creation: cedar-form-course / Cedar & Form. No logo has been chosen in this frame; the empty drop area is not evidence of a saved image.

Historical saved row: the name, title and active badge persisted. Products is still 0, and the logo is a placeholder. Complete those separate steps if your brand needs them.

Result: The reopened record retains the chosen identity, status and logo. A toast alone is not the persistence check.

Gotcha: A blank name produces Brand name is required. Correct that field and save once. The UI hint recommends letters, numbers, dashes and underscores; the source's local validation checks a nonblank name, so do not describe a browser-enforced pattern check that was not observed.

2. Add brand products and set the product's Brand

Why this matters “The brand editor has its own Products list, and the product editor has a Brand field. We should check the field used by the product instead of assuming that updating one side automatically rewrites the other.”

Follow these steps Open the brand's Products section. Use Search and add products…, choose the existing product, inspect its name/SKU and Save Changes. Reopen the brand and confirm the count and selected entry. Then open Storefront → Product, edit that same product, find Brand, choose studio_goods, save and reopen the product. Show its selected brand. The source stores the selected brand name on the product; the brand-side list stores SKU/name pairs.

Result: Both records show the intended relationship. If demonstrating a customer-facing logo or brand filter, inspect the actual configured store page separately. Do not promise a new storefront component merely because the record was saved.

If the product does not appear: first confirm that it was saved in Product Center in the same organization. Search its actual name or SKU. Adding a brand without a product is valid; a zero Products count does not mean brand creation failed. After associating a product, reopen both editors rather than relying on a count alone.

Advanced: Selecting the same SKU/name pair again is ignored by this brand picker. Removing a Products row removes the entry from this brand's list; it does not by itself prove the product's Brand field was cleared. Demonstrate both records when changing an association.

3. Maintain logo, contacts and status

Why this matters “Brand contacts are reference information, while Status describes the record's lifecycle. Neither is proof that a campaign was sent or a product was hidden.”

Follow these steps Reopen the brand. In Logo, replace the image or use the thumbnail's remove control and choose another image. Expand Contacts, choose Add Contact, and fill Name, Phone, Email, Street, City and Zip with controlled example data. Save, reopen and read back the contact. Remove the example contact and save again when no longer needed.

Show Status choices Active, Inactive, Draft and Archived before selecting one for a separate test. Save Changes and inspect the list's status badge. Keep external website visibility as a separate result to verify; do not describe these statuses as automatic publication controls without proof.

4. Find records and handle deletion

Follow these steps Use Search brands… to find the saved record. Sort by Name, Title, Status, Products or Updated as appropriate; show the changed ordering. Use Refresh after a saved change. Explain the displayed total describes the loaded brand list; the current store fetch requests up to 200 records, so it is not proof of an unlimited count.

Use an unused temporary brand for removal. Invoke the table's delete action, read Delete “[name]”? This cannot be undone., cancel once to keep the record, then repeat and confirm only for that disposable brand. Show the record absent after refresh. Preserve referenced brands until dependent products have been reviewed.

Recovery: If saving or deleting fails, show the actual message. Reopen or refresh the same record to establish whether the change persisted before retrying. A missing logo should be checked in File Manager and the saved logo reference, not repaired by recreating the brand.

Next steps

Why this matters “The brand is now a reusable catalogue record with its own identity and assets. When you change an association, check the saved brand and product together. That keeps the catalogue relationship clear without assuming that every storefront view updates in the same way.”

Limitations and checks

Current source read: components/storefront/brand/brand-form.tsx, brand-list.tsx, brand-store.ts, and the Brand selector in components/storefront/product/product-form.tsx, under . The public storefront's rendering of brand assets and reverse relationship synchronization were not verified in this guide pass. Record actual create/save/reopen, both relationship controls, contact lifecycle and disposable deletion before rendering a video. Keep each operation continuous; explain alternatives before their short demonstration rather than freezing the Save sequence.

Overview

Build a product record that customers can understand and actually buy. We will cover its media, choices, stock and delivery connections, then personalization and alternative product types.

BusinessMade entry and scope

Open Storefront → Products at /storefront/products in BusinessMade. This route mounts the shared Products module; the surrounding menus are BusinessMade’s. Use Operations → Contacts for customer details, Operations → Customers & Benefits for group eligibility, Admin → Business locations for branches, and Operations → POS / Order entry for counter sales. Keep the organization and record identity consistent across those screens.

The location selector governs the venue-specific POS, but does not establish that every shared Storefront module filters its data by that selection. Inspect the record’s own location and currency. Payments are under Storefront → Payments, while delivery rules and shipments are under Storefront → Shipping; creating this module’s record is not payment or shipping-provider configuration.

01. Create and reopen the product

Why this matters

A product record ties customer presentation to the SKU your team uses. A saved draft is a useful first checkpoint before making the product available.

Follow these steps

1. Open Storefront → Products. The first screen is Product Center → Dashboard. Select New Product; the Products tab also provides its list entry point.
2. Enter Product Name, for example BM Course Ceramic Mug. Enter a unique SKU, such as BM-COURSE-MUG-1004, and a readable URL Slug, bm-course-ceramic-mug. SKU is your operational identifier; the slug is the product’s URL identifier. The editor can generate these from the name, but check them before saving.
3. Enter a customer-facing description and the base Price. This local example uses 18. Cost per Item is internal information, not a second buyer charge.
4. In the right-side Status selector, explicitly choose Draft. The current form defaults to New, not Draft. Draft is labelled Not visible to customers.
5. Select Create Product. On success the editor changes to Save Changes, and the dashboard gains the new record. Close the editor and reopen the same name/SKU to check persistence. The local replay reopened the exact SKU, slug, price18 and Draft status.

Check the result

Use a unique SKU and slug. Inspect save errors before repeating Create Product. The list and reopened record establish persistence; the public product page establishes customer visibility.

02. Media and catalogue organization

Why this matters

Reusable catalogue references keep products consistent, while the default image controls the first visual impression.

Follow these steps

Open Media, add the intended product images and use Set as default image on the lead image. Inspect image order and remove an incorrect image. Add Brand, Categories and Tags through their selectors. Use extraInfo for titled sections, reorder them with Move up/Move down and save. Open the customer product page through the site and check its gallery, description and brand.

Check the result

A file visible in the picker is not necessarily the default product image. Reopen the product after saving; checking a public product page is a separate visibility test and was not performed for this draft.

Upload and choose the first image

Under Media, use Select from computer, choose the image and wait until Uploading… finishes and the thumbnail appears. The Public setting applies to new uploads; it does not retroactively change old files. Select the thumbnail’s star, whose tooltip is Set as default image. Verify the Default badge, then Save Changes. Uploading adds to the gallery; it does not itself choose the default. The local replay saved and reopened the generated blue mug image successfully.

The mug artwork is generated sample product photography, uploaded through the actual application. It is not a screenshot or evidence of a physical product.

Create a reusable brand without leaving BusinessMade

Open Storefront → Brands → Add Brand. Enter machine Brand Name bm_course_ceramics, customer-facing Title BM Course Ceramics, and Status → Active, then Create Brand. The list should show the saved reference. Return to the product and type into Brand; this selector displays the machine name bm_course_ceramics. Select it and Save Changes. Reopen to verify the reference remains.

The Brands and Attributes entries were added during this walkthrough because the product form required references that could previously only be created outside BusinessMade. They now open the existing shared modules inside the BusinessMade shell.

03. Attributes and variants

Why this matters

An attribute describes a choice; a variant identifies a specific saleable combination. Base price, option increment and variant identity must agree in the buyer cart.

Follow these steps

1. Save the product first. Open Storefront → Attributes → Add Attribute. Enter Name course-mug-size and Title Mug size. Choose Type → Selection (preset choices) and Display widget → Dropdown.
2. Select Add Option twice. Enter labels Regular and Large, with values regular and large. Values are stable identifiers; labels are what customers read. Select Create Attribute. The list should show one saved definition with two options.

3. Return to Storefront → Products, reopen your product and expand Variants. Select Add Attribute, then choose course-mug-size in the native Attribute dropdown.
4. Choose Required for this product. Select the Regular and Large option chips, then Generate Variants. The editor creates two rows with distinct SKUs; this does not yet prove a buyer has selected one.
5. Check each generated row. The local fixture saves bm-course-mug-1004-regular with price 18, and bm-course-mug-1004-large with price 22. Option surcharges are left empty in this example. Do not enter the same intended extra charge in multiple fields without testing the final cart price.
6. Select Save Changes, close and reopen the product, then expand Variants again. Both SKUs and their prices must persist. The local replay independently verified 18 and22 after reopening.

Next, use the operational handoff below to test the actual option and line price. The saved variant configuration alone is not evidence of customer-cart or stock deduction behaviour.

Check the result

Do not infer stock isolation from a visual choice. Compare the saved variant identity and stock effect. Removing a choice can affect existing product references; test the changed choice and an unchanged one.

04. Price, stock and sales restrictions

Why this matters

Product-level rules decide how this item can be sold. Location inventory and customer eligibility add independent checks.

Follow these steps

In Pricing inspect Price, Compare at Price, Charge tax on this product and quantity tiers. Enter Min Qty, Max Qty and either Price/Unit or the intended Discount %. Use Customer Groups where the item is restricted. In Inventory review Stock Quantity, ISBN / Barcode and Track inventory for this product. Review Sale restriction, age restriction, Minimum customer age and Permission the seller needs. Save, reopen, then compare eligible and ineligible customer/quantity cases. For stock, create the corresponding location row in Inventory and inspect that row separately.

Check the result

Sold Count is reporting, not opening stock. A visible switch does not prove downstream age or permission enforcement; verify rejected and accepted buyer cases. Compare the displayed and saved totals.

05. Shipping, bundles and alternative offerings

Why this matters

Physical shipping, digital delivery, bundles and recurring plans have different requirements. Select the model the product actually uses rather than assuming every product ships as one parcel.

Follow these steps

Open Shipping. Enter Weight and dimensions with the intended units; choose Ships As and Shipping Config where needed. Review Packaging, Flat Rate override, Ships From Location, signature, hazmat, fragile and geographic exclusions. For a bundle, open bundle and select component products and quantities, then inspect the buyer basket and component stock after a controlled order. For digital goods use Digital Download URL and test access as the buyer. For recurring goods select Subscription Plan and verify the linked plan is active and provider-ready.

Check the result

A product override can supersede the default delivery rule. A download URL does not establish buyer-only authorization. A subscription plan reference does not create a recurring provider agreement; that lifecycle belongs to the subscription checks.

Read the actual shipping controls

Expand Shipping in the product editor. Choose the weight unit before entering weight; dimensions use the unit shown beside the fields. Decide whether the product inherits its shipping configuration or needs a product override. Free Shipping and Flat Rate are price policies, not proof that a carrier account is connected. Keep the origin consistent with where this item is dispatched. A fragile or signature flag should describe the real handling requirement.

This screenshot verifies the available fields. A carrier rate, purchased label and public checkout outcome have not been exercised in this product rehearsal; those outcomes belong in the Shipping course and must not be claimed from this form alone.

06. Artwork and Design Preview

Why this matters

Personalization is complete only when the selected choices and uploaded file reach the saved order. A preview alone cannot fulfil the purchase.

Follow these steps

Attach the intended text/file attribute, configure its required choice and upload restrictions, and enable live design preview under Design Preview when used. Save and open the real product page. Enter text or upload the permitted artwork, inspect the preview, select the variant and add to cart. Complete a controlled order using a configured payment method. In Order Management open that same order and inspect the option values and attached artwork. Open the file with the intended operator access.

Check the result

Test an invalid or oversized file and a missing required choice before the valid case. Retain the same order identity across buyer and operator views. Do not use another product screenshot as proof of this handoff.

BusinessMade operational handoff — Connect the catalogue to a location’s POS

Why this matters

Products connects to the saved customer, product or transaction. Follow that identity through the BusinessMade operation rather than creating a second record to illustrate a result.

Follow these steps

Open Admin → Business locations and inspect the intended location, currency and tax configuration. Choose that single location in the top bar, then Operations → POS / Order entry. All locations cannot open a venue-specific register. Find the saved product by its name or SKU, select it and complete the options drawer where offered. Inspect chosen options, quantity and the server-calculated line price. If the product is missing, return to Storefront → Products and check its saved status and visibility before making a duplicate. For physical stock, use Storefront → Inventory to inspect the product’s row at this location; global product quantity alone does not establish branch stock. Save the tab and reopen it from Operations → Tabs to check the item identity.

Verify the product in the counter

1. Save the product as Available when it is ready for the local counter. Choose the intended business location, then open Operations → POS / Order entry. Find BM Course Ceramic Mug and open it.
2. The drawer shows the image, readable description and required Mug size choice. Before choosing a required size, Add to order is disabled. Select Large: the preview is $22.00. Select Regular: it is $18.00. These are explicit variant prices; do not add the same price difference twice.

3. Add one item and inspect the saved cart line, including its size. The saved Large line is $22.00 and the Regular line is $18.00, matching the corresponding drawer previews. Both were separately saved in unpaid training tabs; adding the product did not record payment.

4. For tracked items continue with BusinessMade Inventory to create stock at the selling location. Product availability is not evidence of a location stock row.

Recovery and implementation boundary

BusinessMade now provides Storefront → Attributes and Storefront → Brands, added and locally verified during the 4 October walkthrough. Create references there, then select them on the product. These are organisation-wide catalogue definitions; they are not branch inventory rows.

Limitations and checks

• Shared module procedure and source evidence

Substantive pending work: BusinessMade now provides Storefront → Attributes and Storefront → Brands, added and locally verified during the 4 October walkthrough. Create references there, then select them on the product. These are organisation-wide catalogue definitions; they are not branch inventory rows. Runtime evidence for the taught handoff remains separate from authored coverage. Do not mark the course production-ready until the intended branch’s saved result, failure recovery and customer/provider outcome have been checked.

Next steps

You can return directly to the chapter for the change you need. Keep the saved record and its operational result together: the same customer, product, location and transaction should remain identifiable through each handoff.