Service Element

Please Note: Depending on your subscription plan, the Booking features may be unavailable for your project. Only subscriptions that include MySchedulr integration will have Booking functionality.

The Service element allows adding a Service card to any page (except Booking).

Table of Contents

Adding Service Element

Option 1

  • In the Site Editor, open the page where you want the service card.
  • Hover over the desired section and click Add Element in the upper-left corner of that section:

The Site Editor shows a page. The + ADD ELEMENT button appears at the top-left of the white section and is highlighted.

  • In the Add an Element panel, select Service from the Business category:

The ADD AN ELEMENT panel lists categories including Design and Business. Under Business, Service is highlighted.

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

The left sidebar shows a round + icon at the top, highlighted. Below it are icons for pages, design, media, blog, store, and appointments/scheduling (calendar icon).

  • In the Add an Element panel, scroll to Business and click Service:

Same ADD AN ELEMENT panel as Option 1, with Service under the Business category highlighted.

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing Service Element

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing a Service Element

To edit, duplicate or delete the element, click on it and switch between the buttons that appear in its toolbar:

A service card is selected with a blue outline. The toolbar above shows pencil (Edit), duplicate, and trash icons.

Editing the Service

  • Click the service element to display the Edit button (pencil icon) to modify the Service View and Design:

The Edit (pencil) icon in the floating toolbar is highlighted. The selected service card with price, duration badge, and Book now button.

View Tab

The View settings allow configuring the following options:

  • Service Picker. Click the Select button to open the pop-up and select a service to display, then click Select to confirm your choice:

The VIEW panel shows a service picker with a service highlighted and a Select button. Below are Image Shape, visibility toggles, Button text, and Full Width options.

Please Note: If the service you need does not exist yet, you can create one directly from the Service Picker modal window. Click Add a New Service to open Quick Create, then follow the steps to set the service type, details, checkout options, and staff. The new service is saved and can be selected for the Service element immediately. See Adding and Editing Services via Quick Create for full steps.

  • Image Shape: Choose the image shape from the drop-down list: Circle or Square.
  • Switches: Determine which product information is displayed on the card: Image, Service Name, Short Description, Description, Price, Duration. 
  • Button. Enter the label visitors see on the booking button (for example, Book now, Schedule appointment, or Reserve a time).
  • Full Width. Switch the Full-Width toggle on to stretch the Button across the entire width of the service card.

he VIEW tab shows all visibility toggles enabled. The Button field contains “Book now.” Full Width is turned on. The page preview shows the full-width orange booking button.

Design Tab

Design settings allow you to customize the color scheme and visual style of your store page. You can manage:

  • Card Background: Set the background color of service cards.
  • Card Border: Adjust the color and size of the card border.
  • Card Text. Set the card text color of the product card by clicking the Square icon on the right.
  • Hover Effects: Configure visual effects when hovering over product cards (Highlight Border, Highlight Background, Highlight Shadow, Scale, Shine, Grayscale, Sepia, Blur).

Please Note: No effects are applied if the toggle is turned off.

The Design tab shows Card Background, Card Text, Card Border, Hover Effects enabled, and a dropdown set to “Highlight border.”

Duplicating the Service Element

  • To duplicate the service, click on the element and choose the Duplicate button that appears in its toolbar:

The Duplicate icon in the floating toolbar is highlighted.

  • The duplicate of the element will appear immediately.

Deleting the Service Element

  • To delete the service, click on the element and choose the Remove button [Bin] that appears in its toolbar:

The trash/bin icon in the floating toolbar is highlighted.

  • The element will be removed immediately.

Common Questions

Why don’t I see Appointments options?

Booking is available only on subscriptions that include MySchedulr integration. If Appointments is missing, your current plan may not include this feature, or you may need to enable it in Site Editor App Settings.

Can I create a new service while adding the Service element?

Yes. In the Service Picker modal, click Add a New Service to open Quick Create. Set the service type, details, checkout options, and staff, then save. The new service can be selected for the Service element right away.

Why can’t I add a Service element to the Booking page?

The Service element can be added to any page except the Booking page. Use other pages (for example, Home or a custom services page) to display individual service cards.

Does deleting a Service element delete the service itself?

No. Removing the Service element from a page only removes that card from the page layout. The underlying service remains in Booking or Appointments until you delete it there.

Can I show multiple services on one page?

Yes. You can add multiple Service elements to any page except for system pages like Booking or Store.

Related Articles