Learn how to customize product selection screens by choosing layouts, modifying templates, organizing variables, and saving changes.

1. Choose from the three pre-built Paywall Layouts designed for higher conversions.
2. Modify the template to match your brand's style using HTML, CSS, and JavaScript.
3. Organize variables into page-level settings (which remain consistent) and payment-option settings (specific to each plan).
4. Customize the displayed text on the payment form to meet your requirements.
5. Save your changes once you're happy with the final design.
   In interactive mode, toast notifications will be shown when interacting with specific elements (like buttons) in the form, to confirm the template's functionality.

   

   Unlike traditional Custom Components, few templates also have a JS tab in the Ace Editor, to help you implement interactivity:

   

   You can also organize page-level vs payment-option specific variables. Group page-level variables that remain consistent across the component, and payment-option variables that are specific to each plan.