Wix Help Center
    Home
  1. Managing your business
  2. Business solutions & apps
  3. Wix Bookings
  4. Customizing Wix Bookings pages
    5. Wix Bookings: Customizing Your Service Pages

Wix Bookings: Customizing Your Service Pages

Important:
We are in the process of releasing a new version of the service page and it's not yet available to all users. If your service page does not look like the one in the images below, click here. 
The Wix Bookings service page is the place to showcase each of your services. There, you can provide clients with everything they need to know before booking.
Service pages appear in your Editor automatically using the information you provide when creating your services. Your clients can access a service page by clicking the image, service name, or Read More link of a service.
In this article, learn more about:
A screenshot showing an example of a service page on a live site with a header, body and sidebar.

Customizing your service page layout

Start by choosing a layout for your service page that suits your business. Then decide what service information you want to display. Include details such as the description, schedule, contact details, and more.
You can customize the design of each of the three sections of the service page: the header, the sidebar and the main body. You can also hide the header and the sidebar if you prefer.
A screenshot showing the different areas of a service page including the header, main body and sidebar.

To change the layout of your service page:

  1. Click the Service Page element in your Editor.
  2. Click Settings.
  3. Click the Layout tab.
  4. Use the Show header toggle to enable or disable the header on your service page. 
  5. Select the checkboxes next to the elements you want to display on the service page header:

  6. Use the sliders to adjust the opacity, image height and side padding of your header. 
  7. Choose the alignment for your header. 
  8. Click Customize Image Cropping to set the image position of your header. 

Choosing the information you display

You can display up to 6 different sections of information on your service page. These sections include: the service title, description, details, and schedule.
You can also display your cancellation policy and your contact details. Choose the order you think best serves your clients.
Note:
If you display a sidebar on your service page, make sure to select the information section you want to display there. Note that whatever you display in the sidebar won't appear in the main body section.

Go to your site's dashboard to edit the specific information on the service page:

To choose the information you display:

  1. Click the Service Page element in your Editor.
  2. Click Settings.
  3. Click Sections. 
  4. Drag and drop the sections into the correct order using the blue grids on the left. 
A screenshot showing how to drag and drop to change the order of the sections on the service page.
  1. (Optional) Click the Edit icon  on each section and choose from the following options:
    • Use the toggle to hide or show a specific section. 
      Tip: Theicon indicates that an element is hidden.
    • Click the checkboxes to choose which details you want to display in each section (the options available depend on the section you edit). 
    • Choose the alignment for the section on the service page. 
An animated gif showing how to reorder the sections displayed on the service page.

Designing your service page

You can customize the design of the service page to better suit your brand and business. Edit the header, body and sidebar to make the information you display clear. 
You can also add elements such as a service details box, a schedule or a gallery so clients know exactly what to expect from your services. 

To customize the design of your service page:

  1. Click the Service Page element in your Editor.
  2. Click Settings.
  3. Click the Design tab.
  4. Choose what you want to customize:
    • Header: Customize the color and opacity of the service page Header background and Service Title. You can also adjust the font and background color and opacity of the header button using the available options.
    • Body: Customize the color and opacity of the service page body background, text, and buttons using the available options.
    • Sidebar: Customize the color and opacity of the service page sidebar background, text, and buttons using the available options.
    • Service Details box: Adjust the design of the details box, including the font, color, background and border using the available options.
    • Schedule: Customize the design of the schedule, including the background color, opacity, borders and dividers using the available options. You can also customize the color and the font of the text that appears in the schedule. 
    • Gallery: Adjust the corner radius, border width, color and opacity using the available options. 
A screenshot showing the customization options in the design tab.
Want to learn more?
Check out the full course in Wix Learn about designing your site to build your business online. 

Editing the text on your service page

Customize the text on your service page to fit your brand's tone and voice. This is useful if you and your staff have specific ways of describing your services and availability.
You can customize the text for the bookings buttons, booking requests, course availability, and more. 

To edit the text on your service page:

  1. Click the Service Page element in your Editor.
  2. Click Settings.
  3. Click the Text tab.
  4. Click to edit the text on any of the available options, including your call-to-action or "Book Now" button.

Did this help?

|

Related Content

Wix Bookings: Adding and Setting up a Staff Widget on Your Site
Wix Bookings: Adding and Setting Up a Daily Agenda on Your Site

Hire a Wix Partner

Get help with your website's design, marketing and small tasks from a professional freelancer or agency.
Start Now