Skip to content
RadiantSize Chart
ContactCompare plans
Documentation
Core guides

Radiant guide

Customize the storefront widget

Configure language, launcher, colors, typography, branding, panel behavior, and Smart Selector visuals.
On this page

Customization controls how Radiant belongs in the storefront. It changes the presentation, not the chart measurements or catalog assignments.

The customization areas#

The editor is organized into seven categories:

  1. Language
  2. Launcher
  3. Colors
  4. Typography
  5. Branding
  6. Panel
  7. Smart selector

Use the Desktop and Mobile preview modes while editing. The preview is a visual check; final acceptance still belongs on a real eligible product in the theme.

Language#

Choose Automatic (Shopify storefront language) to follow a supported active storefront locale. You can also select English, Spanish, or Portuguese (Brazil) directly. Unsupported storefront languages fall back to English.

Chart titles, custom labels, instructions, links, and other content written by the merchant are not translated automatically. Provide localized content where the catalog requires it.

Launcher#

Select the launcher treatment that works with the chosen theme placement. Review its label, position, visibility, and touch target on mobile. A launcher should be easy to find without covering product controls.

When both the app embed and product page block are active, test whether two entry points are useful. Remove duplication if it creates confusion.

Colors and appearance#

Radiant supports Light, Dark, and System behavior along with configurable surface, text, accent, border, overlay, radius, and shadow treatments. Maintain enough contrast for text, focus indicators, and interactive states.

Test:

  • default, hover, focus, selected, and disabled states;
  • light and dark theme contexts;
  • the recommendation result and full table;
  • small mobile screens;
  • high-contrast product imagery behind a floating launcher.

Typography#

Choose typography that remains readable inside the sizing flow. The widget should complement the theme without inheriting a display face that makes data or controls hard to scan.

Pay particular attention to table values, helper text, input labels, and the recommended size. These elements need clear hierarchy at small sizes.

Branding#

Branding controls can include the merchant logo and Radiant attribution behavior, depending on the active plan. Images uploaded through the app are created in the merchant’s Shopify Files library, and the resulting file is used by the configuration.

Use a transparent asset with enough clear space. Test it in both light and dark contexts and do not rely on a white rectangle to create contrast.

Panel#

Choose popup or drawer presentation according to the theme and shopper journey. You can control which view appears first, such as the recommendation summary or the size table, when the available settings allow it.

Test the panel with:

  • keyboard navigation;
  • mobile viewport height;
  • long chart labels;
  • the unit switch;
  • a completed recommendation;
  • browser back/close expectations.

Smart Selector visuals#

Configure the appearance of Smart Selector and its body-shape images without changing the recommendation logic. Relevant shape questions appear only when the assigned chart contains supported body areas.

The body-shape illustration should help the shopper distinguish options without implying a diagnosis or an exact body scan.

Save, discard, and reset#

Use Save to publish the current customization values. Use Discard changes to return to the last saved state. Reset only the settings you intend to replace, then review Desktop and Mobile again.