Pick a Spot Map

If your studio uses a Pick-a-Spot booking model, you can style your class map. By default, all the spots have a very basic look, but you can differentiate between them through our dynamically applied classes. For example, a treadmill spot would have a class .MT_layout-spot--treadmill, that you can assign your preferred styling.

Map and Spot Sizes

For details on how to size the width of the map based on the screen width, space between the spots and how large the spots are, please see the schedule integration page.

Spot Icons

In addition, you can also add icons to the spots by using the background-image: url() property. Example:

.MT_layout-spot--bike {
  background-image: url("https://placeimg.com/50/50/any");
}

Here is what the map can look like with styled spot icons:

Additional information

For more in-depth information on CSS image replacement techniques, you can check out this article.