Adding the modal (Pop-up) to Shopify sites

Created by Paul Sherry, Modified on Wed, Jun 19, 2024 at 12:01 AM by Paul Sherry

Getting Started

The following is an example of the HTML code that needs to be installed on your website in order for your "Book Now" buttons to open as modals rather than a redirect or new browser window. This is important in order to build trust with your online customer so that they never leave your website and maybe more importantly the modal has been specifically designed for presentation to the customer in this format.

<body>



<link rel="stylesheet" href="https://axearcadedemo.beta.poweredbyaxearcade.com/assets/css/modal.css?v=2" />



<button class="pbax-button" data-pbax url="https://axearcadedemo.beta.poweredbyaxearcade.com/packages/8abe32f4e914998eb5226746710ce8/bookings/new?embed=true&xem=b3b6b27429e5863b1d7888ae40cceb185fa01555">Book Now</button>
<script src="https://axearcadedemo.beta.poweredbyaxearcade.com/assets/js/modal.js"></script>

</body>

The example code above can be found by selecting the "Embed Modal" button found next to each package and can be used to take the online customer directly to that specific package. Book Now buttons that take the customer directly to a specific, single package are great for internal pages of your website where the customer knows what they are looking for. For example, if the customer is on the League Registration page of your website, you may want to send them directly to the League Registration package if they select the Book Now button located on that page.

Conversely, you could choose to embed a "Package Group" by navigating to the package groups page and selecting the "Embed Modal" button found next to a package group. Package Groups are typically best to be used on home pages where the customer has not yet narrowed down their search and you, the venue, want to present multiple options to choose from when the "Book Now" button is selected by the customer. Another nice benefit of Package Groups is that you can add and remove packages from the group and the packages presented in the Package Group modal on your website will automatically update without having to make any updates to the HTML code. Below is an example of a Package Group booking modal.

Now that you know where to find the embed code and you've decided which package or package group you need to add it to your website.

Shopify Installation Instructions

Please begin by logging into Shopify and going to your account. For our purposes we will be creating a new page.

Add a title to the page, and click the “Show HTML” button to switch it the the html editor.

Add code to the page and click save:

Button will now show on the created page.