Service Catalog

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.

Adding Service Catalog

Option 1

  • Hover over the desired section and click Add Element:

  • Choose Service Catalog from the modal that appears:

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

Please Note: There is a limit of one Service Catalog per page.

Option 2

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

  • Choose the element:

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

Moving and Resizing a Service Catalog

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


Customizing a Service Catalog

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

Editing the Product

  • Click the service element to display the Edit button to be able to modify the product's Layout, View and Design:

Layout Tab

Layout settings of the Service Catalog include the following items:

  • Category. Select the category to display from the drop-down.
  • Services Per Row. Adjust the number of services in the row.
  • Total Rows. Set the number of rows that will be presented in the catalog.
  • Margin. Set the margin (outer spacing) for the service catalog.
  • Services Spacing. Set the spacing between items in the service catalog grid (inner spacing).

View Tab

The View settings allow configuring the following options:

  • 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. Set the name of the button.
  • Full Width. Switch the Full-Width toggle on to stretch the Button across the entire width of the service card.

Design Tab

  • Catalog Background: Set the background color of the service catalog.
  • Catalog Border: Adjust the color and size of the service catalog border.
  • Card Background: Set the background color of the service card.
  • Card Border: Adjust the color and size of the service card border.
  • Hover Effects: Configure visual effects when hovering over service cards: Highlight Border, Highlight Background, Highlight Shadow, Scale, Shine, Grayscale, Sepia, Blur.

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

Deleting the Service Catalog

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

  • The element will be removed immediately.