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.

Table of Contents

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 Text. Set the catalog text color of the product card by clicking the Square icon on the right.
  • 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.