Wix Bookings: Setting Up Your Service List
9 min read
Your service list displays all the classes, courses and appointments you offer. 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 | Create your service list
Add a service list and display only the services that are relevant to that page. You can update the service list as your business grows and you offer more services.
To create your service list:
- Go to the page where you want to display your services.
- Go to the Add panel in your Editor:
- Wix Editor: Click Add
on the left side of the Editor. - Editor X: Click Add Elements
at the top of Editor X.
- Wix Editor: Click Add
- Click Bookings.
- Click Service List.
- Choose a template and drag the Service List element onto the page.
- Click the Service List widget.
- Click Settings.
- Click Services.
- 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.
- 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.
Step 2 | Customize the layout of your service list
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.
To customize the layout of your service list:
- Click the Service List in your Editor.
- Click Settings.
- Click the Layouts tab.
- 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: Choose the shape and cropping of the images in your Service List.
- Text Layout: Set the alignment for the list title and service text.
- Choose a Layout: Select a layout for your Service List.
Tip:
You can also adjust the layout on mobile by clicking Switch to Mobile at the top of your Editor.
In the Layouts tab, choose from two layout styles and three shapes for your service images. The strip layout is also now fully responsive, so you can provide a better experience on mobile.
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. You can also include price, dates and whether you offer the services online.
To customize your service list display settings:
- Click the Service List in your Editor.
- Click Settings.
- Click the Display tab.
- Customize the display of your Service List using the options:
Choose what to show on the Service List
Choose what service details you display
Add a button to book a service
Explore Plans Link
Choose what page clients see when they click the service name or image
Step 4 | Edit the text on your service list
Now your display settings are clear, you can edit the text which guides your users through your service list. Customize the title and tab name, encourage users to find out more and, of course, to book a session.
To edit the text on your service list:
- Click the Service List in your Editor.
- Click Settings.
- Click the Text tab.
- Customize the text on your Service List using the following options:
- List Title: Give your service list an eye-catching title to draw more attention.
- All Services Tab: Rename the main tab where you list all your services (if you enabled the toggle in display settings). The other tabs will feature the names of your different service categories.
- Read More Link: This button leads your users to a page with more detailed information about your view-only services.
- Video Conferencing Badge: Edit this text to draw more attention to your online services.
- Availability text: This text describes how many places are left on your course.
- No availability text: This text appears when your course is fully booked.
- Book Online Button: This is your main call-to-action button that encourages users to book your services right away. Choose the right text to get users booking your services right away.
- More Info Button: This button leads to a dedicated service page with more details.
- Request Booking Button: Add text for services which require your approval before the booking is confirmed.
- View Course Button: When a course has ended or is full, this leads your clients to the service page with more information about the course.
Step 5 | Design your service list
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.
To design your service list:
- Click the Service List in your Editor.
- Click Settings.
- Click the Design tab.
- Design the following areas of your Service List:
Background and dividers
Text
to edit the font. Here you can choose a theme for all of the fonts across your site or choose a custom theme.
Button
Tab design
Did this help?
|