Learn how to create and customize components using templates, including banners, CTAs, and product pricing comparisons, with the Custom Template Editor.

1. Navigate to Delivery > Component Library > Add Component > Account Management > Components > Component Templates.
2. Select the template you want to use. These templates provide flexibility to match different content presentation needs, whether for banners, CTAs, or product pricing comparisons.
3. In the Select a Component Template window, select one of the following options:
   1. Slim Text Banner – A minimalist banner with a single line of text, ideal for brief notifications or announcements.
   2. Centered CTA Banner – A centered banner featuring text, a Call to Action (CTA) button, and an optional link, making it suitable for driving user engagement.
   3. Combo Banner (Centered) – A combination of a Slim Text Banner and a Centered CTA Banner , allowing for both a brief message and a visually engaging section with an image, CTA, and link.
   4. 3-Column CTA Banner – A structured banner with three sections:
      • Left: A CTA button and link
      • Middle: Informational text
      • Right: An image This layout is effective for presenting a balanced mix of visuals and actionable content.
   5. Combo Banner (3-Column) – A hybrid banner that includes a Slim Text Banner at the top, followed by a 3-Column CTA Banner , combining concise messaging with a structured, content-rich section.
   6. Popup CTA Banner – A popup that contains a CTA banner , ensuring high visibility and user engagement when prompting an action.
   7. Product & Pricing Templates - These templates are optimized for paywalls and subscription-based models , helping users compare products and pricing plans effectively.
      • Product & Pricing 1 – Ideal for showcasing multiple products in a paywall format, allowing users to compare product features side by side.
      • Product & Pricing 2 – Similar to Product & Pricing 1 , but includes an optional toggle feature , enabling users to switch between different product groups, for example, annual vs. monthly pricing.
      • Product & Pricing 3 – Designed for a single product with multiple payment plans , enabling users to compare different pricing options, for example, monthly vs. yearly subscriptions at a glance.
4. Edit the template just like a custom component. A preview window is available for real-time visualization. However, when switching tab groups and modifying a variable, the preview refreshes automatically, this is a known issue that will be improved in future updates.
5. Once saved, your customized component will be accessible from the Component Library and ready to be used in feature outcomes.