How to create a book now section in shopify?

1. Create 3 metaobjects with name: service_categories, service_group and service
2. Edit the metaobject definition of service_categories and create "groups" metafield with reference to service group metaobject
3. Edit the metaobject definition of service_group and create "services" metafield with reference to service metaobject
4. Create a liquid section as below

{% assign categories = section.settings.service_categories %}
<div class="services-container">
  <div class="tabs">
    {% for category in categories %}
      <button class="tab-link{% if forloop.first %} active{% endif %}" data-tab="tab-{{ forloop.index0 }}">
        {{ category.title.value }}
      </button>
    {% endfor %}
  </div>
  <div class="service-tabs">
    <!-- Tab Buttons -->

    <!-- Tab Contents -->
    <div class="tab-contents">
      {% for category in categories %}
        <div class="tab-content{% if forloop.first %} active{% endif %}" id="tab-{{ forloop.index0 }}">
          <h2>{{ category.title.value }}</h2>
          {% if category.description.value %}
            <p>{{ category.description.value }}</p>
          {% endif %}
          <div class="service-groups">
            {% for group in category.groups.value %}
              <div class="service-group">
                <h3>{{ group.title.value }}</h3>
                <p>{{ group.description.value }}</p>
                <div class="services">
                  {% for service in group.services.value %}
                    <div class="service" >
                      <div>
                        <span class="service-title">{{ service.title.value }}</span>
                        {{ service.description.value }}
                      </div>
                      <div class="service-book">
                      <span class="price">
                        {{ service.price.value }}
                      </span>
                      {% comment %}
                        <a class="btn-book" href="#!form/463002|service={{ service.title.value }}">Book</a>
                      {% endcomment %}
                      </div>
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var tabLinks = document.querySelectorAll('.tab-link');
    var tabContents = document.querySelectorAll('.tab-content');
    tabLinks.forEach(function(link, idx) {
      link.addEventListener('click', function() {
        tabLinks.forEach(l => l.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        link.classList.add('active');
        tabContents[idx].classList.add('active');
      });
    });
  });
</script>
{% schema %}
{
  "name": "Service Tabs",
  "settings": [
    {
      "type": "metaobject_list",
      "id": "service_categories",
      "label": "Service Categories",
      "metaobject_type": "service_category"
    }
  ],
  "presets": [
    {
      "name": "Service Tabs"
    }
  ]
}
{% endschema %}

5. Add the css below to your theme css

.services-container {
  background-color: var(--color--accent-2);
}
.service-tabs {
  max-width: 900px;
  margin: 0 auto;
}
.tabs {
  display: flex;
  border-bottom: 2px solid #ebe1da;
  margin-bottom: 1em;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fff;
}
.tab-link {
  background: none;
  border: none;
  padding: 1em 2em;
  cursor: pointer;
  font-family: var(--font--heading--family);
  font-weight: var(--font--heading--weight);
  text-transform: var(--font--heading--uppercase);
  letter-spacing: var(--font--heading--spacing);
  line-height: var(--font--line-height);
  font-size: 1.2rem;
  min-width: 260px;
  margin: 0;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.tab-link.active,
.tab-link:hover {
  border-bottom: 2px solid var(--color--accent-1);
  font-weight: bold;
  color: var(--color--accent-1);
}
.tab-contents .tab-content {
  display: none;
  padding: 1em 0 2em;
}
.tab-contents .tab-content > h2 {
  margin-top: 0;
  display: none;
}
.tab-contents .tab-content.active {
  display: block;
}
.service-group {
  padding: 1rem;
  background-color: #ffffff54;
}
.service-group > h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.service-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.services {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
  border-top: 1px solid #c6997142;
  padding-top: 1rem;
}
.service {
  margin-bottom: 1em;
  display: flex;
  justify-content: space-between;
}
.service > div {
  display: flex;
  flex-direction: column;
}
.services-container .price {
  color: var(--color--accent-1);
  font-weight: bold;
}
.active #app-embed {
  display: flex !important;
}
.btn-book{
background-color: var(--color--accent-2);
    text-align: center;
    border-radius: 30px;
    font-size: .8rem;
    color: var(--color--accent-1) !important;
    padding: 0 0.5rem;
}
.btn-book:hover{
  background-color: var(--color--accent-1);
  color: #fff !important;
}
.service-book{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-direction: row !important;
}
#app-embed {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  display: none !important;
  width: 100%;
  height: 100%;
  background: #fffffff5;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 4rem 2rem;
}

[data-forms-id="forms-root-463002"] {
  position: fixed;
  z-index: 9999;
}
[data-forms-id="forms-root-463002"] .close-button {
  display: none;
}
[data-forms-id="forms-root-463002"].active .close-button {
  position: fixed;
  right: 0;
  top: 0;
  font-size: 30px;
  display: block;
  z-index: 9999;
  color: var(--color--accent-1);
  padding: 1rem;
}

6. Replace "463002' with the form id you want from shopify forms so that when you click on "Book" it will show the form

That's it and now you have a book now section for your services