Wix Bookings: Setting Up the Service List Element

Your service list displays all the classes, courses and appointments you offer on your site. You can display everything on one page, or divide services by category on different pages. You can also customize the service list's design to suit your brand.

Step 1 | Add the service list element

Add a service list element to your page and display the services you want to promote. You can update the services displayed on this list as your business grows and you offer more services.

Wix Editor

1. Go to your editor.

2. Go to the page where you want to display your services.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Bookings.

5. Click Service List.

1. Drag the Service List element onto the page.

2. Click the Service List widget.

3. Click Settings.

4. Click Services.

5. Under How do you want to choose which services to display?, select the relevant option: Choose by service category, Choose by service location, or Choose services directly.

6. Click the checkbox next to the relevant categories, locations or services you want to display. The options you see depend on your choice in the step above.

Studio Editor

1. Go to your editor.

2. Go to the page where you want to display your services.

3. Click Add Elements

   

   on the left side of the editor.

4. Click Bookings.

5. Click Service List.

1. Drag the Service List element onto the page.

2. Click the Service List widget.

3. Click Settings.

4. Click Services.

5. Under How do you want to choose which services to display?, select the checkbox next to the relevant option: Choose by service category, Choose by service location, or Choose services directly.

6. Click to select the checkbox next to the relevant categories, locations or services you want to display. The options you see depend on your choice in step 9 above.

Wix Harmony Editor

1. Go to your editor.

2. Click + Add at the top left of the editor.

3. Select the Bookings category.

   Tip: Click the Arrow icon

   

   next to the categories to browse through the list.

4. Drag the Service List element onto the page.

Step 2 | Customize the layout of the service list element

Customize the layout of your service list to showcase your services and get more bookings. As the number of services you offer grows, you can adjust the layout to keep things clear.

Wix Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Layouts tab.

5. Customize the layout of your Service List using the options:

   • Choose a Layout: Select a layout for your Service List. Set the Max cards per row, if applicable to your chosen layout.

   • Spacing: Set the spacing between your services in your list.

   • Service Details Padding: Set the padding around the edges, and above and below your service details.

   • Image Layout: Depending on the layout, choose the position, shape and cropping of the images in your Service List.

   • Text Layout: Set the alignment for the list title and service text.

   • Service List Tabs: Choose how you want to display and align your tabs.

Studio Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Layouts tab.

5. Customize the layout of your Service List using the options:

   • Choose a Layout: Select a layout for your Service List. Set the Max cards per row, if applicable to your chosen layout.

   • Spacing: Set the spacing between your services in your list.

   • Service Details Padding: Set the padding around the edges, and above and below your service details.

   • Image Layout: Depending on the layout, choose the position, shape and cropping of the images in your Service List.

   • Text Layout: Set the alignment for the list title and service text.

   • Service List Tabs: Choose how you want to display and align your tabs.

Wix Harmony Editor

1. Go to your editor.

2. Click the Service List element.

3. Click the Settings icon

   

   on the action bar.

4. Click the Layouts tab.

5. Customize the layout of your Service List using the options:

   • Choose a Layout: Select a layout for your Service List. Set the Max cards per row, if applicable to your chosen layout.

   • Card spacing: Set the spacing between your services in your list.

     Note: The exact spacing options vary based on the layout you choose for the Service List.

   • Service Details Padding: Set the padding around the edges, and above and below your service details.

   • Image Layout: Depending on the layout, choose the position, shape and cropping of the images in your Service List.

   • Text Layout: Set the alignment for the list title and service text.

   • Service List Tabs: Choose how you want to display and align your tabs.

Step 3 | Customize your service list display settings

Next, adjust the display settings on your service page to add more details about your services. This is a great way to sort your services and choose what you want to display. You can also show course availability and service actions, including a book now button or a button which takes clients to your membership plans.

Wix Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Display tab.

5. Customize the display of your Service List using the options:

   • Show title on Service List: Enable the toggle to display the service list name. This is useful if you have several service lists on different pages.

   • Show tabs on Service List: Enable the toggle to show different categories of services.Then set up the following:

     • Use tabs to filter by: Choose how you want to filter the tabs:

       • Categories: Choose this option if you offer a variety of different services.

       • Locations: Choose this option if you offer the same services at several locations.

     • Show tab with all services: Click the checkbox to allow your clients to view a complete, unfiltered list of your services.

   • Service Details: Choose the displayed services and where clicking takes visitors:

     • What would you like to show? Select checkboxes next to each detail you want to display.

     • Clicking on the service name or image will take clients to the: Select whether your clients go to the Booking Calendar or the Service Page when they click the service name or image on the service list.

       Note: By default, the service list is set up to send visitors to the Calendar page when they click a service name or image.

   • Course Availability: Enable the toggle to show the current status of a course, for example, "6 spots left" or "fully booked". Then choose what you want to display:

     • Number of spots left: Show the exact number of spots left on the course.

     • Availability text: Show that there are still spots available, without showing the exact number.

   • Service Actions: Select the relevant checkbox:

     • Book Button: Display the Book Now and More Info buttons on your service list.

     • Explore Plans Link: Display a link to your Plans & Pricing page where clients can buy a membership or package.

Studio Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Display tab.

