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

Customize the way your pricing plans appear on mobile to ensure a great experience for 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.

Additionally, you have the flexibility to change how the available pricing plans show up on a page. This can come in handy when you want to spotlight any special deals or offers.

Important:

In the Wix Editor, the desktop and mobile versions of a site represent different viewing modes of the same site; they are not separate sites. Changes to a desktop site affect the mobile-friendly site, while changes to a mobile site do not affect the desktop site.

Adjusting the layout of your pricing plans

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

Wix Editor

1. Go to your editor.

2. Click the Switch to Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing Plans element on the page.

5. Click Settings.

6. Click Layout.

7. 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.

Studio Editor

1. Go to your editor.

2. Click the Switch to Tablet / Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing Plans element on the page.

5. Click Settings.

6. Click Layout.

7. 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 info layout: Set your plan description alignment.

   • Benefits layout: Choose your alignment and line spacing for your plan benefits.

Wix Harmony Editor

1. Go to your editor.

2. Click the Mobile icon

   

   at the top right of the page.

3. Go to your Plans & Pricing page:

   1. Click the Page dropdown at the top left of the page.

   2. (In the Site Pages panel) Select the Plans & Pricing page under Pricing Plans Pages.

4. Click the Pricing Plans List element on your page.

5. Click the Settings icon

   

   on the action bar.

6. Click Layout.

7. Customize the layout using the following options:

   • Page text layout: Choose your alignment preference for your title, subtitle and disclaimer.

   • Plan card padding: Use the slider to set the amount of space between elements on your plan cards.

   • Plan info layout: Set your plan description alignment.

   • Benefits layout: Choose your alignment and line spacing for your plan benefits.

Choosing what to display on your pricing plans

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

Wix Editor

1. Go to your editor.

2. Click the Switch to Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing plans element on the page.

5. Click Settings.

6. Click Display.

7. 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.

     Tip: You can enter your text in the Disclaimer text field on desktop only.

Studio Editor

1. Go to your editor.

2. Click the Switch to Tablet / Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing plans element on the page.

5. Click Settings.

6. Click Display.

7. 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.

   • Click the Show highlighted plan drop-down and select the plan you want to appear as the first plan on your mobile site.

   • 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.

Wix Harmony Editor

1. Go to your editor.

2. Click the Mobile icon

   

   at the top right of the page.

3. Go to your Plans & Pricing page:

   1. Click the Page dropdown at the top left of the page.

   2. (In the Site Pages panel) Select the Plans & Pricing page under Pricing Plans Pages.

4. Click the Pricing Plans List element on your page.

5. Click the Settings icon

   

   on the action bar.

6. Click Highlighted plan.

7. Customize the display using the following options:

   • Highlight a plan: Click the toggle to decide whether a plan is highlighted:

     • Enabled: One of your plans is highlighted and you can customize it:

       • Select a plan: Click the drop-down and select the plan you want to highlight.

       • Show ribbon: Click the toggle to show or hide a ribbon on the highlighted plan.

       • Ribbon: Enter the text that appears on the ribbon, for example “Best value”.

     • Disabled: No plan is highlighted.

To add a disclaimer:

1. Click the Pricing Plans List element on your page.

2. Click the Display elements icon

   

   on the action bar.

3. Select the checkbox by Disclaimer.

Resizing the text on your pricing plans

Customize the 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.

Wix Editor

1. Go to your editor.

2. Click the Switch to Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing Plans element on the page.

5. Click Settings.

6. Click Design.

7. Use the sliders under Text Size to resize different text elements on the page (e.g. the plan's title, price, benefits, etc.)

Studio Editor

1. Go to your editor.

2. Click the Switch to Tablet / Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Pricing Plans element on the page.

5. Click Settings.

6. Click Design.

7. Choose what you want to customize:

   • Background and border: Set the background colors and opacity of your plans. Click the Highlighted tab to set the background & opacity of your highlighted plan.

   • Text: Select a font and color for each of the text options. Click the Highlighted tab to customize the text options of your highlighted plan.

   • Button: Select a button style and then customize it using the available options. Click the Highlighted tab to customize the button colors of your highlighted plan.

   • Ribbon: Customize how the 'Best Value' ribbon looks on your highlighted plan.

     Tip: Click the Text tab to change the name of what appears on the ribbon.

Wix Harmony Editor

1. Go to your editor.

2. Click the Mobile icon

   

   at the top right of the page.

3. Go to your Plans & Pricing page:

   1. Click the Page dropdown at the top left of the page.

   2. (In the Site Pages panel) Select the Plans & Pricing page under Pricing Plans Pages.

4. Click the Pricing Plans List element on your page.

5. Click the Settings icon

   

   on the action bar.

6. Click Design.

7. Choose what you want to customize:

   • Background and border: Set the background colors and opacity of your plans. Click the Highlighted tab to set the background & opacity of your highlighted plan.

   • Text: Select a font and color for each of the text options. Click the Highlighted tab to customize the text options of your highlighted plan.

   • Button: Select a button style and then customize it using the available options. Click the Highlighted tab to customize the button colors of your highlighted plan.

   • Ribbon: Customize how the ribbon looks on your highlighted plan.

Reordering your pricing plans

Reorder your pricing plans so that they appear in the order you want on your mobile site.

Wix Editor

Note: If you want to change the order of your plans on your mobile site, you need to do it from the desktop view in the Wix Editor by following the steps below. There are additional customization options limited to desktop, like modifying text and Add-Ons.

1. Go to your editor.

2. Go to your Plans & Pricing page:

   1. Click Pages & Menu

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

3. Click the Plans & Pricing element on your page.

4. Click Settings.

5. Click the Plans tab then click the Reorder plans tab.

6. Drag and drop the plans into position.

   Tip: To see these changes, Click the Switch to Mobile icon 

   

   at the top of the Editor.

Studio Editor

1. Go to your editor.

2. Click the Switch to Tablet / Mobile icon 

   

   at the top of the editor.

3. Go to your Plans & Pricing page:

   1. Click Pages

      

      on the left side of the editor.

   2. Click your Plans & Pricing page.

4. Click the Plans & Pricing element on your page.

5. Click Settings.

6. Click the Plans tab then click the Reorder plans tab.

7. Drag and drop the plans into position.

Wix Harmony Editor

1. Go to your editor.

2. Click the Mobile icon

   

   at the top right of the page.

3. Go to your Plans & Pricing page:

   1. Click the Page dropdown at the top left of the page.

   2. (In the Site Pages panel) Select the Plans & Pricing page under Pricing Plans Pages.

4. Click the Pricing Plans List element on your page.

5. Click the Settings icon

   

   on the action bar.

6. Click the Plans tab then click the Reorder plans tab.

7. Drag and drop the plans into position.