Wix Help Center
    Home
  1. Managing your business
  2. Business solutions & apps
  3. Wix Pricing Plans
  4. Designing your plans pages
    5. Pricing Plans: Customizing the Mobile View of the Pricing Plans Page

Pricing Plans: Customizing the Mobile View of the Pricing Plans Page

Customize the way Pricing Plans appear on mobile to ensure a great experience for your clients, no matter what device they're using. Choose what information is necessary to display, change the text size and adjust the layout of the Pricing Plans page so it fits smaller screens.
In this article, learn more about:
Important:
The desktop and mobile versions of your site represent different viewing modes of the same site; they are not separate sites. Changes to your desktop site affect your mobile-friendly site, while changes to your mobile site do not affect your desktop site. 

Adjusting the layout of Pricing Plans on mobile

Make it as easy as possible for your clients to choose the right plan by customizing the layout of the Pricing Plans page on your mobile site. You can change the alignment and spacing between elements on the page so it's easy to read on smaller screens. 

To adjust the layout of Pricing Plans on your mobile site:

  1. Go to the Pricing Plans page in your Editor.
  2. Click the Switch to Mobile icon  at the top of the Editor.
  3. Click the Pricing Plans app on the page. 
  4. Click Settings.
  5. Click Layout.
  6. Customize the layout using the following options:
    • Page Text Layout: Choose your alignment preference for your title, subtitle and disclaimer.
    • Plan Card Spacing: Use the slider to set the amount of space between elements on your plan cards.
    • Plan Description Layout: Set your plan description alignment.
    • Benefits Layout: Choose your alignment and line spacing for your plan benefits.

Choosing what to display about Pricing Plans on mobile

Choose what details you want to display about each of your plans on mobile. You can show or hide information like plan names, taglines and benefits.   

To customize how you display Pricing Plans on your mobile site:

  1. Go to the Pricing Plans page in your Editor.
  2. Click the Switch to Mobile icon  at the top of the Editor.
  3. Click the Pricing plans app on the page. 
  4. Click Settings.
  5. Click Display. 
  6. Customize the display using the following options:
    • What would you like to show?: Choose which information to display about your pricing plans: page title, page subtitle, plan name, plan tagline and plan benefits.
    • Show disclaimer: Enable this toggle to display any relevant terms and conditions for clients to view before they purchase a plan. 
      • Enter your text in the Disclaimer text field.
Tip:
If you choose to highlight a Pricing Plan on desktop, it also appears as the first plan on your mobile site. 

Resizing text on the Pricing Plans page on mobile

Customize your Pricing Plans page design so everything is easy to read and the benefits of each plan are clear. Use the sliders to adjust the proportions of all the elements on your Pricing Plans mobile site.

To resize text on the Pricing Plans page on your mobile site:

  1. Go to the Pricing Plans page in your Editor.
  2. Click the Switch to Mobile icon  at the top of the Editor.
  3. Click the Pricing Plans app on the page.
  4. Click Settings. 
  5. Click Design.
  6. Use the sliders under Text Size to resize different text elements on the page (e.g. the plan's title, price, benefits, etc.)
Want to change the order of your pricing plans?
You can reorder pricing plans in the Pricing Plans tab in the dashboard, by dragging and dropping them into position. This controls the order of your plans on your site.

A screenshot showing how to change the order of pricing plans from your site's dashboard

Did this help?

|