Configuring Options in Cart and Portal

• Time — 20 minutes
• Difficulty — Intermediate

• An active Upmind account with Cart 2.0 enabled.
• Access to Settings > Brand Settings in your Upmind admin panel.
• A read-through of Configuring Your Store with UI Metadata to understand how context and data settings work.
• A read-through of Setting Up Theming with CSS Variables to understand how design tokens are applied.
• Basic familiarity with JSON and CSS syntax.

​

What is configurable in the Cart

1. Layout and structure
2. Content and copy
3. Visual styling and branding
4. Feature visibility and behavior

​

1. Layout and structure

​

Templates

@context.{page}.template

{
	"@context.*.template": = "two-column-ltr"
}

{
	"@context.checkout.template": = "full"
}

• @context.*.template = two-column-ltr > all pages default to this
• @context.auth.template = canvas-card > login/register pages override to this

{
	"@context.*.template": = "two-column-ltr",
	"@context.auth.template": = "canvas-card"
}

• Login & Registration (auth)

{
  "@context.auth.template": "split"
}

• Product Configuration (configure)

{
  "@context.configure.template": "full"
}

• Basket (basket)

{
  "@context.basket.template": "two-column-rtl"
}

• Checkout (checkout)

{
  "@context.checkout.template": "enclosed"
}

• Billing Details (billing_details)

{
  "@context.billing_details.template": "full"
}

• Order Confirmation (confirmation)

{
  "@context.confirmation.template": "full"
}

​

Other layout and structure settings

• Product listing layout (grid, list, column count by viewport). The product catalogue list appears with a 2-column layout. The default is a 3-column layout.

{
  "@context.catalogue.productListLayout": "2-col"
}

• Visibility of sections such as categories, recommendations, or breadcrumbs. Breadcrumbs can be hidden globally. It is visible by default.

{
   "@context.*.breadcrumbs": "hidden"
}

• Placement of summaries, totals, and action buttons. Even when product options are selected, these will not show in your configuration summary. The default is visible.

{
   "@context.*.productConfigOptionsSummary": "hidden"
}

• Step ordering and visibility within the checkout flow. Basket items can be visible in the checkout. The default is hidden.

{
   "@context.checkout.basketItems": "visible"
}

• Control how product options are displayed and selected by the customer. Renders the option selector in particular layouts. The default is radio-rows.

{
	"@context.configure.optionSelector": "select"
}

• Set the number of columns in the option selector when using the radio-grid layout. Displays option cards in a column grid, adjustable from 1 to 4 columns to suit your product listing layout. The default is 2-col.

{
	"@context.configure.optionSelectorGrid": "3-col"
}

• Toggle the visibility of icons displayed alongside each selectable option. Option icons are visible by default. You can hide them to display option labels only.

{
	"@context.configure.optionSelectorIcons": "hidden"
}

• Assign a display name to a group of options when using the select-grouped selector layout. Shows a labeled group heading within the grouped dropdown, making it easier for customers to scan and identify related options.

{
	"@data.optionGroupLabel":
}

• Assign an icon to an option group, displayed next to the group label in a select-grouped layout. Shows a visual icon beside the group label to help customers quickly identify and differentiate option categories.

{
	"@data.optionGroupIcon": "rocket"
}

• Control how billing term options (e.g., monthly, yearly) are presented to the customer. Renders billing terms structure accordingly. The default is radio-grid.

{
	"@context.configure.termSelector": "select"
}

• Set the number of columns in the term selector when using the radio-grid layout. Display billing term cards in various columns. The default is 2-col.

{
	"@context.configure.termSelectorGrid": "3-col"
}

• Toggle the visibility of the billing summary shown beneath the selected term. Show a cost summary line (e.g., “Pay $12.00 today, then$X.XX/mo”). The default is visible.

{
	"@context.configure.termSelectorSummary": "hidden"
}

​

2. Content and copy

• Headings and subheadings. You can change the color of headings in your cart.

{
   --text-display: #d72929;
}

• Button labels and call-to-action text. Color can be changed on the text on the primary buttons.

{
   --text-button-primary: #ff6363;
}

• Empty-state messages. Color can be changed on the text when the basket is empty.

{
   --color-core-display: #ed1111;
}

• Informational banners and notices.
• Legal text references. You can create your store’s terms and conditions. For more information, follow this guide.

{
   --color-core-base: #ed1111;
}

• Assign a custom image URL to a specific product option, displayed within the option selector. Show the specified image alongside the option label, giving customers a visual reference for each selectable product option.

{
	"@data.optionImgUrl":
}

​

3. Visual styling and branding

• Brand colors and accents.

{
  --color-core-canvas: #a0c3ff;
}

• Typography scale and font families. You can change the font weight for display texts. Increase for bolder headings.

{
  --font-display-weight: 1000;
}

• Spacing and border radius.
• Button styles and variant colour values. You can change the primary button backgrounds, main CTAs, and key accent elements. Gradients can also be updated.

{
	--color-primary-default: #d60e0e;
}

• Badges and highlight styles. Bold promotional background for discount badges.

{
	--color-promo-default: #43d106;
}

​

4. Feature visibility and behavior

• Showing or hiding product images. Product images in recommendations can be hidden from the customer’s view. The default is visible.

{
   "@context.recommendations.productImages": "hidden"
}

• Displaying or suppressing recommendations. Change the product style to flush and carded.

{
   "@context.recommendations.productStyle": "carded"
}

• Controlling zero-price display behavior.

{
  "@context.*.zeroPriceDisplay": "numeric"
}

​

What is configurable in the Client Portal

​

1. Branding and layout

• Header and navigation structure.
• Brand identity and color system.
• Page-level layout and spacing.
• Consistent typography across account views.

​

2. Features

1. Billing history and invoices

• Invoice listings with filtering and search.
• Invoice downloads (PDF or hosted views).
• Payment status indicators (paid, overdue, refunded).
• Credit notes and adjustments.
• Transaction history.

2. Subscription controls

• Changing billing cycles.
• Applying promotional codes.
• Enabling or disabling auto-renew.
• Managing upgrades and plan changes.
• Viewing next billing dates and renewal pricing.

3. Payment method management

• Adding new payment methods.
• Updating card details.
• Removing saved methods.
• Selecting a default payment method.
• Viewing stored payment methods for active subscriptions.

4. Profile and security settings

• Update contact information.
• Manage company details.
• Configure tax or VAT information. (For the tax guide, find more information here).
• Change passwords. (For the security guide, find more information here).
• Manage authentication settings (including SSO, where enabled).

​

3. Messaging and guidance