Skip to main content

Fit Guide Component

This guide walks content editors through creating a tabbed Fit Guide in the CMS using the Fit Guide components: Pills, Pill, Multi Media, and Video.

Overview​

The Fit Guide components allow editors to present information in a tabbed interface, making content easier to navigate.

Component hierarchy:

  • Fit Guide – Pills → Parent container for tabs
  • Fit Guide – Pill → Individual tab button
  • Fit Guide – Multi Media → Content displayed per tab
  • Video → Video within a tab section

Fit Guide – Pills​

Steps to Add​

  1. Go to Add Components → Custom → Fit Guide Tab Pills.
  2. Add it to the page.

Screenshot: Add Fit Guide Tab Pills component

Description​

The Fit Guide – Pills component acts as a container for all Pill and Multi Media components.

Fit Guide – Pill​

Steps to Add​

  1. Inside the Fit Guide – Pills container, add Fit Guide Tab Pill.

Screenshot: Add Fit Guide Tab Pill component

Settings​

SettingDescription
PillTextText for the tab button.
TargetID of the tab content to show. Must match the mainId of the related Multi Media component.
IsActiveYes / No — sets tab active by default.

Fit Guide – Multi Media​

Steps to Add​

  1. Drag and Drop Fit Guide Multi Media below the Fit Guide – Pills container.

Screenshot: Add Fit Guide Multi Media component

Settings​

SettingDescription
MainIdMust match the target of the corresponding Pill.
MeadingHeading for this tab content.
TextMain body text.
CtaTextCall-to-action button text.
CtaLinkURL for the CTA button.
IsActiveYes / No — sets tab active by default.
TabOneImageImage for the first tab control.
TabTwoImageImage for the second tab control.
TabThreeImageImage for the third tab control.
TabOneTextLabel for the first tab control image.
TabTwoTextLabel for the second tab control image.
TabThreeTextLabel for the third tab control image.
ModelOneTextModel text for the first tab.
ModelTwoTextModel text for the second tab.
MmodelThreeTextModel text for the third tab.

Video​

Steps to Add​

  1. Drag a Video component into the Fit Guide Multi Media drop zone.

Screenshot: Add Video

Settings​

SettingDescription
PosterImage displayed before video plays.
VideoMobileMobile version of the video.
VideoDesktopDesktop version of the video.

💡 Tips & Best Practices​

  • Match Pill target = Multi Media mainId
  • Only one tab should have isActive = Yes
  • Use short, descriptive tab names for clarity
  • Save component after making changes
  • Test all links, CTA buttons, and videos before publishing

🧭 Component Structure Example​

Screenshot: Tabs Pills Component Structure

Screenshot: Multi Media Component Structure

Last updated on