Adding a Pre-Booking Button

Store Design

Topic summary

  • Request: Add a “Pre-Booking” button to Shopify product and collection pages.
  • Follow-up: A respondent asked for the store URL to assess feasibility.
  • Update: The requester provided the website URL.
  • Status: No solution or implementation steps shared yet; awaiting further guidance or recommendations.
Summarized with AI on January 29. AI used: gpt-5.
1

Hi, just checking if there’s an option to add a “Pre-Booking” button on the product and collection pages in Shopify.

Thanks in Advance

2

hey @naveen.raj share the URL of your website plz

1 Like
3
4

Hi @naveen.raj,

Go to online Store > Edite Theme > Go to product Section >add Custom Liquid file.

an d Paste this code.

<style>
  .pre-booking-btn-custom {
    background-color: #a8887d; 
    color: #ffffff;
    padding: 15px 70px 15px 70px;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    display: block;
    text-align: center;
    transition: opacity 0.2s ease-in-out;
    border-radius: 50px; 
    line-height: 1.2;
    text-decoration: none;
  }

  .pre-booking-btn-custom:hover {
    opacity: 0.8;
    color: #ffffff;
  }
</style>

<button type="button" class="pre-booking-btn-custom" onclick="preBookingCheckout()">
  Pre-booking
</button>

<script>
function preBookingCheckout() {
  // Variant ID aur quantity hasil karne ke liye
  const variantId = document.querySelector('[name="id"]')?.value;
  const quantity = document.querySelector('[name="quantity"]')?.value || 1;

  if (!variantId) {
    alert("Please select a size/color first.");
    return;
  }

  let formData = {
   'items': [{
    'id': variantId,
    'quantity': quantity
    }]
  };

  fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  })
  .then(response => {
    window.location.href = '/checkout';
  })
  .catch((error) => {
    console.error('Error:', error);
  });
}
</script>

image
image1575×570 149 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!