5. Customize the display of your Service List using the options:

   • Show title on Service List: Enable the toggle to display the service list name. This is useful if you have several service lists on different pages.

   • Show tabs on Service List: Enable the toggle to show different categories of services.Then set up the following:

     • Use tabs to filter by: Choose how you want to filter the tabs:

       • Categories: Choose this option if you offer a variety of different services.

       • Locations: Choose this option if you offer the same services at several locations.

     • Show tab with all services: Click the checkbox to allow your clients to view a complete, unfiltered list of your services.

   • Service Details: Choose the displayed services and where clicking takes visitors:

     • What would you like to show? Select checkboxes next to each detail you want to display.

     • Clicking on the service name or image will take clients to the: Select whether your clients go to the Booking Calendar or the Service Page when they click the service name or image on the service list.

       Note: By default, the service list is set up to send visitors to the Calendar page when they click a service name or image.

   • Course Availability: Enable the toggle to show the current status of a course, for example, "6 spots left" or "fully booked". Then choose what you want to display:

     • Number of spots left: Show the exact number of spots left on the course.

     • Availability text: Show that there are still spots available, without showing the exact number.

   • Service Actions: Select the relevant checkbox:

     • Book Button: Display the Book Now and More Info buttons on your service list.

     • Explore Plans Link: Display a link to your Plans & Pricing page where clients can buy a membership or package.

Wix Harmony Editor

1. Go to your editor.

2. Click the Service List element.

3. Choose what to do next:

Step 4 | Edit the text on the service list element

Now that your display settings are clear, you can edit the text that guides your users through your service list. Customize the title and tab name, encourage clients to view details and book sessions.

Wix Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Text tab.

5. Customize the text on your service list:

   • Text: Edit the List Title, All Services Tab, Read More Link and Video Conferencing Badge.

   • Course Availability: Edit the Availability text and No availability text.

   • Service Actions: Edit the Book Online Button, More Info Button, Request Booking Button, View Course Button, and Explore Plans Link.

Studio Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Text tab.

5. Customize the text on your service list:

   • Text: Edit the List Title, All Services Tab, Read More Link and Video Conferencing Badge.

   • Course Availability: Edit the Availability text and No availability text.

   • Service Actions: Edit the Book Online Button, More Info Button, Request Booking Button, View Course Button, and Explore Plans Link.

Wix Harmony Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Edit Text on the action bar.

4. Select an option under Choose an element to edit its text: Page title, Services Menu, Services, Book Button, or Load More button.

5. Edit the text on any of the available options.

Step 5 | Design the service list element

Once you're happy with your service list text, customize the design of your service page to fit your site and your brand. You can personalize the background and dividers, the text style and the button design.

Wix Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Design tab.

5. Design your Service List using the options below:

   • Background & Dividers: Use the sliders to customize the opacity, color borders and more of your background and dividers.

   • Text Style: Click the Text icon

     

     to edit the style, color and font of each piece of text on the service list.

     Note: If the title is hidden, you can go to the Display tab to make the title visible.

   • Service Actions Design: Choose a style for Book Button and Explore Plans Link a font and color and adjust the button background and opacity.

   • Tab Design: Choose the standard design for your tabs, including text font and color, and Divider Opacity & Color. Note: You only display tabs when you have more than one location or more than one category in your service list. Enable the Show tabs on Service List toggle in the Display tab to show different categories of services.

Studio Editor

1. Go to your editor.

2. Click the Service List element.

3. Click Settings.

4. Click the Design tab.

5. Design your Service List using the options below:

   • Background & Dividers: Use the sliders to customize the opacity, color borders and more of your background and dividers.

   • Text Style: Click the Text icon

     

     to edit the style, color and font of each piece of text on the service list.

     Note: If the title is hidden, you can go to the Display tab to make the title visible.

   • Service Actions Design: Choose a style for Book Button and Explore Plans Link a font and color and adjust the button background and opacity.

   • Tab Design: Choose the standard design for your tabs, including text font and color, and Divider Opacity & Color. Note: You only display tabs when you have more than one location or more than one category in your service list. Enable the Show tabs on Service List toggle in the Display tab to show different categories of services.

Wix Harmony Editor

1. Go to your editor.

2. Click the Service List element.

3. Click the Settings icon

   

   on the action bar.

4. Click the Design tab.

5. Design your Service List using the options below:

   • Background & Dividers: Use the sliders to design the background and the dividers between services. Customize the opacity, colors, borders and more.

   • Text Style: Click the Text icon

     

     to edit the style, color and font of each piece of text on the service list.

     Note: If the title is hidden, you can go to the Display Elements panel

     

     to make it visible.

   • Service Actions Design: Choose a style for Book Button and Explore Plans Link a font and color and adjust the button background and opacity.

   • Tab Design: Choose the standard design for your tabs, including text font and color, and Divider Opacity & Color.

     Note: You only display tabs when you have more than 1 location or more than one category in your service list. Enable the Group Services toggle in the Display tab to show different categories of services.

FAQs

Click below to learn more about setting up your Service List.

How do I adjust the layout on mobile?

You can adjust the layout on mobile by switching to the mobile view in your editor.

In the Layouts tab of the Settings panel, choose from 2 layout styles and 3 shapes for your service images. The layout is also now fully responsive, so you can provide a better experience on mobile.