Introduction
VL ViewPlans 01 is a Template Builder module that powers a plan card experience on your website and connected apps. Customers browse subscription (and, where applicable, buy/rent) options, select a plan, and continue into sign-in or purchase.
On the website, this module typically lives on a page at /viewplans. Plans appear as selectable cards with features and pricing. After the customer selects a plan and continues, signed-in customers move to the next purchase step for your site (often checkout), and signed-out customers are sent to sign in first.
This article explains how to create a View Plans page in Template Builder, configure VL ViewPlans 01, publish it, and verify the experience on the web.
Purpose
The purpose of this article is to help you:
- Create a View Plans page in Template Builder
- Add and configure the VL ViewPlans 01 module
- Brand and localize plan cards, skip/continue copy, and legal links
- Understand what customers see on the website when choosing a plan
- Publish and verify the live View Plans page
Scope
This article covers:
- Creating a page for plan selection in Template Builder
- Adding VL ViewPlans 01 to the page layout
- Module settings: Images, display toggles, permalinks, Brand, Font Settings, Localization (Labels)
- How the plan cards page appears on the website
- An overview of the plan-selection flow on web (flowchart)
It does not cover:
- Creating or pricing subscription plans in AppCMS
- VL ViewPlans 02 (comparison-table layout — documented separately)
- VL Checkout 01 or VL Subscription 01 payment steps in detail
- VL Plan Banner 01 or other entry CTAs that link to View Plans
Prerequisites
Before you begin, ensure you have:
- Access to Template Builder for your site
- SVOD (subscription) enabled for the site if customers should see subscription plans on web
- At least one active subscription plan configured for the site
- Sign-in and purchase pages ready (typically Authentication and Checkout and/or Subscription, depending on your site flow)
- Brand colors and copy ready: select-plan heading, continue/skip labels, Terms Apply, no-plans messages
Example used in this article
Throughout the steps below we use a page named View Plans at path/viewplans. Replace the sample values with your own.
Plan selection flow overview (website)
The flowchart below shows the typical customer journey on the website when VL ViewPlans 01 is published on your View Plans page.
(3).png)
Notes
- On the website, the plan card Continue label commonly comes from your site’s generic Continue / offer message (defaulting to Continue when not customized), not from the ViewPlans 02-style Subscribe label.
- Continue Without Subscription on the main plans screen appears only when that toggle is enabled in module settings.
- VL ViewPlans 01 is a decorative Template Builder module. For a dedicated View Plans page, use a Modular Page (recommended). The module can also be added on other page types that allow decorative modules (for example Marketing Page or Ancillary Page). It is not available on System Screens or User Pages.
- Sites typically use either VL ViewPlans 01 or VL ViewPlans 02 on
/viewplans, not both.
Step 1: Open Template Builder
- Log into ViewLift Tools.
- Open AppCMS → Edit Template Builder (or open Template Builder for your site from your usual entry point).
- Confirm you are on the correct site and language (if localization is enabled, use the language selector on the Template Builder home screen before editing page copy).
.png)
Figure 1. Template Builder home. From here you create pages and open Modular Pages.
Step 2: Create the View Plans page
VL ViewPlans 01 is a decorative module. For a dedicated View Plans page, create a Modular Page (recommended). You can also place this module on other page types that allow decorative modules (for example Marketing Page or Ancillary Page). It does not appear in the module picker on System Screens or User Pages.
- In Template Builder, go to Pages.
- Select + ADD NEW (or Create a New Page).
- Enter New Page Name:
View Plans(or your preferred name). - In New Page Type * Developers Only, select Modular Page (recommended for a dedicated
/viewplanspage). - Optionally set Target Language (If localized Page) if you are creating a language-specific page.
- Select CREATE.
.png)
.png)
Figure 2. Create a New Page. Set New Page Name to View Plans, set New Page Type * Developers Only to Modular Page (recommended), then select CREATE.
Set the page path
- On Page Settings, set the page path to
/viewplans(recommended) unless your site already uses a different view-plans path. - Confirm the page type allows decorative modules (Modular Page recommended).
- Save page settings if prompted.
Figure 3. Page Settings. Set the path to /viewplans so Subscribe, billing, and masthead links that use this path resolve correctly.
Step 3: Add VL ViewPlans 01 to the layout
- Open the View Plans page.
- Select Edit Layout.
- Select Add a New Module.
- Search for or select VL ViewPlans 01.
- Insert the module into the page layout.
Figure 4. Edit Layout → Add a New Module. Search for VL ViewPlans 01.
Figure 5. View Plans page layout with VL ViewPlans 01 placed on the page (Modular Page example).
Step 4: Configure Images, toggles, and permalinks
Open the VL ViewPlans 01 module settings.
Images
Under Images, add optional image entries used on supported plan experiences:
| Field | Description |
|---|---|
| Title | Image title / headline |
| Sub Title | Supporting headline |
| Description | Longer supporting copy |
| Image URL | Desktop / default image URL |
| Image URL (Mobile) | Mobile image URL |
| Image URL (Tablet) | Tablet image URL |
Figure 6. Module settings → Images. Add Title, Sub Title, Description, and image URLs as needed.
Display toggles and permalinks
| Setting | Description |
|---|---|
| Continue Without Subscription | When enabled on the website, shows “Select a plan or Continue without a subscription” on the plans screen. |
| Disable Out of Region Payment | Template Builder toggle related to out-of-region payment handling on supported experiences. |
| Privacy Policy Permalink | Path for Privacy Policy on supported flows |
| Terms and Conditions Permalink | Path for Terms and Conditions |
| Terms Apply Permalink | Path for Terms Apply links |
| Number of plans to be displayed | Number input for how many plans are shown in supported layouts (default example: 2) |
Figure 7. Continue Without Subscription, Disable Out of Region Payment, permalinks, and number of plans.
Step 5: Configure Brand and Font Settings
Brand
| Setting | Description | Default (example) |
|---|---|---|
| Module Background Color | Page / module background | #0D2148 |
| Planbox Background Color | Plan card background | #D2393B |
| CTA Background Color | Selected plan Continue button background | #2B426E |
| Primary Card Background Color | Primary card background | #0D2148 |
| Secondary Card Background Color | Secondary card background | #0D2148 |
| Discount Badge Color | Discount badge background | #0032ae |
| Plan Title Text Color | Plan title text | #ffffff |
| Discount Badge Text Color | Discount badge text | #000000 |
| Price Text Color | Price text | #ffffff |
| Feature Text Color | Feature list text | #ffffff |
| Disabled Feature Text Color | Inactive / unavailable feature text | #b2b2b2 |
Figure 8. Module settings → Brand. Set module, plan box, CTA, badge, and feature colors.
Font Settings
Font Settings customize typography for plan popup / plan UI elements:
| Font setting | Caption in Template Builder |
|---|---|
| Popup Heading | Popup Heading |
| Popup Cta Title | Popup Cta Title |
| Popup Cta Subtitle | Popup Cta Subtitle |
| Popup Price | Popup Price |
| Popup Detail | Popup Detail |
Figure 9. Font Settings for plan popup heading, CTA title/subtitle, price, and detail.
Step 6: Configure Localization — Labels
Expand Localization → Labels to edit customer-facing copy. Strings can be localized per language when site localization is enabled.
Core plan selection (website)
| Label | What it controls | Default example |
|---|---|---|
| Select Plan Label | Heading / select-plan messaging | Select A Plan |
| Plan Renewal Label - Monthly / Yearly | Renewal unit wording | month / year |
| Skip CTA / Back CTA | Skip and back labels in the flow wrapper | Skip / (Back CTA) |
| kProcessPayment | Processing state text | Processing... |
| Terms Apply Text | Terms Apply link text | Terms Apply |
| Select Plan to Continue Label Text | Prefix for continue-without-plan line | Select a plan or |
| Continue Without Plan CTA Label Text | Continue-without-plan link text | Continue without a subscription |
| Continue Without Plan CTA Permalink/Path | Optional destination when continuing without a plan | (empty by default) |
| Subscription Tab Title / Buy Rent Tab Title | Tabs when buy/rent and subscription options both apply | Subscription Plans / Buy or Rent |
| Buy Text / Rent Text / Buy Sub-Text / Rent Sub Text / One Time Purchase Text | TVOD-related labels | Buy / Rent / … |
No plans / location
| Label | Default example |
|---|---|
| No Plans Heading / No Plans Body | No Plans / No plans are available at the moment |
| No Plan Area Text / No Plan Country Text | Area / country unavailable messaging |
| No Plan Area Description Text | Longer out-of-territory explanation |
| Zip Code Text | Zip Code: |
| Verify Later Text | Continue and verify later |
| Without Subscription Text | Continue without a subscription (no-plans screen) |
| FAQ Text | For more information, visit our FAQs |
Upgrade, restore, legal, OTT / apps
| Label group | Examples of what you can edit |
|---|---|
| Upgrade | Upgrade Subscription Popup Title, Upgrade Description Text, Success Text, Upgrade Success / Failed messages |
| Purchase / restore | Already Purchased / Subscribed messages, Restore Success, Purchase Failed, More Details Label Text |
| iTunes metadata | iTunes Subscription Metadata 1–7 |
| OTT legal | Legal Agreement Title / Description / Zip / Subscription Terms URLs |
| QR / visit website | Scan QR Title, QR suggestions, Visit Website Text, Purchase Option Text, Generate QR paths |
| Continue / Go Back | Continue Cta Text, Go Back Cta Text |
| Terms Apply variants | Terms Apply Label / Delimiter Label / Single Terms Apply Label; Delimiters Links |
Figure 10. Localization → Labels. Edit select-plan, skip, no-plans, tabs, upgrade, and platform-specific strings.
Step 7: Save and publish the View Plans page
- Save the module settings.
- Review the page layout once more.
- Publish the View Plans page.
Until the page is published, apps and web will not show your latest View Plans configuration.
Figure 11. Publish the View Plans page after you finish module configuration.
Changes can take several minutes to appear because of caching. To verify sooner, use a private window, another browser, or clear cookies and cache.
Step 8: How it looks on the website
After publish, open your site’s View Plans URL, for example:
https://www.example.com/viewplans
Typical website layout
Customers typically see:
- Plan cards — title, price (with strike-through when provided), features, optional discount badge
- Optional Subscription Plans / Buy or Rent tabs when both types of options apply
- A Continue button on the selected card (site generic Continue/offer message, or Continue)
- Optional Select a plan or Continue without a subscription line when Continue Without Subscription is enabled
- Flow Skip / Back controls when the page is shown inside the onboarding flow wrapper
When no plans are available
If no plans are returned, customers see:
- No Plans heading and body
- Continue without a subscription
- FAQ link text that opens
/faq
Figure 12. No-plans state with continue-without-subscription and FAQ link.
After the customer continues with a plan
| Situation | Where the customer goes |
|---|---|
| Not signed in | Authentication page (/authentication) |
| Signed in — standard purchase path | Next purchase step for your site (often checkout, per site onboarding configuration) |
| Upgrade flow and upgrade is available | Upgrade subscription prompt |
| Upgrade flow and upgrade is not available on this path | Subscription page (/subscription) |
| Continue without a subscription (toggle on) | Permalink from module settings if set; otherwise next onboarding step |
| SVOD not enabled for the site | Homepage (/) |
| VIP customer | Homepage (/) |
Link View Plans from the site
- Confirm your View Plans page path (for example
/viewplans) and that the page is published. - Point View Plans / Subscribe links in navigation, masthead, and billing upgrade CTAs to that path.
- Verify signed-out and signed-in paths: Continue → Authentication vs next purchase step.
Tip: Use one View Plans path across the site. If you also use VL ViewPlans 02, do not place both on the same published
/viewplanspage.
Verification checklist
- View Plans page exists (recommended: Modular Page; Marketing/Ancillary also allow this module)
- Page path is
/viewplans(or the path your apps and CTAs expect) - VL ViewPlans 01 is on the layout (not both 01 and 02 on the same page)
- SVOD is enabled if subscription plans should load on web
- Continue Without Subscription set as intended
- Brand colors and Font Settings match your site
- Labels reviewed for launch language(s)
- Privacy / Terms / Terms Apply permalinks point to published pages
- Authentication and Checkout (and/or Subscription) pages are published
- Page is published
- Website
/viewplansshows plan cards - Signed-out Continue goes to Authentication; signed-in Continue goes to the next purchase step
Troubleshooting
| Problem | What to check |
|---|---|
| VL ViewPlans 01 is not in the module list | Use a page type that allows decorative modules (Modular Page recommended; Marketing Page or Ancillary Page also work). The module is not available on System Screens or User Pages. |
| Customer sent to homepage immediately | SVOD may be off for the site, or the customer may be treated as VIP. |
| No plans shown | Confirm subscription plans are active in AppCMS and available for the customer’s region. |
| Continue Without Subscription line missing | Enable Continue Without Subscription in module settings and publish. |
| Signed-out customer does not reach checkout | Expected: they go to Authentication first, then continue the purchase flow. |
| Labels do not change on the site | Save module settings, publish the page, and allow cache to clear. |
| Changes not visible | Confirm publish, then clear cache or use a private window. |
Best Practices
- Use one dedicated View Plans page (typically a Modular Page) at a stable path (
/viewplans). - Choose ViewPlans 01 or 02 — card layout vs comparison table — and stick to one on that path.
- Enable Continue Without Subscription only if free skip is intended for your product.
- Match brand colors to checkout and the rest of the site.
- Keep legal permalinks current.
- Localize Labels when the site has multiple live languages.
- Test signed-out and signed-in Continue paths before launch.
- Publish after every meaningful change.
FAQs
Q. What page type should I use for VL ViewPlans 01?
Modular Page is recommended for a dedicated View Plans page. You can also add the module on other page types that allow decorative modules (for example Marketing Page or Ancillary Page). It is not available on System Screens or User Pages.
Q. What is the recommended page path?
/viewplans.
Q. How is this different from VL ViewPlans 02?
VL ViewPlans 01 uses selectable plan cards. VL ViewPlans 02 uses a comparison table on desktop (and a mobile plan list). This article covers VL ViewPlans 01 only.
Q. Where does Continue send the customer?
Signed-out customers go to Authentication. Signed-in customers go to the next purchase step configured for your site (often checkout). Upgrade flows may show an upgrade prompt or go to /subscription.
Q. Does Continue Without Subscription work on the website?
Yes, when Continue Without Subscription is enabled in this module’s settings.
Q. Does this module process payment?
No. Payment is handled on checkout or the subscription payment page, depending on your site flow.
Important Information
- VL ViewPlans 01 is a decorative module. Modular Page is recommended for a dedicated
/viewplanspage; Marketing Page and Ancillary Page also allow it. It is not available on System Screens or User Pages. - Create the page, add the module, configure Images / Labels / Brand / Fonts, then publish.
- Website requires SVOD for the standard subscription plans experience; otherwise customers may be redirected home.
- Signed-out plan Continue goes to Authentication first (unlike ViewPlans 02’s typical Subscribe → checkout path).
Glossary
| Term | Definition |
|---|---|
| Modular Page | Recommended Template Builder page type for a dedicated View Plans page. Decorative modules like ViewPlans can also be used on other page types that allow common (decorative/content) modules. |
| VL ViewPlans 01 | The Template Builder module documented in this article (plan card layout). |
| Plan card | Selectable plan box showing title, price, features, and Continue. |
| Continue Without Subscription | Module toggle that shows a skip-purchase option on the website plans screen. |
| SVOD | Subscription video on demand — required for the standard web subscription plans load on this module. |
Contact Support
If you need help beyond this article, contact the ViewLift support team.
- Email: techsupport@viewlift.com
- Phone (US): +1-800-859-0420
- Phone (UK): +44-203-014-8921
Support hours: B2C requests are handled Monday to Friday. B2B support is available 24/7.